📌ESLint란?
ESLint는 EcmaScript(javascript) 와 Lint를 합친 것으로 여기서 Lint는 에러가 있는 코드에 표시를 달아놓는 것을 의미한다.
즉 ESLint는 자바스크립트 문법에서 에러가 발생하면 표시해주는 도구이다.
ES는 EcmaScript로서, Ecma라는 기구에서 만든 Script, 즉, 표준 Javascript를 의미합니다.
Lint는 에러가 있는 코드에 표시를 달아놓는 것을 의미한다.
이뿐만 아니라 전반적인 코딩스타일까지 지정할 수 있으므로 협업에 유용하다.
📌ESLint 사용하기(feat. typescript)
패키지 설치
// 타입스크립트관련 ESLint패키지 설치
npm i -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-import-resolver-typescript// ESLint 서드파티 플러그인 패키지 설치
npm i -D eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import eslint-plugin-jsx-a11y// airbnb사 ESLint 환경설정 패키지
npm i -D eslint-config-airbnb// prettier와 ESLint 충돌방지용 패키지
npm i -D eslint-config-prettier eslint-plugin-prettier패키지 설명
eslint: 코드의 문법을 검사하는 린팅과 코드의 스타일을 잡아주는 포맷팅 기능
@typescript-eslint/eslint-plugin: TypeScript관련 linting 규칙을 처리하는 플러그인
@typescript-eslint/parser: TypeScript용 ESLint 파서
eslint-import-resolver-typescript:
eslint-plugin-react: React 관련 린트설정 지원
eslint-plugin-react-hooks: React Hooks의 규칙을 강제해주는 플러그인
eslint-plugin-import: ES2015+의 import/export 구문을 지원
eslint-plugin-jsx-a11y: JSX 내의 접근성 문제에 대해 즉각적인 AST 린팅 피드백 제공
eslint-config-airbnb: airbnb사의 코딩규칙 사용 가능
eslint-config-prettier: prettier와 eslint의 충돌을 일으키는 ESLint 규칙들을 비활성화 시켜주는 config
eslint-plugin-prettier: prettier에서 인식하는 오류를 ESLint가 출력해줌
CRA프로젝트에서는 eslint-plugin-react, eslint-plugin-react-hooks, eslint-plugin-import, eslint-plugin-jsx-a11y 를 지원해주므로 제외하고 설치하면 된다.
ESLint 설정하기
.eslintrc.json 파일을 최상단폴더에 생성 후, 아래처럼 작성하면 된다.
(ESLint를 설정하기 귀찮다면 VSC Extension에서 설치하여 사용하자.)
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint", "import"],
"extends": [
"airbnb",
"airbnb/hooks",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended",
"plugin:import/errors",
"plugin:import/warnings"
],
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"linebreak-style": 0,
"import/no-dynamic-require": 0,
"import/no-unresolved": 0,
"import/prefer-default-export": 0,
"global-require": 0,
"import/no-extraneous-dependencies": 0,
"jsx-quotes": ["error", "prefer-single"],
"react/jsx-props-no-spreading": 0,
"react/forbid-prop-types": 0,
"react/jsx-filename-extension": [
2,
{ "extensions": [".js", ".jsx", ".ts", ".tsx"] }
],
"import/extensions": 0,
"no-use-before-define": 0,
"@typescript-eslint/no-empty-interface": 0,
"@typescript-eslint/no-explicit-any": 0,
"@typescript-eslint/no-var-requires": 0,
"no-shadow": "off",
"react/prop-types": 0,
"no-empty-pattern": 0,
"no-alert": 0,
"react-hooks/exhaustive-deps": 0
},
"settings": {
"import/parsers": {
"@typescript-eslint/parser": [".ts", ".tsx"]
},
"import/resolver": {
"typescript": "./tsconfig.json"
}
}
}ESLint 설정 옵션 설명
env:
사전 정의된 전역 변수 사용정의
"env": {
"browser": true,
"es6": true,
"node": true
}선언하지 않은 전역변수를 사용할 때 경고하지 않도록, globals를 이용하여 사용자 전역 변수를 추가 가능
"globals": {
"$": true
}parser:
ESLint는 구문 분석을 위해 보통 Espree 파서를 사용하는데 자주 사용되는 파서로는 Babel과 함께 사용되는 babel-eslint, Typescript 구문 분석을 위해 사용되는 @typescript-eslint/parser가 있다
"parser": "@typescript-eslint/parser"plugins:
ESLint는 서드파티 플러그인을 지원한다.
플러그인 패키지들을 설치하고, 설치한 플러그인들을 plugins에 추가하여 사용할 수 있다.
"plugins": ["@typescript-eslint", "import"]extends:
extends는 추가한 플러그인에서 사용할 규칙을 설정해야 한다. 플러그인은 일련의 규칙 집합이며, 플러그인을 추가하여도 규칙은 자동 적용되지 않는다. 규칙을 적용하기 위해서는 추가한 플러그인 중에 사용할 규칙을 직접 추가해줘야 적용된다.
"plugins": ["@typescript-eslint", "import"],
"extends": [
"airbnb",
"airbnb/hooks",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended",
"plugin:import/errors",
"plugin:import/warnings"
],eslint:all과 eslint:recommended는 ESLint에 기본으로 제공해주고 있지만 ESLint는 eslint:all을 프로덕션 용도로 사용하지 않는 것을 권장한다.
parserOptions:
ESLint 사용을 위해 지원하려는 Javascript 언어 옵션을 정의할 수 있다.
ecmaVersion: 사용할 ECMAScript 버전을 설정
sourceType: parser의 export 형태를 설정
ecmaFeatures: ECMAScript의 언어 확장 기능을 설정
globalReturn: 전역 스코프의 사용 여부 (node, commonjs 환경에서 최상위 스코프는 module)
impliedStric: strict mode 사용 여부
jsx: ECMScript 규격의 JSX 사용 여부
{
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
}
}rules:
ESLint에는 프로젝트에서 사용하는 규칙을 수정할 수 있다.
"off" 또는 0: 규칙을 사용하지 않음
"warn" 또는 1: 규칙을 경고로 사용
"error" 또는 2: 규칙을 오류로 사용
규칙에 추가 옵션이 있는 경우에는 배열 리터럴 구문을 사용하여 지정할 수 있다.
"rules": {
"eqeqeq": "off",
"curly": "error",
"quotes": ["error", "double"]
"comma-style": ["error", "last"],
}settings:
ESLint 구성 파일에 설정 개체를 추가할 수 있으며, 실행될 모든 규칙에 제공됩니다.
"settings": {
"import/parsers": {
"@typescript-eslint/parser": [".ts", ".tsx"]
},
"import/resolver": {
"typescript": "./tsconfig.json"
}
}ESLint 실행하기
터미널에서 ESLint를 실행해보자.
eslint {파일경로}
ex) eslint src/components/atoms/Button/index.ts
만약 eslint 명령어를 사용할 수 없다면 eslint를 전역 설치
npm i -g eslint다시 eslint를 실행했을 때 에러가 있다면 해당 에러를 고치려면 직접 고치는 방법과 명령어를 통하여 자동으로 고치는 방법이 있다.
eslint --fix {파일경로}
ex) eslint --fix src/components/atoms/Button/index.ts
eslint 명령어 뒤에 --fix 옵션을 붙이면 발생한 에러를 자동으로 고쳐주지만 만능은 아니다.
#REFERENCE
