ESLint 구성

이 챕터에서는 ESLint와 Typescript의 병합된 환경구성을 다룹니다.

eslint의 기초적인 개념은 따로 설명하지 않으며,

이후 사용자의 기호에 따라 추가적인 컨벤션을 적용할 수 있습니다. EX ) airbnb eslint guide

• Terminal

npm install eslint -D

eslint

• 자바스크립트 문법에서 에러를 표시해주는 패키지

npm install eslint-plugin-react eslint-plugin-react-hooks -D

eslint-plugin-react

• react에서 eslint가 동작하도록 하는 패키지

eslint-plugin-react-hooks

• react hook에서 eslint가 동작하도록 하는 패키지

npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

@typescript-eslint/parser

• typescript 코드가 lint 되도록 하는 패키지

@typescript-eslint/eslint-plugin

• typescript에 맞는 eslint 룰을 포함하는 패키지

npm install eslint-plugin-import eslint-plugin-jsx-a11y -D

eslint-plugin-import

- ES2015 이상 import, export 문법 linting을 지원하는데,
import나 export 할 때 잘못된 파일 경로나 이름에 관한 이슈를 막는 것을 지원하는 패키지

eslint-plugin-jsx-a11y

• 실시간으로 JSX 요소에 대한 접근성 규칙 확인을 위한 정적 AST checker 패키지

• ROOT

설정파일의 경우 대체적으로 .json으로 작성되어있습니다.

.js로 설정하셔도 무관하지만, 이 문서에서는 .json 설정만을 다룹니다.

// .eslintrc { "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaVersion": 2020, "sourceType": "module" }, "extends": [ "plugin:react/recommended", "plugin:react-hooks/recommended", "plugin:@typescript-eslint/recommended", "plugin:import/errors", "plugin:import/warnings", "plugin:import/typescript", "plugin:jsx-a11y/recommended", "plugin:prettier/recommended" ], "plugins": [ "react", "@typescript-eslint", "prettier" ], "rules": { "no-unused-vars": "off", "@typescript-eslint/no-unused-vars": [ "error" ], "@typescript-eslint/no-var-requires": "off", "react/prop-types": "off", "react/jsx-uses-react": "off", "react/react-in-jsx-scope": "off", "@typescript-eslint/explicit-module-boundary-types": "off" }, "settings": { "react": { "version": "detect" } } }

// package.json "scripts": { "start": "webpack serve --config webpack/webpack.config.js --env env=dev", "build": "webpack --config webpack/webpack.config.js --env env=prod", "lint": "eslint --fix \"./src/**/*.{js,jsx,ts,tsx,json}\"", "prettier": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"" },