VSCode에서 ESLint & Prettier 설정하기

 

프로젝트를 시작할 때 가장 기본!

(포맷까지 했지만) 널뛰기 하는 것 같아서 차마 적지 못하고 따로 뺀 프론트엔드 개발환경 설정 2편!

오늘은 VS Code에서 ESLint와 Prettier를 설정해보자.

 

항상 Reference는 마지막에 표시하는데 다들 읽어보면 좋을 것 같아서 이번에는 최상단에 표시한다.

나는 이 블로그의 글을 직접 적용해보며 작성한 것이라 정확한 내용은 아래 블로그를 참고하는 것이 좋다.

 

ESLint, Prettier Setting, 헤매지 말고 정확히 알고 설정하자.

 

---

먼저, ESLint와 Prettier

 

ESLint는 코드의 퀄리티를 보장하도록 도와주고, Prettier는 코드 스타일을 깔끔하게 유지시켜주는 툴이다.

무슨 차이가 있겠냐 싶겠지만, Prettier는 오롯이 코드 포맷팅에 대한 역할만 수행한다.

공백이 여러 줄 들어가있거나, 들여쓰기는 띄어쓰기 4개로 작성해야한다거나 등등 코드의 형태를 다듬는데 집중하는 툴이다.

반면, ESLint는 함수를 선언할 때, function와 화살표 함수 중 어떤 것을 허용할지,

for문 금지하고 reduce나 map 같은 고차함수의 사용을 강제할지와 같은 코드 작성 규칙을 정하도록 도와준다.

때문에 이 둘을 같이 사용하는 경우가 많다.

 

---

이제, ESLint 적용해보기

 

설치

VS Code에서 ESLint를 적용해보자.

ESLint를 적용하기 위해서는 2가지를 설치해야한다.

 

 

먼저, VS Code에서 ESLint 플러그인을 설치해야한다.

플러그인에서 ESLint를 검색해서 설치해주자.

플러그인의 설명을 읽어보면 아래와 같이 나와있다.

 

확장 프로그램은 열린 작업 공간 폴더에 설치된 ESLint 라이브러리를 사용합니다. 폴더에 라이브러리가 없는 경우 확장 프로그램은 글로벌 설치 버전을 찾습니다. 로컬 또는 전역으로 ESLint를 설치하지 않은 경우 로컬 설치의 경우 워크스페이스 폴더에서 npm install eslint를, 전역 설치의 경우 npm install -g eslint를 실행하여 설치합니다. 새 폴더에서는 .eslintrc 구성 파일을 만들어야 할 수도 있습니다. 이 작업은 VS 코드 명령 Create ESLint configuration을 사용하거나 터미널에서 npx eslint --init으로 eslint 명령을 실행하여 수행할 수 있습니다.

 

즉, 이 플러그인만 설치한다고 되는게 아니라 ESLint 라이브러리를 프로젝트에 별도로 다운받아야한다 사용할 수 있다.

ESLint를 사용하고 싶은 프로젝트 폴더에 아래 명령어를 입력하여 ESLint를 설치해주자.

 

npm install -D eslint

# yarn 사용시
yarn add -D eslint

 

이제 ESLint를 사용하기 위해 설정 파일을 만들어야한다.

기존에 사용하던 파일이 있다면 그걸 쓰면 되지만, 없다면 설명에 나와있는 것처럼 아래 명령어를 실행해서 만들 수 있다.

 

npm init @eslint/config

 

이 명령어를 실행하면 아래와 같이 코드 스타일에 대한 몇 가지 질문을 통해 설정파일을 만들어준다.

물론 직접 커스텀하지 말고, 자주 사용하는 스타일을 가져와서 사용할 수도 있다.

 

 

위와 같은 설정이 끝나면 아래와 같은 설정 파일이 만들어진다.

(나의 경우는 JSON 형식으로 해서 .json 파일로 만들어졌다.)

 

// 만들어진 .eslintrc.json

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "indent": [
            "error",
            "tab"
        ],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

 

설정 항목은 다음과 같다.

 

- root

