ES Lint + Prettier 도입하기 🔥🔥🔥

원래 '지켜야 할 원칙들은 지키자' 라는 마인드로 코딩을 하고 있었기 때문에,

코딩 스타일이나 규칙들에 대해서는 꽤나 자신이 있는 편이다.

즉, 굳이 따로 툴을 사용하지 않더라도 깔끔한 코드를 작성하고 있었다고 생각한다는 것.

 

하지만 자바스크립트가 무슨 언어인가.

아무리 내가 완벽하다고 생각해도 예상치 못한 어느 한 곳에서

구멍이 발견될 수 있는 위험천만한 프로그래밍 언어아닌가.

그리고 언제 어디서 내가 안일하게 코딩할 지 또한 모르는 일이다.

그래서 만일을 대비해 정적 코드 분석 도구를 언젠가는 사용해봐야겠다고 생각을 하고 있었다.

생각만 하고 있었다.

 

정작 필요성을 느끼진 못해서 차일피일 미루고 있던 찰나,

마침 ES Lint + Prettier를 사용해 볼 만한 기회가 찾아와서

'이번 기회에 써보자!' 하고 써보게 되었는데

 

웬걸.

설정이 생각보다 간단한데, 생각보다 간단하지 않다.

방법을 적당히 익히고나면 그냥 슥삭슥삭 코파듯이 자연스럽게 세팅할 수 있을 것 같은데

아직은 익숙하지가 않으니, 사용법을 좀 블로그에 적어놓고 다시 참고할 수 있게 해야겠다는 생각이 들었다.

---

우선 간단한 설명.

Linter 는 소스 코드를 분석해서 문법 에러나 버그를 찾아 알려주는 도구이다.

그리고 이름에서도 알 수 있듯, ES Lint는 자바스크립트의 Linter이다.

 

Prettier 는 'Code Formatter'라고 한다.

개발자가 정해진 코딩 스타일을 따라 코드를 작성할 수 있도록 도와주는 도구이다.

사람마다 코드를 작성하는 습관이 천차만별이니만큼,

협업을 할 때 빛을 발하는 도구라고 할 수 있겠다.

---

나는 VS Code를 아주 사랑하기 때문에, ES Lint와 Prettier를 VS Code에서 사용한다고 가정하고

VS Code에 둘을 도입하는 것까지 다뤄보도록 하겠다.

 

우리가 해야하는 것은 두가지.

1. Node.js 모듈로써의 ES Lint와 Prettier 설치

2. VS Code 확장 프로그램으로써의 ES Lint와 Prettier 설치

 

핵심적인 역할을 하는 것은 1번이고, 이를 VS Code와 연동하기 위해 2번을 설치하는 것.

ES Lint 모듈 설치

npm install eslint --save-dev

Prettier 모듈 설치

npm install prettier --save-dev --save-exact

--save-exact 옵션은 ~나 ^ 등의 범위 지정 없이 정확한 해당 버전으로 설치를 하게끔 해준다.

버전이 바뀌면서 생기는 스타일 변화를 막기 위해 붙여주는 것.

 

--save-dev는 다들 알겠지만, ES Lint와 Prettier는 개발할 때만 사용되는 모듈이기 때문에

개발할 때만 함께하다가, 배포할 때가 되면 알아서 나가떨어지라는 의미로 붙여주는 옵션.

'dev dependency'를 의미한다.

---

필요 모듈 추가 설치

ES Lint와 Prettier만 설치한다고 해서 둘을 같이 사용할 수 있는 건 아니다.

ES Lint에도 Code Formatting 기능이 있기 때문에, 둘을 냅다 같이 사용해버리면

둘 사이에 충돌이 일어나기 때문이다.

 

이를 방지하기 위해 설치해주는 두 가지가 바로

1. eslint-config-prettier: ES Lint에서 Prettier와 충돌하는 설정들을 비활성화한다.

2. eslint-plugin-prettier: Code Formatting 기능을 아예 Prettier에게 맡긴다.

 

요렇게 두 가지를 설치해주면 안전하게 둘을 함께 사용할 수 있게 된다.

npm install eslint-config-prettier eslint-plugin-prettier --save-dev

---

.eslintrc 파일 세팅

프로젝트의 최상위 디렉토리에 .eslintrc 파일을 만들고 다음과 같이 코드를 작성해준다.

{
  "plugins": ["prettier"],
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": "error"
  }
}

첫째 줄은 말 그대로 Prettier를 plugin으로 사용하겠다는 뜻.

두 번째 줄의 "eslint:recommended"는 eslint의 코드 문법 분석 스타일을

eslint에서 추천하는 방식으로 사용하겠다는 뜻.

ES Lint 문서에 보면 체크표시 되어있는 애들에 해당하는 규칙들을 사용한다고 보면 됨.

 

"plugin:prettier/recommended"는 eslint-config-prettier와 eslint-plugin-prettier를

통합하기 위해 필요한 설정이라고 한다.

 

"rules"에는 따로 적용하고 싶은 규칙들을 적어주면 되는 듯하다.

"prettier/prettier": "error"는 Prettier에 설정해 준 내용들에 어긋날 경우 에러를 발생시킨다는 의미.

인 듯 하다.

 

