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

Archive

JS Day 17 Prettier, ESLint