[ESLint/Prettier] 프로젝트에 EsLint와 Prettier 적용하기

EsLint

• 코드를 정적분석해서 JS를 실행시키지 않더라도, 안티패턴들(호이스팅 , Closer 등등)을 미리 감지하여 문법적인 "오류"를 수정하는 Linter입니다. 추가적으로 Formatting 기능을 제공합니다.

Prettier

• 프리티어는 코드 컨벤션을 위한 Formatter입니다. 사람들의 코딩하는 스타일이 다 다르기 때문에, 코드의 가독성과 코드간의 통일성을 위해서 적용합니다. 

* 코드 컨벤션이란 프로그래머들이 코드를 작성할 때, "~~게 작성하자"라고 약속하는겁니다.

 

ESLint & Prettier 설치하기

// ESLint 
npm i -D eslint
// Prettier
npm install --save-dev --save-exact prettier

• Prettier은 Formatter이기 때문에, 버전이 업데이트하면 Formatting이 달라질 수 있습니다.  따라서, exact를 적용하여 다운받는게 권장됩니다.

Eslint와 Prettier 충돌 피하기

• EsLint와 Prettier는 둘 다 코드 퀄리티를 높이는데, 사용하는 툴이고 공통적인 부분이 있습니다. 따라서, 이 둘 사이의 충돌을 막기위한 작업이 필요하게 됩니다.

npm i -D eslint-config-prettier eslint-plugin-prettier

Eslint 설정파일 생성

npx eslint --init

• eslint의 설정파일을 생성하게 됩니다. 진행하면 몇가지 질문들이 나오게 되는데, 각자의 용도에 맞게 선택하여 진행하면 됩니다.
• 진행하면, `.eslintrc.js 또는 .eslintrc.json`이라는 파일이 생성될겁니다.
• extends의 "eslint" 옵션에 자신이 원하는 linter( Airbnb eslint, google eslint등)를 넣고 , 연결할 플러그인을 설정합니다.
• plugin은 아까 설치한 eslint-plugin-prettier을 연결해줍니다. recommended를 설정해주겠습니다.

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": ["eslint:recommended","plugin:prettier/recommend"],
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "rules": {
    }
}

Eslint ignore 파일생성

• 모든 파일에 eslint를 적용하게 되면, node_module , 번들링된 파일, webpack설정파일 등은 아주 많은 오류를 뱉어낼 수 있습니다. 따라서, ignore 파일을 기본적으로 위의 3개는 적용시켜줘야합니다.

.eslintignore을 생성한뒤 , 아래와 같이 작성해줍니다.

/node_mondules
/dist
webpack.config.js

Prettier 설정파일 생성

• prettierrc.json파일을 생성합니다.
• prettier 홈페이지에 가서, playground의 설정을 클릭해보면서, 원하는 설정을 한다음, json으로 copy해줍니다.

Prettier ignore 생성

• eslint와 마찬가지로, 모든 파일에 prettier을 설정하면, 오류가 굉장히 많이 뜰 수 있습니다.
• eslintignore과 똑같이 작성해줍니다.

Editor에서 자동으로 eslint와 prettier 적용 설정하기(VScode 기준)

• Vscode의 command palette에 Open workspace setting(JSON)을 클릭한다음, Json 파일을 설정해줍니다.

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