프로젝트에 Prettier, ESlint 적용하기

Prettier, ESlint 꼭 써야돼?

사용해보지 않은 사람이 있다면 꼭 사용해보길 추천한다. 사실 나도 이러한 도구들이 프로그래밍에 있어 그렇게 중요한 요소는 아니라고 생각했기 때문에 여지껏 잘 사용하지 않았다. Prettier는 종종 사용하기도 하였지만, ESLint의 경우 한번 사용해본 후 설정에 귀찮음을 느껴 이후 다시는 사용하지 않았다.

 

하지만 지난 프로젝트를 다른 개발자 분과 협업하며 사용해보고 그 중요성과 이점을 똑똑히 알게 되었다. 이들을 사용함으로써 얻는 효과는 단순히 예뻐보이는 것, 편리한 것이 전부가 아니다. 개발자들은 정해진 규칙에 따라 일관된 방식으로 코드를 작성하도록 강제되기 때문에 서로 간의 코드를 더 쉽게 알아볼 수 있게 된다. 향상된 가독성은 유지보수는 물론 디버깅에도 큰 도움을 준다.

 

---

Prettier

설치하기

콘솔에 다음과 같이 입력하여 prettier를 다운 받아보자. prettier는 개발 모드에서만 사용하기 되니 -D 옵션을 꼭 넣어주도록 한다.

$ npm i -D -E prettier

-E 옵션은 package.json 파일의 dependencies에 틸드(~), 캐럿(^)과 같은 semver을 사용하는 대신, 정확한 버전 정보를 작성하는 옵션이다

설치가 완료되면, prettier를 적용하고자 하는 프로젝트의 폴더에 .prettierrc 파일을 생성한다. 확장자 명을 json 또는 js로 부여해도 되지만 나는 개인적으로 확장자 없는 파일을 선호한다.

CLI로 사용해보기

이제 커맨드 명령어로 prettier를 사용해보자. npx prettier --write를 입력하면 프로젝트 내의 모든 파일이 포맷팅 된다. 특정 파일 혹은 특정 디렉터리 내에 존재하는 파일만 포맷팅 하길 원한다면 npx prettier --write index.js, npx prettier --write src/와 같이 뒤에 경로를 적어주면 된다.

Editor extension 사용하기

Editor의 extension을 사용하면 일일히 명령을 입력하지 않고, 파일 저장시에 자동으로 포맷팅 되도록 할 수 있다. VSCode의 경우 Prettier-Code formatter라는 이름의 extension을 먼저 다운받는다. 그리고 settings로 이동하여 Format On Save를 체크해주기만 하면 된다. 또는 settings.json 파일에서 "editor.formatOnSave":true를 직접 입력해주는 방법도 있다.

설정 바꾸기

prettier의 기본 설정대로 사용해도 좋지만 앞서 생성한 .prettierrc 파일에 조금의 코드만 더하면 prettier를 내 입맛에 맞게 설정할 수 있다. 설정의 모든 옵션을 설명하는 것은 불가능하니, 일반적으로 많이 사용하는 옵션만 소개하도록 하겠다.

• Tab Width: tab키의 공백을 몇칸으로 할지 설정하는 옵션이다. default가 2칸이고, 많은 개발자들이 2칸을 선호하기 때문에 굳이 바꾸진 않는 것을 추천한다.
• Semicolons: 코드의 끝에 자동으로 세미콜론(;)을 붙일지 여부에 대한 옵션이다. true로 설정하면 세미콜론이 붙는다. 개인적으로는 세미콜론이 있으면 코드마다의 구분감이 확실해 보여서 옵션을 켜는 것을 선호한다. default는 true이다.
• Quotes: 따옴표를 모두 작은 따옴표로 통일하는 옵션이다. 기본값은 false인데, 나는 주로 true로 설정한다. JSX 문법에서는 작동하지 않는다. JSX의 따옴표 옵션은 JSX Quotes를 통해 변경할 수 있다.
• Trailing Commas: 배열, 객체등을 여러 줄에 거쳐 작성하는 경우 마지막 라인 뒤에 콤마(,)를 자동으로 달아주는 옵션이다. 기본은 es5로 설정되어 있으며 none 혹은 all 옵션으로 바꿀 수 있다. all의 경우 함수의 매개변수 등에도 적용된다.

{
  "tabWidth": 2,
  "singleQuote": true,
  "semi": true,
  "printWidth": 100
}

내가 주로 사용하는 prettier 설정

ESlint

설치하기

eslint도 역시 -D 옵션을 넣어준다. 설치가 완료되면 --init 플래그를 주어 eslint를 실행한다. 그럼 eslint가 여러가지를 물어보는데(어떤 모듈방식을 사용할지, 타입스크립트를 사용하는지 등) 본인의 환경에 맞게 선택하면 그에 맞게 자동으로 .eslint.js 파일이 생성된다. 질문 중 'airbnb 스타일을 사용할 것이냐'에 대해 묻기도 하는데, 어떤 플러그인을 사용할지 모르겠다면 많은 사람들이 사용하는 airbnb 스타일을 사용해 보면 좋을 것 같다.

$ npm i -D eslint
$ npx eslint --init

CLI로 사용해보기

init 이 끝났으면 이제 아래와 같이 입력해보자. eslint의 설정에 위반되는 코드가 있다면 콘솔에 빨간글씨로 나타날 것이다.

$ npx eslint --fix

Editor Extension 사용하기

eslint도 prettier와 마찬가지로 editor의 extension을 함께 사용할 수 있다. ESLint extenstion을 다운받은 뒤 settings.json 파일에 다음과 같은 코드를 추가해보자. 이제 파일을 저장할 때마다 eslint가 자동으로 오류를 수정해줄 것이다.

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

prettier와 함께 사용하기

eslint에는 prettier와 겹치는 포맷팅 기능이 존재하기 때문에 별도의 설정 없이 prettier와 함께 적용하면 충돌이 발생한다. eslint에 prettier를 플러그인으로 등록해주면 충돌을 해결할 수 있다. eslint-plugin-prettier를 다운받고 plugins 속성에 prettier를 추가해주도록 하자.

$ npm install -D eslint-plugin-prettier

//.eslintrc.js
module.exports = {
  plugins: ['prettier'],
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['airbnb-base'],
  parserOptions: {
    ecmaVersion: 13,
    sourceType: 'module',
  },
  rules: {
    'no-unused-expressions': 'off', //바닐라 자바스크립트에서 삼항연산자나 ||, &&를 사용하려면 이 옵션을 꺼주어야 한다.
  },
};

 

---

마무리

혼자만의 프로젝트라면 prettier와 eslint의 설정은 이것으로도 충분할 것이다. 사실 나도 이 이상은 거의 해본적이 없다. 그러나 만약 다른 사람과 함께 진행되는 프로젝트라면 husky와 lint-staged를 추가할 것을 추천한다. husky와 lint-staged를 사용하면 ESlint를 더욱 우아하게, 자동화하여 사용할 수 있다.

 

또한 ESlint는 Typescript와 함께 사용하면 그 효과가 배가 된다. Javascript의 허술함으로 인해 런타임 과정에서 생길 수 있는 많은 오류들을 사전에 잡아낼 수 있게 된다. 계속해서 오류를 뿜어 대는 녀석이 처음엔 거슬릴 수도 있지만 나중엔 '이래서 좋다고 하는구나..!'라고 알게 될 것이다.

 

이들에 대한 내용은 이후 포스팅에서 자세히 다루도록 하겠다.

참고자료

• https://prettier.io/docs/en/index.html
• https://eslint.org/docs/user-guide/getting-started