ESlint, Prettier

설치 명령어

npm install -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-prettier eslint-config-prettier

1. .eslintrc.json , .prettierrc.json 설정적용

아래와 같이 새로운 파일 ( .eslintrc.json , .prettierrc.json) 을 생성하고, 아래 코드를 참고하여 기본 설정을 적용

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:import/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "react/react-in-jsx-scope": 0,
    "react/jsx-uses-react": 0
  }
}

//.prettierrc.json

{
  "singleQuote": true
}

2. VSCode 설정으로 이동하여 editor.codeActionsOnSave 설정을 아래와 같이 조정하면, 저장할 때마다 ESlint가 고칠 수 있는 에러와 코드 스타일링을 자동으로 고쳐줌