React/Settings

React - ESLint

고코모옹 2021. 6. 4. 07:47

https://eslint.org/

 

ESLint - Pluggable JavaScript linter

Customize Preprocess code, use custom parsers, and write your own rules that work alongside ESLint's built-in rules. You can customize ESLint to work exactly the way you need it for your project.

eslint.org

  • create-react-app 으로 프로젝트 설치 시, ESLint는 기본적으로 설치되어 있음
{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  }
}
  1. npm init -y
  2. npm i -D eslint
  3. npx eslint --init
    • ESLint 초기화
    • .eslintrec.js 파일 생성
// .eslintrc.js
module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 12
    },
    "rules": {
    }
};
  • Eslint 점검
    1. npx eslint [파일명]
      • 수정 : npx eslint [파일명] --fix
    2. ESLint 플러그인 설치