JS Day 17 Prettier, ESLint
Prettier
세미콜론, 탭 사이즈, 콤마 등 코드를 깔끔하게 해주는 유용한 툴이다.
VSCode에서 prettier 설치 후 사용.
프로젝트의 root path에 .prettierrc 파일 생성 후 사용하고자하는 옵션을 적는다.
{
"trailingComma": "all",
"tabWidth": 2,
"semi": true,
"singleQuote": true
}
옵션 사양은 공식문서를 참고하자
VSCode의 기본 설정에서 format on save를 찾아 파일 저장 시의 서식을 지정할 수 있다.
체크 시 저장할 때마다 prettier가 적용되는 것을 볼 수 있다.
ESLint
prettier가 기본적인 코드 컨벤션을 커버했다면 ESLint는 자바스크립트의 문법을 검사할 수 있는 툴이다.
변수 선언 후 사용하지 않았을 때, 함수의 매개변수 개수 제한, Camel Case 강제 적용 등 세세하게 적용할 수 있는 룰이 엄청 많다.
VSCode Extension에서 ESLint 설치 후 사용.
Create-React-App에는 기본적으로 ESLint가 탑재되어 있다.
파일 저장 시 auto fix 기능을 켜고 싶다면 기본 설정에서 Eslint 검색 후 auto fix 박스를 체크하거나,
auto fix 항목이 없다면 커맨드 입력창을 열고 setting json 검색 후 Default Settings에서 바꾼다.
"editor.codeActionOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": true,
eslint rule을 직접 커스터마이징해서 사용할 수도 있고 google, airbab 등에서 만들어서 배포한 패키지를 설치하여 적용시킬 수도 있다.
ex) eslint-config-airbnb 패키지 설치 후 package.json에서 "eslintConfig": { "extends": "airbnb" } 추가
CRA같은 경우에는 이미 “react-app”이라는 rule이 적용되어 있으므로 동시 적용을 원한다면 배열 형태로 넣어주면 된다.
ex) "eslintConfig": { "extends": ["react-app", "airbnb" ] }
config 라이브러리 사용 시 주의할 점은 prettier로 관리할 수 있는 rule은 eslint에서 제외시키는 것이다.
안그러면 eslint 설정을 바꿔야할게 엄청 많아진다.
이를 위해서 eslint-config-prettier 패키지 설치 후 extends 뒤에 prettier를 추가하면 된다.
rules 커스터마이징은 package.json에서 eslingConfig 항목에 rules를 추가하여 이 곳에 옵션을 넣어주면 된다.
"eslintConfig": {
"extends": [
"react-app",
"airbnb",
"prettier"
],
"rules": {
"no-unused-vars": 1,
"no-console": 0
}
}
옵션의 가지수는 상당하므로 자세한 것은 공식문서를 참고하자.
특정 파일에 대하여 eslint 적용을 해제하려면 해당 파일의 최상단에 /* eslint-disable */ 주석을 삽입하면 된다.
참고 자료
Prettier DOC
Kakao Tech - ESLint
ESLint DOC
