[Personal Portfolio] 2. 리액트 앱에서 ESLint 설정하기

React App에서 ESLint 설정하기

---

원래는 ESLint 설정을 하지 않을 생각이었는데, 린트 설정 없이 npm start를 하면 나오던 오류가 없으니… 조금 허전해서 이왕 할거 린트 설정까지 한번 제대로 해보기로 했다.

린트 설정을 한다면 바로 npm start 를 하더라도 적용은 되지 않고, husky 등을 통해서 따로 설정을 해 줘야 한다.

이번에는 그냥 린트만 적용시켜서, 아래와 같이 따로 린트 스크립트를 만들어서 실행시켜줬다.

"lint": "eslint src/**/*.jsx"

 

 

ESLint 설정에 사용한 패키지

---

1. eslint
2. eslint-plugin-react
3. eslint-plugin-react-hooks
   
   

 

ESLint 설정

---

1. eslint를 설치하고, 아래의 스크립트를 터미널에 입력하면 .eslintrc 파일이 루트 폴더에 생성된다.

 

node_module/.bin/eslint --init

 

2. extends, plugins 에 설치한 리액트 패키지를 추가했다.

{
  "env": {
    "browser": true,
    "node": true,
    "commonjs": true,
    "es6": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["react", "react-hooks"]
}

 

3. 사용 중인 리액트 버전을 기입하라는 오류가 떠서, settings 에 아래와 같이 버전 정보를 추가해주었다.

{
  "env": {
    "browser": true,
    "node": true,
    "commonjs": true,
    "es6": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["react", "react-hooks"],
  "settings": {
    "react": {
      "createClass": "createReactClass",
      "pragma": "React",
      "version": "detect"
    },
  }
}

 

4. rules 에 사용할 린트 규칙을 추가했다.

{
  "env": {
    "browser": true,
    "node": true,
    "commonjs": true,
    "es6": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["react", "react-hooks"],
  "rules": {
    "no-console": "error",
    "no-unused-vars": "error",
    "react/react-in-jsx-scope": "error",
    "react/no-unsafe": "error",
    "react-hooks/rules-of-hooks": "error"
  },
  "settings": {
    "react": {
      "createClass": "createReactClass",
      "pragma": "React",
      "version": "detect"
    },
  }
}

 

린트 설정을 한다고 해서 CRA를 사용했을 때처럼 npm start를 실행시키거나, 저장할 때마다 ESLint가 실행되지는 않는다.

이 부분은 추가적으로 husky 등을 설치하고, 설정을 해 줘야 한다고 하길래.. 일단은 이정도까지만 적용시키고 넘어갔다.