[Javascript] Prettier과 ESLint로 코드 예쁘게 유지하기
What is Prettier?
협업을 하다보면 코딩 스타일이 각자 다르기때문에, 후에 유지보수 팀이 프로젝트를 열어보면 가독성과 유지보수의 문제가 있을 수 있다.
따라서, 코드 포맷을 정해서 한 방향으로 가는게 좋다.
이걸 도와주는 것이 바로 코드 포맷터(code formatter)인 Prettier다.
Prettier는 다양한 언어와 Editor를 지원하고, 간단하게 사용자 맞춤 포맷 설정이 가능하므로 현업에서 많이 사용한다.
Prettier · Opinionated Code Formatter
Opinionated Code Formatter
prettier.io
What is ESLint?
자바스크립트는 문법 오류가 나도 알려주지 않고, 실행을 해서 오류를 확인해야 오류가 났다는걸 알 수 있다.
코드를 작성할 때부터, 오류가 났다는 걸 알려주면 더 편하게 코딩을 할 수 있을거다.
이걸 도와주는 것이 바로 ECMAScript/JavaScript 코드에서 발견 된 문법 오류를 식별하고 보고하는 도구인 ESLint다.
ESLint - Pluggable JavaScript linter
Customize Preprocess code, use custom parsers, and write your own rules that work alongside ESLint's built-in rules. You can customize ESLint to work exactly the way you need it for your project.
eslint.org
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
Airbnb's base JS ESLint config, following our styleguide
www.npmjs.com
.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",
},
};