Vanilla JS 프로젝트 환경 설정 하기 part 2(ESLint, Prettier, editor.config)

이전 포스트(Webpack, Babel 설정)

지난 포스트에 이어 프로젝트 환경 설정을 이어가려고 합니다.

이번 포스트에서는 ESLint, Prettier, editor.config를 통해 환경설정 하는 법을 다룰 예정입니다.

ESLint vs Prettier vs EditorConfig

각각의 특징을 간단하게 정리해보면 다음과 같습니다.

ESLint : 코드 퀄리티 향상
Prettier : 코드 포매터(일정한 형태로 통일)
EditorConfig : 에디터 규칙 통일(Prettier가 포매팅 하기 전에 동작)

비슷한 듯 하지만 각자 다른 특징을 가지고 있습니다.

(Prettier와 EditorConfig는 뭐가 다른가 싶기도 한데 사실 저도 일부 동의합니다..ㅎ 하지만 분명 다릅니다!)

ESLint

먼저 ESLint 설치를 해줍니다.

npm i -D eslint

만약 기본적으로 확장 프로그램 지원을 하지 않는다면 확장 프로그램을 설치해줘야 합니다.

저는 VSCode를 사용하고 있기 때문에 설치를 해주었습니다.

eslint extension

확장 프로그램까지 설치가 끝났다면 설정 파일을 만들어줘야 합니다.

다음 명령어를 실행해주세요.

npx eslint --init

자신이 원하는 것들을 설정해주면 됩니다.

저는 참고로 다음과 같이 진행했습니다.

ESLint 어떻게 사용할 것인가 : 가장 엄격한 룰(정확한 문장이 기억이 안 나네요..)
어떤 Type의 모듈을 사용하는가 : JavaScript modules
프레임워크 : None of these
타입스크립트 쓰는가 : No
코드 실행 환경 : Browser, Node 둘 다
어떤 스타일 : 유명한 스타일 => airbnb
config 파일 확장자 : JSON

저같이 유명한 스타일 가이드를 선택하시면 npm install을 할거냐고 묻는데 하시면 됩니다.

이렇게 되면 ESLint 설정이 끝납니다. 세부적으로 더 추가하고 싶은 규칙이 있으시면 추가해주시면 됩니다.

만약 이전 포스트를 보면서 계속 설정을 진행중이시면 index.js나 add.js에 에러가 뜨는 것을 확인하실 수 있을겁니다.

Prettier

사실 ESLint만 설정해줘도 코드 퀄리티가 어느 정도 보장이 되지만 코드의 통일성을 위해 Prettier까지 설정해보겠습니다.

역시나 설치를 해줍니다.

npm i -D prettier

프리티어 역시 확장 프로그램이 필요합니다. 없으신 분들은 설치를 해줍시다.

prettier extension

그 후 .prettierrc.json 파일을 생성하고 다음과 같이 옵션을 입력해줍니다.

이 옵션은 제가 임의로 설정한 것이며 자기 취향에 맞게 설정해주시면 됩니다.

{
    "printWidth": 80,
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": true,
    "quoteProps": "as-needed",
    "trailingComma": "all",
    "bracketSpacing": true,
    "arrowParens": "always",
    "endOfLine": "lf"
}

ESLint와 Prettier를 함께 사용하면 중복되는 옵션에 대해 충돌이 발생하는데 이를 방지하기 위해 추가 작업을 해주겠습니다.

다음 명령어를 위해 필요한 패키지를 설치해주세요.

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

Prettier를 ESLint에 결합시키기 위한 패키지들이라고 생각하시면 됩니다.

eslint-plugin-prettier는 Prettier를 ESLint rule 처럼 동작시킵니다. eslint-config-prettier는 필요없거나 Prettier와 충돌하는 ESLint rule들을 비활성화 시킵니다.

eslintrc.json 파일을 다음과 같이 수정해줍니다.

{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "airbnb-base", "prettier"
    ],
    "plugins": ["prettier"],
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "rules": {
        "prettier/prettier": ["error"],
        "import/no-unresolved": "off"
    }
}

저 같은 경우 import 과정에서 에러 뜨는걸 없애고자 import/no-unresolved를 추가해줬는데 설정은 본인 자유입니다.

룰에 맞지 않게 파일을 수정해보면 ESLint에서 prettier 에러를 띄우는 것을 확인할 수 있습니다.

eslint generate prettier error

혹시 적용이 안 되시는 분들은 에디터를 완전히 껐다 켜보시길 추천드립니다. (저도 그랬거든요…ㅎ)

자동 포매팅

파일을 저장할 때 마다 자동 포매팅을 하기 위해 에디터 설정을 바꿔주겠습니다.

맥북 기준 shift + command + p(윈도우는 ctrl + shift + p로 기억합니다)를 눌러 setting을 검색하여 작업 영역 설정 열기(JSON)을 통해 파일을 열어주셔도 좋고 아래와 같이 만들어주셔도 좋습니다.

IDE setting

그 후 setting.json을 다음과 같이 작성해줍니다.

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

저장 할 때 자동으로 포매팅이 되는 것을 확인할 수 있습니다.

EditorConfig

마지막으로 EditorConfig를 설정하겠습니다. 역시나 확장 프로그램이 필요합니다. 설치해줍시다.

editor config extension

그리고 .editorconfig 파일을 생성한 후 다음과 같이 작성해줍니다. 아래 코드는 예제일 뿐이며 본인이 자유롭게 설정해주시면 됩니다.

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

설정한 룰이 적용 되는 걸 확인할 수 있습니다.

적용이 됐나 싶으신 분들은 indent_size를 각각 2와 4로 바꿔서 테스트 해보시면 바뀐 것을 알 수 있으실 것 같습니다.

이렇게 해서 프로젝트 환경을 마무리 짓도록 하겠습니다. Webpack, Babel 설정이 궁금하신 분들은 이전 포스트를 참고하셔도 좋을 것 같습니다.

ESLint vs Prettier vs EditorConfig

ESLint

Prettier

자동 포매팅

EditorConfig

참고 자료