[변수 이름]: [Type]
or [변수 이름] : [Type]
)eslint-plugin-import: 임포트 관련 (파일, 폴더, 모듈)
eslint-plugin-jsx-a11y: 접근성, 코드 완결성
eslint-plugin-prettier
eslint-plugin-react
eslint-plugin-react-hooks
@typescript-eslint/eslint-plugin
@typescript-eslint/parser
ESLint
"off"
- 옵션 적용 안 시키기"warn"
- 경고만 보여주는데 실행은 되게"error"
- 에러 발생시킴 (exit code 1번으로 종료)규칙에 추가 옵션이 있는 경우에는 배열에 넣어서 표현
{
"rules": {
"eqeqeq": "off",
"curly": "error",
"quotes": ["error", "double"]
"comma-style": ["error", "last"],
}
}
Rules 종류
내가 생각하는 필요한 옵션
{
"rules": {
"func-call-spacing": "never",
"comma-spacing": ["error", { "before": false, "after": true }],
}
}
두가지의 airbnb 설정(eslint-config-airbnb, eslint-config-airbnb-base)이 있습니다. 이 두가지의 차이점은 설정파일에 리액트 규칙이 있냐 없냐의 차이입니다.
eslint-config-airbnb
에는 리액트 관련 규칙
이 모두 들어 있고,eslint-config-airbnb-base
의 경우에는 리액트를 제외한 규칙
이 들어 있습니다. (서버 같은 데서 사용)~ npm v.4 : npm info "eslint-config-airbnb@latest" peerDependencies
를 입력하면 설치해야하는 리스트들이 나옵니다. 각자 설치를 해주도록 합니다.
npm v.5 ~ : npx install-peerdeps --dev eslint-config-airbnb
로 자동으로 플러그인 및 설정들을 설치해줍니다
{
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"extends": ["airbnb", "airbnb/hooks", "plugin:@typescript-eslint/recommended"]
}
설정파일에 추가합니다.
ESLint - Pluggable JavaScript linter
What is Prettier? · Prettier
prettier와 eslint설정하기(+타입스크립트 설정)
vscode에 eslint와 prettier 설정하기 | NOT_NULL
ESLint, Prettier 적용하기
Eslint 적용하기(React + Typescript + Prettier)