{
	"root": true
}

 

eslint는 기본적으로 모든 상위 폴더를 탐색하며 최상위의 .eslintrc 파일을 찾아 적용한다.

모노레포 같은 아키텍쳐의 경우 이런 설정이 좋지 않을 수 있는데

이렇게 이 폴더별로 다른 설정을 설정하고 싶다면 root : true를 작성하여 이를 방지할 수 있다.

이 설정이 적용된 .eslintrc 파일을 만나면 eslint는 더 이상 상위로 올라가지 않고 이 설정을 적용한다.

 

- env

자바스크립트는 다양한 환경에서 실행될 수 있는데, 각 환경마다 전역 변수를 통해 접근 가능한 객체들이 다르다.

lint에서는 기본적으로 선언하지 않은 객체들에 접근할 경우 에러를 내게되는데

이 때문에 돌아가는 환경의 전역 변수들을 알려주어 이에 대한 오류를 내지 않게 만들어주어야한다.

 

- plugins

eslint에서 기본적으로 제공하는 규칙 이외에 추가적인 플러그인을 설정할 수 있는 부분이다.

eslint-config-airbnb와 같은 플러그인을 적용하고 싶다면 설치 후에 이곳에 작성해주면 적용할 수 있는 상태가 된다.

실제로 적용하기 위해서는 extends나 rule를 통해 설정해주어야한다.

 

- extends

eslint 설정이 저장되어있는 외부 파일을 extends하는 부분이다.

하나만 작성할 경우에는 string으로 2개 이상 작성할 경우에는 배열로 작성해주면 되며,

커스텀하고 싶은 rule이 있을 경우 rule에 따로 명시해주면 된다.

 

- rules

eslint의 설정을 세세하게 커스텀하고 싶을 때 사용하는 속성으로 추가하고 싶은 설정이 있다면 이 곳에 추가해주면 된다.

extends를 통해 가져온 설정들을 수정하고 싶을 경우에도 사용된다.

rule에서 설정할 수 있는 것 중에 하나는 rule을 끌지(off), 경고할지(warn), 에러를 출력할지(error)를 선택할 수 있다.

 

- parser, parserOptions

코드 파일을 검사하는 파서를 설정하는 부분이다.

ESLint는 순수한 자바스크립트만을 이해할 수 있기 때문에

TypeScript나 JSX 처럼 다른 문법체계를 사용하는 언어에 린트를 적용하고 싶다면 이 옵션에 언어에 해당하는 파서를 추가해야한다.

 

 

테스트

이제 실제로 ESLint가 정상적으로 동작하는지 알아보기 위해서 간단한 테스트를 하나 해보자.

현재 내 eslint 설정에는 아래와 같은 설정이 들어가있다.

 

"rules": {
    "quotes": [
        "error",
        "double"
    ],
    "semi": [
        "error",
        "always"
    ]
}

