1. eslint와 prettier란?
1) eslint
- 자바스크립트와 타입스크립트의 코딩 스타일 도구이다. 미리 정해둔 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동으로 검출해준다.
2) prettier
- 코드의 스타일만 정리해준다. 미리 규칙을 정하면 자동으로 규칙에 맞게 코드를 정리해주는 도구이다. 미리 정해둔 규칙에 따라 정렬해주기 때문에 가독성을 높혀주고 코드의 스타일을 통일시켜준다.
2. install
1) eslint
- CRA의 경우 내장되어 있기 때문에 따로 설치하지 않아도 된다.
npm install -D eslint- eslint에서 타입스크립트를 활용하기 위한 플러그인을 설치
npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parsernpm install -dev @typescript-eslint/eslint-plugin 설치 시 unable to resolve dependency tree 에러
- CRA로 자동 설치된 eslintConfig 버전은 7.0.1인데 설치하려는 버전은 5.0.1
- 해결하려면 --force 또는 --legacy-peer-deps 옵션을 추가해야 함
- --force : 충돌 우회
- -- legacy-peer-deps : 충돌 무시
"eslintConfig": { "extends": [ "react-app", "react-app/jest" ] },
참고
2) prettier
npm install -D prettier3) eslint-config-prettier
-
eslint는 linting 기능을, prettier는 formatting을 담당하는 구조가 이상적이다. 하지만 eslint에는 일부 formatting 관련된 rule도 포함되어 있다.
-
이 rule들이 prettier와 다른 설정을 가지고 있다면 설정 충돌이 발생할 수 있으므로 eslint에서 formatting 관련 rule들을 모두 해제해야 할 필요가 있다. 이를 수동으로 진행할 수도 있지만 이를 적용해 주는 eslint plugin인
eslint-config-prettier가 존재하는데 불필요하거나 prettier와 충돌할 수 있는 모든 규칙을 비활성화해준다.
npm install -D eslint-config-prettier3. setting
1) eslint 설정
-
eslint에서 기본적으로 제공되지 않는 특정 환경을 위한 rule들을 추가하고 싶을 경우에는 plugin을 이용할 수 있다.
-
확장자 없이 설정하면 주석을 달 수 있다.
{
"env": {
"es6": true
},
"extends": ["react-app", "eslint:recommended", "prettier"],
"rules": {
"no-var": "error", // var 금지
"no-multiple-empty-lines": "error", // 여러 줄 공백 금지
"no-console": ["warn", { "allow": ["warn", "error", "info"] }], // console.log() 경고
"eqeqeq": "error", // 일치 연산자 사용 필수
"dot-notation": "error", // 가능하다면 dot notation 사용
"no-unused-vars": "warn" // 사용하지 않는 변수가 있을 시 경고
}
}- package.json의 scripts에
lint: eslint --cache .와 같이 설정해주면npm run lint커맨드로 terminal에서 eslint를 실행시킬 수 있다. 그러나 cache된 파일이 저장된 장소인 eslintcache 파일이 생성되게 되는데 이 파일을 ignore 처리해주어야 다른 사람들과 conflict를 방지할 수 있다.
2) prettier 설정
-
prettier는 프로젝트의 루트 디렉토리에
.prettierrc.확장자파일을 통해서 설정을 할 수 있다. -
설정파일의 확장자 형식은 다양하게 지원하고 있다. (JSON, YAML, JS, TOML)
// .js로 생성하는 이유 = 주석의 용이성을 위함
module.exports = {
// 문자열은 작은 따옴표로 통일 (jsx는 이 설정을 무시함)
singleQuote: true,
// jsx에서 문자열은 작은 따옴표로 통일
jsxSingleQuote: true,
// 코드 마지막에 세미콜론 자동 완성
semi: true,
// 한 줄 최대 문자 수
printWidth: 100,
// 탭 사용을 금지하고 스페이스바 사용을 대체
useTabs: false,
// 들여쓰기 시 탭 너비
tabWidth: 2,
// 객체나 배열 키 : 값 뒤에 콤마 생성
trailingComma: 'all',
// 화살표 함수가 하나의 매개변수를 받을 때 괄호 생략
arrowParens: 'always',
// JSX의 닫는 괄호를 줄바꿈 하지 않을 것인지 여부
jsxBraketSameLine: 'false',
}- package.json의 scripts에
format: prettier --write --cache .와 같이 설정해주면npm run format커맨드로 terminal에서 prettier를 실행시킬 수 있다.
참고
