[Javascript] Prettier과 ESLint로 코드 예쁘게 유지하기

---

What is Prettier?

협업을 하다보면 코딩 스타일이 각자 다르기때문에, 후에 유지보수 팀이 프로젝트를 열어보면 가독성과 유지보수의 문제가 있을 수 있다.

따라서, 코드 포맷을 정해서 한 방향으로 가는게 좋다.

 

이걸 도와주는 것이 바로 코드 포맷터(code formatter)인 Prettier다.

Prettier는 다양한 언어와 Editor를 지원하고, 간단하게 사용자 맞춤 포맷 설정이 가능하므로 현업에서 많이 사용한다.

Prettier · Opinionated Code Formatter

What is ESLint?

자바스크립트는 문법 오류가 나도 알려주지 않고, 실행을 해서 오류를 확인해야 오류가 났다는걸 알 수 있다.

코드를 작성할 때부터, 오류가 났다는 걸 알려주면 더 편하게 코딩을 할 수 있을거다.

 

이걸 도와주는 것이 바로 ECMAScript/JavaScript 코드에서 발견 된 문법 오류를 식별하고 보고하는 도구인 ESLint다.

ESLint - Pluggable JavaScript linter

 

Prettier와 ESLint 적용하기

먼저, 아래와 같은 Javascript 파일을 생성한다.

function sample1() {
  console.log(hi);
}

function sample2() 
{
    console.log(bye);
}

sample1();
sample2();

자바스크립트 구문을 보면, 두 함수의 코드 포맷이 다르고, 파일을 실행시키면 'ReferenceError: hi is not defined' 라는 에러가 발생한다.

글로벌로 선언된 변수 hi와 변수 bye가 존재하지 않지만, 에디터에서 오류가 발생했다는 어떠한 알림도 주지않고 실행을 해야만 오류를 확인할 수 있다.

 

이제, ESLint를 설치해서 문법 오류를 확인하고 Prettier을 설치해서 코드 포맷을 설정해보자.

 

필요한 vscode 확장을 설치한다.

 

Prettier 설정을 해보자.

.prettierrc 라는 파일을 생성하고, 포맷팅 설정을 한다.

{
    "singleQuote": false,    
    "semi": true,            
    "useTabs": false,       
    "tabWidth": 2,           
    "trailingComma": "all",  
    "printWidth": 100        
}

 

ESLint 설정을 해보자.

아래 구문을 입력하여, eslint을 설치한다.

npm install eslint --save-dev

 

그런 다음, 구성 파일을 설정해야한다.

사람들이 많이 쓰는 설정을 적용할 수 있는데, 필자는 에어비앤비 설정을 사용하겠다.

아래 구문을 입력하여, 필요한 패키지들을 설치한다.

npx install-peerdeps --dev eslint-config-airbnb-base 

eslint-config-airbnb-base

 

.eslintrc.js 파일을 생성한다.

module.exports = {
  extends: 'airbnb-base',
};

 

생성한 자바스크립트 파일로 돌아가서 다시 save를 하면 코드가 정리되고, 빨간 줄이 뜬다.

설치한 Prettier 확장 덕분에 파일이 save될 때 마다 코드가 정리되고, ESLint 덕분에 문법 오류 경고가 뜨는 것이다.

* 파일을 save 할 때 마다 포맷팅이 되지 않는다면 vscode 설정으로 들어가서, 아래 설정에 체크해주면 된다.

 

🚨 ESLint는 문법 오류뿐만 아니라, 포맷팅도 지원하기 때문에 Prettier을 함께 쓸 땐 ESLint에게 포맷팅은 사용 안한다고 알려줘야한다.

아래 구문을 입력해서 패키지를 설치한다.

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

.eslintrc.js 파일에 extends를 추가한다.

module.exports = {
  extends: ["airbnb-base", "plugin:prettier/recommended"],
};

 

🚨 console.log 오류를 없애고 싶다면 .eslintrc.js 파일에 rule을 추가한다.

module.exports = {
  extends: ["airbnb-base", "plugin:prettier/recommended"],
  rules: {
    "no-console": "off",
  },
};

 

---

🎉  피드백은 언제나 환영입니다. 🎉

---