검색 결과 90%정도 맞는 것 같지만 주관적 해석이 들어가있을 수 있으므로 주의할 것.

---

나는 검색을 통해 몇 가지 옵션을 더 사용하고 있다.

{
  "plugins": ["prettier"],
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": ["error", {
      "endOfLine": "auto"
    }]
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 8
  }
}

"endOfLine": "auto"를 사용하지 않으면, 윈도우에서는 각 줄의 끝에 'crlf'가 적용된다.

근데 리눅스나 맥에서는 'lf'로 적용이 되기 때문에 윈도우에서는 저 옵션을 붙여주지 않으면

줄바꿈을 할 때마다 맨날 끝에 빨간줄이 뜨면서 'cr을 삭제하세요' 라는 에러가 발생한다.

그걸 없애주기 위한 옵션.

 

"parserOptions"의 "sourceType": "module"은 import/export를 사용하겠다는 뜻.

"ecmaVersion": 8은 ES8를 사용하겠다는 뜻.

 

근데 이렇게 하는 게 맞는 건진 나도 잘 모른다.

나도 검색해가면서 끙끙대며 설정하는 중이라서.

맞겠지.

---

.prettierrc 파일 세팅

역시나 .eslintrc와 동일한 위치에 .prettierrc 파일을 만들고 규칙들을 작성해주면 된다.

다행히도, .eslintrc보다 훨씬 알아듣기 편한 간단한 구조를 가지고 있다.

Prettier 옵션 문서 에서 원하는 규칙들을 쏙쏙 골라잡아 세팅을 해주면 된다.

{
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

대충 요런식으로. 규칙들 몇 가지만 설명해보면

"tabWidth"는 인덴트를 몇 번의 스페이스바만큼 설정할 것인지를 의미한다.

"useTabs"는 인덴트할 때 탭을 사용하는 것을 허용할 것인지 말 것인지.

보통의 코딩 스타일들에서는 스페이스바와 탭 키를 혼용하는 것을 금지하고 있다.

그래서 보통 false로 세팅해주는 듯.

---

VS Code 확장 프로그램 설치하기

ES Lint 확장 프로그램

Prettier 확장 프로그램

요 둘을 설치하면, VS Code에서 파일을 저장할 때마다 정해진 규칙대로 자동으로 코드가 고쳐지게 된다.

근데, 설치하고나서 바로 되는 건 아니고 약간의 설정이 필요하다.

 

우선, VS Code의 Settings 페이지의 상단에 보면 "User"와 "Workspace" 탭이 있을텐데

User는 해당 user로 진행하는 모든 프로젝트에 옵션을 적용한다는 뜻이고,

Workspace는 해당 프로젝트에만 옵션을 적용한다는 뜻이라고 보면 된다.

해당 프로젝트에만 적용되도록 설정된 옵션은

현재 디렉토리의 .vscode/settings.json에 저장된다고 한다.

 

 

그리고는 VS Code Settings 페이지의 우측 상단에 보면 요런 아이콘이 있는데,

그걸 클릭하면 settings.json 파일을 직접 편집하는 페이지로 넘어가게 된다.

다음과 같이 코드를 작성해준다.

{
  "editor.formatOnSave": false,
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

무슨 뜻인지는 나도 잘 모르겠다.

그냥저냥 ES Lint와 Prettier를 VS Code에다 세팅한다는 내용인 듯.

해석해보자면 위에는 editor.formatOnSave, 즉 저장 시 코드 포맷팅 기능을

자바스크립트 언어일 경우에만 사용한다는 뜻이 아닐까.

 

editor.codeActionsOnSave 뭐시기 저시기는

ES Lint의 규칙에 맞게 저장 시 코드를 분석하고 고쳐주도록 만들어준다는 뜻인듯.

 

둘이 합쳐서, 그냥 파일 저장할 때 코드 고쳐준다는 뜻.

 

+ 위의 세팅이 먹히지 않을 경우

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

---

나도 오늘 갓 사용하기 시작한 상태이기 때문에

스타일 설정에 관해 자세한 팁을 남겨놓을 수가 없다.

 

요기(ESLint 규칙 문서)랑 요기(Prettier 규칙 문서) 들어가보고

직접 인터넷 찾아보면서 세팅하는 수밖에 없을 듯.

나도 참고하려고 포스팅하는거라..ㅎ

 

나중에 익숙해졌을 때 혹시 이 포스팅을 기억한다면

그 때 상세 내용을 적어놓도록 할게요.

미안합니다..ㅎ

 

찝찝한 마무리..

---

추가로, 혹시나 어떤 규칙을 사용해야할 지 모르겠으면

구글 스타일 가이드나 에어비앤비 스타일 가이드 등 

대기업들이 정해놓은 코딩 컨벤션을 따르는 것도 아주 좋은 방법이다.

에어비앤비 스타일 가이드 적용 방법은 아래의 블로그를 참고할 것.

ESLint & Prettier, Airbnb Style Guide로 설정하기

---

참고

VS Code에서 ESlint와 Prettier 함께 사용하기

ESLint(TSLint)와 Prettier 함께 사용하기(w/ VSCode) · ID PRAVUS

[JS] ESLint 적용하기