eslint란
eslint는 문법검사기이다. 코드에 규칙을 적용하여 모두가 읽기 편한 코드로 바꿔줄 수 있는 도구이다.
eslint 설치법
yarn global add eslint
eslint는 한 프로젝트에서만 사용할 것이 아니라 프로젝트를 만들 때마다 적용할 것이기 때문에 global로 설치해준다.
yarn add eslint
eslint --init
위의 두 명령어를 입력하여 내 프로젝트에 eslint를 설치하고 설정값을 초기화 해준다.
eslint 설정법
parseOption: JavaScript의 버전을 어떻게 쓸 것 인지, 어떤 형식으로 작성할 것 인지 설정.
parser: parse라는 단어는 구문분석이라는 뜻이다. 따라서 eslint를 쓰기 전에 어떻게 분석할 것인지 정해주어야 한다.
env: 전역 변수의 사용의 범위 Node, Browser
plugin: eslint를 적용할 라이브러리, eslint는 당신이 어떤 프레임워크를 써서 개발하고 있는지 모른다.
extends: plugin에서 사용할 규칙을 정의해준다.
"eslint:recommended",
"plugin:react/recommended"
rules: eslint에서 사용하는 규칙을 수정할 수 있다.
Prettier
eslint는 코드를 분석하여 안쓰는 변수같은 것을 잡아주는 linter이고,
prettier는 코드를 formatting 해서 스타일해준다. prettier가 변수 문제를 잡아낼 수 없다는 것을 알아두면 이해가 될 것이다.
yarn add prettier -D
yarn add eslint-plugin-prettier //prettier가 찾는 format오류를 eslint의 오류로 출력해준다.
yarn add eslint-config-prettier //eslint의 format무시하고 prettier와의 충돌을 없앤다.
.eslintrc.json
{
"plugins": ["prettier"],
"extends": ["eslint:recommended", "plugin:prettier/recommended"],
"rules": {
"prettier/prettier": "error"
}
}
