썸네일 출처 : https://blog.logrocket.com/using-prettier-eslint-automate-formatting-fixing-javascript/
eslint와 prettier는 vscode extension으로 지원하기 때문에 다운로드했다면 린팅/포맷팅을 특별히 신경 쓸 것 없이 너무나 당연하게 사용했을 것입니다.
다만 extension을 통해 사용 중인 린터와 포맷터는 오직 내 컴퓨터를 위해 작동합니다.
즉, 다른 컴퓨터의 vscode에서 현재 내가 작업 중인 프로젝트를 열면 그 컴퓨터의 vscode에 맞는 린팅/포맷팅이 적용될 수 있는 것이죠.
그렇기 때문에 어느 컴퓨터에서나 동일한 린팅/포맷팅이 적용되기 위해서는 프로젝트에 직접 린팅/포맷팅 rule을 설정해줘야 하는데요.
잠깐 시간 생긴 김에 extension 없이 eslint와 prettier 사용하는 방법에 대해 정리해 보겠습니다!
들어가기 전에
우선 React App을 생성하고 prettier와 eslint를 설치해 주세요.
두 패키지는 개발할 때만 필요하기 때문에 devDependency로 설치될 수 있게 —save-dev 옵션을 넣어줍니다.
yarn add --dev eslint prettier eslint-config-prettier이때, 함께 설치한 eslint-config-prettier는 eslint가 제공하는 formatting 기능처럼 eslint와 prettier 간 충돌이 발생할 수 있는 rule을 해제해 주는 패키지입니다.
즉, eslint는 문법 교정만 prettier는 코드 포맷팅만 담당하게 하는 것이죠.
prettier로 코드 포맷팅하기
prettier 규칙 설정
prettier 규칙은 프로젝트 최상단 폴더 위치에 .prettierrc.json 파일을 생성하여 설정할 수 있습니다.
다음과 같이 기본적인 규칙들만 몇 개 적어봤습니다.
// .prettierrc.json (파일 형식은 yaml, js, toml도 가능합니다.)
{
"printWidth": 100, // 줄바꿈을 하기 위한 글자 수
"semi": true, // 세미콜론 여부
"arrowParens": "always", // 화살표 함수에서 파라미터가 한 개인 경우 괄호 생략 여부
"singleQuote": true, // 작은 따옴표 사용 여부
"trailingComma": "es5" // 트레일링 콤마 사용 여부
}prettier 실행하기
위 규칙대로 포맷팅하기 위해 다음 명령어를 입력합니다.
npx prettier --write --cache {경로}이때 함께 입력한 옵션 —write는 포맷팅한 내용으로 파일을 저장하도록 하는 옵션이고, —cache는 포맷팅한 내용을 캐싱하여 변경사항이 없을 때에는 포맷팅을 하지 않도록 하는 옵션입니다.
- 캐싱된 내용이 없는 상태에서 포맷팅
- 캐싱된 내용이 있는 상태에서 포맷팅 (시간을 줄일 수 있습니다!)
이 포맷팅을 좀 더 간편하게 할 수 있게 명령 단축키를 설정해 보겠습니다.
(물론 vscode 설정에서 formatOnSave 켜면 최고 간단입니다!!!!!!!!!!!!!!!!)
package.json의 scripts 부분에 format이라는 단축키를 통해 포맷팅을 할 수 있도록 다음과 같이 작성합니다.
// package.json
{
...
"scripts": {
"format": "prettier --write --cache",
...
}
}그럼 다음과 같이 yarn run format을 입력하여 포맷팅을 할 수 있습니다.
eslint로 문법 교정하기
eslint 규칙 설정
eslint 설정은 무수히 많습니다.. 혼자서 일일이 쳐야 한다면 lint를 안쓸 것입니다.
그렇기 때문에 주로 이미 정의되어 있는 config를 상속받아 사용하게 됩니다.
prettier와 마찬가지로, 프로젝트 최상단 폴더 위치에 .eslintrc 파일을 만들고 다음 설정을 입력합니다.
// .eslintrc
{
"extends": ["eslint:recommended", "prettier"],
"env": { "browser": true, "node": true, "es6": true },
"parser": "@typescript-eslint/parser",
"parserOptions": {
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest"
},
"rules": {
"no-var": "error", // var 금지
"no-console": ["error", { "allow": ["warn", "error", "info"] }], // console.log() 금지
"eqeqeq": "error", // 일치 연산자 사용 필수
"no-unused-vars": "error" // 사용하지 않는 변수 금지
}
}위 설정 중 extends에 해당하는 부분이 바로 이미 정의되어 있는 config를 가져오는 부분인데요,
원하는 설정들을 설치한 후 이 부분에 넣어주시면 됩니다.
extends에 불러온 설정 이외의 다른 규칙을 적용하고 싶다면 rules에 추가할 수 있습니다.
rules는 공식 문서를 살펴보면 무수히 많이 있으니 필요한 규칙들을 가져와서 추가 작성해 주시면 됩니다.
또한, eslint는 순수 바닐라 자바스크립트 코드만 이해할 수 있기 때문에 최신 문법이나 typescript 등으로 작성한 코드를 교정하기 위해서는 parser 옵션을 넣어줘야 합니다.
eslint 실행하기
위 규칙대로 교정하기 위해 다음 명령어를 입력합니다.
npx eslint --fix --cache {경로}여기서 사용된 옵션 —fix는 교정한 대로 파일 저장까지 해주는 옵션이고, —cache는 교정한 내용을 캐싱하여 변경사항이 없을 때에는 교정하지 않도록 하는 옵션입니다.
(그런데 저는 --fix 옵션은 추가하지 않는 편입니다..ㅎ 보고 고치는게 맘이 편해요)
이때 —cache 옵션을 통해 캐싱된 내용은 .eslintcache라는 파일이 생성된 다음 그 안에 저장됩니다.
prettier에서도 동일한 옵션을 사용했었는데, prettier에서 캐싱된 내용은 어디에 저장될까요?
바로 node_modules 안에 저장됩니다.
eslint는 prettier와 달리 캐싱된 파일이 바깥으로 꺼내지게 되므로 이 파일은 반드시 .gitignore로 관리해야 협업 시에 충돌을 막을 수 있습니다.
prettier와 마찬가지로 eslint도 명령어 단축키를 설정해 봅시다.
// package.json
{
...
"scripts": {
"format": "prettier --write --cache",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
...
}
}vite로 react app을 설치했더니 자동으로 린팅 단축키가 있었는데요, 옵션만 간단하게 보고 넘어가겠습니다.
—ext는 린팅할 파일의 확장자를 늘려주는 옵션입니다. typescript를 사용해서 js 뿐만 아니라 ts, tsx 확장자도 린팅할 수 있도록 들어간 옵션이네요.
—report-unused-disable-directives는 사용하지 않는 규칙에 대해 리포트를 남기는 옵션이라고 합니다. (잘은 모르겠는데 에러 로그 남기는 용 아닐까요..ㅎㅎ)
—max-warnings 0은 nonzero exit code를 유발하는 경고의 최대 수를 설정하는 옵션입니다. 즉, 여기서 지정한 수보다 많은 warning이 뜬다면 실패로 종료한다는 뜻입니다.
이렇게 eslint, prettier 설정을 했는데, 자동 포맷팅 설정이 꺼져 있거나 까먹고 실행하지 않거나 하면 마음이 아프겠죠!
그래서 다음에는 husky를 사용해 eslint와 prettier를 git hook으로 사용하는 방법에 대해 작성해 보겠습니다!