위 설정은 따옴표 사용 시 쌍따옴표(")만 허용하며, 동시에 세미콜론(;)을 항상 넣어야한다는 설정이다.

이 설정을 일부로 어겨보자.

 

 

test.js를 만들어서 테스트해본 결과, eslint에서 정상적으로 에러를 표시해주는 모습이 보인다.

즉, 잘 적용된 것이다.

 

npx eslint [file_path]

 

터미널에 위와 같은 명령어를 직접 입력해서도 검사할 수 있다.

만약 --fix 옵션을 붙여준다면 자동으로 수정할 수 있는 규칙의 경우 자동으로 수정해준다.

 

--fix 옵션을 통해 자동으로 수정한 모습

 

---

다음, Prettier 적용해보기

 

Prettier를 설정하는 방법은 2가지가 있는데

VS Code 플러그인으로 설치하는 방법과 패키지 매니저를 통해 직접 설치하는 방법이다.

(ESLint와 달리 하나만 하면 된다.)

 

VS Code 익스텐션을 통한 설치

 

VS Code 플러그인에서 prettier를 검색 후 설치 후 VS Code를 껐다가 다시 켜준다.

 

 

그러면 VS Code 하단에 위와 같이 Prettier가 적용되고 있다는 모습이 나올 것이다.

필요로 하는 문서에서 Ctrl + Shift + P를 눌러서 VS Code Format Document를 검색 후,

이를 Prettier로 설정하면 프리티어가 코드 스타일을 바꿔주는 모습을 볼 수 있다.

 

prettier 패키지 설치를 통한 설치

(추측컨데 패키지를 통해 설치 시 저장 시 자동 수정을 적용하기가 까다로운 듯 하다.

그래서 이 글에서는 밑에 나오는 저장 시 자동 적용 기능에서 패키지 설치가 아닌 플러그인 설치를 가정하고 진행한다.)

 

npm install -D prettier

 

위 명령어를 이용하여 prettier를 설치해준다.

 

터미널을 통해 설치한 경우, 아래 명령어로 프리티어가 정상작동 되는지 테스트해 볼 수 있다.

 

npx prettier [file_path] --write

 

ESLint와 함께 사용

 

npm install -D eslint-config-prettier

 

eslint와 함께 사용할 경우 eslint-config-prettier 플러그인을 설치해준다.

이 플러그인은 prettier와 eslint의 중복되는 설정을 eslint 쪽에서 꺼주는 역할을 한다.

설치가 완료되었다면 아래와 같이 .eslintrc에 prettier를 추가한다.

 

{
  "extends": [
    "다른 것들",
    "prettier"
  ]
}

 

설정

프리티어를 설정하는 방법은 크게 2가지가 있다.

 

먼저, 익스텐션으로 설치한 경우에만 적용할 수 있는 VS Code 설정을 통해서 설정하는 방법이다.

이는 Ctrl + ,(혹은 File > Preferences > Settings)를 눌러서 나오는 설정에서 prettier를 설정할 수 있다.

 

 

두 번째로는 prettierrc 파일을 통해 설정하는 방법이다.

 

 

이 방법은 프로젝트마다 설정을 달리하고 싶을 때 사용할 수 있는 방법으로 eslintrc 파일로 설정해주는 것과 비슷하다.

또, VS Code의 프리티어 설정보다 우선 순위가 높기 때문에

VS Code에도 설정이 되어있는 상태에서 prettierrc 파일이 존재한다면 prettierrc 파일의 설정을 따른다.

prettierrc 파일을 설정하는 방법은 이 페이지를 참고.

 

---

마지막으로, 저장 시 자동 적용해보기

저장 시 자동으로 적용하기 위해서는 VS Code의 설정을 바꿔주어야한다.

VS Code 설정을 바꾸기 위해 Ctrl + ,를 눌러 설정으로 들어간다.

 

ESLint  저장 시 자동 적용

 

먼저, ESLint를 자동 적용하기 위해서는 검색창에 codeActionOnSave를 검색해준다.

그러면 Edit in settings.json이 뜨는데 들어가면 json 파일을 수정할 수 있는 부분이 나온다.

여기서 editor.codeActionsOnSave 내부에 "source.fixAll.eslint": true를 추가해주자.

 

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

 

Prettier  저장 시 자동 적용

(※ 플러그인으로 설치한 경우 대상)

 

프리티어의 경우에는 검색창에 format on save를 검색해 체크해주자.

 

 

플러그인으로 설치했다면, default formatter도 검색해 prettier로 설정해주자.

(아마도 플러그인을 설치하지 않았을 경우에는 나오지 않을 것이다.)

 

 

이렇게 ESLint와 Prettier 모두 저장 시 자동 적용이 완료되었다.

 

---

마무리

포맷 후 목표였으면서 언젠가 한 번 적고 넘어가야지 했던 글을 드디어 적었다.

항상 ESLint와 Prettier 설정 시마다 어려웠는데 한 번 정리해두니까 편한 듯 하다.

더 자세한 내용이나 정확한 내용은 아래 Reference를 참고...

 

 

 

Reference

ESLint, Prettier Setting, 헤매지 말고 정확히 알고 설정하자.

ESLint 상세 설정 가이드

Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter

Prettier · Opinionated Code Formatter