eslint

Next.js 프로젝트 환경설정하기

Next 설치하기

node.js 설치하면 깔려있음

• npx create-next-app
  • Typescript -> Yes
  • Eslint -> Yes
  • Tailwind Css -> Yes
  • src/ -> NO
  • App Router -> Yes
  • import alias -> No

Eslint 설치 하기

• npm install --save-dev typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-config-prettier eslint-plugin-prettier prettier
•  
• {  "compilerOptions": {    "target": "es5",    "lib": ["dom", "dom.iterable", "esnext"],    "allowJs": true,    "skipLibCheck": true,    "strict": false,    "forceConsistentCasingInFileNames": true,    "noEmit": true,    "esModuleInterop": true,    "module": "esnext",    "moduleResolution": "node",    "resolveJsonModule": true,    "isolatedModules": true,    "jsx": "preserve",    "incremental": true },  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],  "exclude": ["node_modules"] } //tsconfig.json ​

• {
    "singleQuote": true,
    "semi": true,
    "trailingComma": "all",
    "printWidth": 80,
    "endOfLine": "lf"
  }
  //.prettierrc

• {
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
      "ecmaVersion": 2020,
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true
      },
      "project": "./tsconfig.json"
    },
    "extends": [
      "next/core-web-vitals",
      "airbnb",
      "airbnb/hooks",
      "plugin:@typescript-eslint/recommended",
      "plugin:prettier/recommended"
    ],
    "plugins": ["@typescript-eslint", "prettier"],
    "rules": {
      "prettier/prettier": ["error"],
      "react/react-in-jsx-scope": "off",
      "jsx-a11y/anchor-is-valid": [
        "error",
        {
          "components": ["Link"],
          "specialLink": ["hrefLeft", "hrefRight"],
          "aspects": ["invalidHref", "preferButton"]
        }
      ],
      "import/extensions": [
        "error",
        "ignorePackages",
        {
          "ts": "never",
          "tsx": "never",
          "js": "never",
          "jsx": "never"
        }
      ],
      "import/no-extraneous-dependencies": [
        "error",
        {
          "devDependencies": ["**/*.test.ts", "**/*.test.tsx", "**/setupTests.ts"]
        }
      ],
      "react/jsx-filename-extension": [1, { "extensions": [".tsx"] }]
    },
    "settings": {
      "import/resolver": {
        "node": {
          "extensions": [".js", ".jsx", ".ts", ".tsx"]
        }
      }
    }
  }
  //eslintrc.json

• {
    "scripts": {
      "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
      "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
      "format": "prettier --write ."
    }
  }
  //package.json