Eslint

Eslint는 코드 작성에 있어서 규칙을 설정하고 이를 벗어난 방식의 코드 작성식 Warn 혹은 Error를 발생시켜 일관된 코드를 작성하도록 해주는 툴이다.

예를 들면, 주석 작성에서 // 이후 tab를 사용한 만큼의 공간을 생성하고 텍스트를 작성하라 혹은 , 이후 띄어쓰기를 하라 정도까지의 매우 세세한 부분까지 설정이 가능하다.

다만, 이미 내 방식대로 작성하여 진행중인 프로젝트에 Eslint를 적용하면 오류가 수백개가 검출되는 것을 볼 수 있으니, 개인적으로 프로젝트를 시작할때는 적용하여 사용하는것이 좋아 보인다.

(.tsx 파일이 4개일 뿐인데 반응하는 오류는 600개 였다...)

---

Eslint Setting Options

• plugins
• extends
• rules
• env
• parser/parserOption
• override

---

Eslint with TypeScript

npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser
eslint / typescript 설치

npm install --save-dev eslint-config-airbnb
eslint - airbnb설정 설치

npm install --save-dev eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-import
eslint react 플러그인 설치

• eslint-plugin-react : React 규칙이 들어있는 플러그인
• eslint-plugin-react-hooks : React Hooks 규칙이 들어있는 플러그인
• eslint-plugin-jsx-a11y : JSX 요소의 접근성 규칙에 대한 정적 검사 플러그인
• eslint-plugin-import : ES6의 import, export 구문을 지원하는 필수 플러그인

package.json - dependencies (eslint관련)

    "@typescript-eslint/eslint-plugin": "^5.54.0",
    "@typescript-eslint/parser": "^5.54.0",
    "eslint": "^8.35.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",

---

Eslint Setting

.eslintrc 파일 생성(root 경로)

밑에는 시험삼아 테스트한 제 프로젝트에 사용된 .eslintrc 이다.
위에서 말한 600개의 오류에 대해 설정 수정 및 오류 해결등의 작업을 하기 위해 extends 부터 여러 설정을 추가 했다.

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "airbnb",
    "airbnb/hooks",
    "plugin:import/typescript"
  ],
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "rules": {
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ], //import resolve problem
    "react/jsx-filename-extension": ["warn", { "extensions": [".tsx"] }], 
      //jsx not in tsx
    "no-shadow": "off",
    "@typescript-eslint/no-shadow": "warn", 
      //이미 선언되 변수의 declared 오류 해결 (setState(data=>data+1))
    "linebreak-style": 0,
    "comma-dangle": ["error", "never"], 
      // 매개변수 마지막의 ,(comma) 설정
    "jsx-quotes": [2, "prefer-single"], 
      // 스크립트에서 ""(double) 과 ''(single) 둘중 어느 것으로 사용할것인가 (일관성)
    "react/self-closing-comp": [
      "error",
      {
        "component": false,
        "html": false
      }
    ] 
    // <div></div>와 같이 child가 없는 엘리먼트 허용?(false) 
    //비허용(true) 비허용시 <div/> 로 사용해야한다.
  },
  "env": {
    "browser": true
  }
}

---

Eslint Example

여러 Option을 사용한 예시

{
  "root": true,
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:jsx-a11y/strict",
    "plugin:import/recommended",
    "plugin:import/typescript",
    "plugin:@typescript-eslint/recommended",
    "plugin:testing-library/react",
    "prettier"
  ],
  "plugins": [
    "react",
    "react-hooks",
    "jsx-a11y",
    "import",
    "@typescript-eslint"
  ],
  "settings": {
    "import/resolver": {
      "typescript": {
        "alwaysTryTypes": true
      }
    },
    "react": {
      "version": "detect"
    }
  },
  "rules": {
    "no-console": "error",
    "import/prefer-default-export": "off"
  },
  "overrides": [
    {
      "files": "**/*.+(ts|tsx)",
      "parser": "@typescript-eslint/parser",
      "plugins": ["@typescript-eslint"],
      "extends": ["plugin:@typescript-eslint/recommended"]
    },
    {
      "files": ["**/__tests__/**/*", "**/*.{spec,test}.*"],
      "env": {
        "jest/globals": true
      },
      "plugins": ["jest", "jest-dom", "testing-library"],
      "extends": [
        "plugin:jest/recommended",
        "plugin:jest-dom/recommended",
        "plugin:testing-library/react"
      ]
    }
  ]
}