[Node.js] ESLint + Prettier 같이쓰기 / VS Code에 적용하기

서문 / 주의 사항

본 게시글에서는 ESLint 와 Prettier 각각의 설정방법을 다루지 않고,

통합하는 방법을 다루고 있으니, 설정방법이 궁금하신 분들은 아래의 게시글을 참조하시길 바랍니다.

 

ESLint란?

[Node.js] ESLint란? / ESLint 사용법

Prettier란?

[Node.js] Prettier 란? / Perttier 사용법

 

두개를 같이 쓰면 좋은점

ESLint는 코드의 에러와 문제점들을 검사하고, 고쳐준다!

Pretter는 코드의 모습을 예쁘고, 읽기 좋게 만든다!

 

같이 쓰기 위해 필요한 것

사실 ESLint에는 코드의 모양을 바꿔주는 기능도 들어가 있지만, 오류 검출에 특화되어 있어 잘 사용하지 않는다.

이 기능은 Prettier와 곂치기에, 제대로 설정해주지 않으면 패키지끼리 충돌이 일어날 수 있다 ㅠ

 

충돌 방지 패키지 설치 ( eslint-config-prettier / eslint-plugin-prettier )

# 충돌하는 <ESLint규칙>을 끈다!

# -d : package.json의 devDependencies에 저장

npm i -d eslint-config-prettier



# Prettier 규칙을 ESLint 규칙에 추가

# eslint --fix만 실행해도, prettier --write까지 적용

npm i -d eslint-plugin-prettier

 

ESLint 설정파일에, 충돌 방지 설정 추가하기 (.eslintrc.json)

// .eslintrc.json

{
    "plugins": [
        "prettier"
    ],
    "rules": {
        "prettier/prettier": "error"
    }
}

 

ESLint와 Prettier 동시 실행하기!

# --fix : 오류 rules에 맞게 자동수정

eslint <파일명> --fix

---

 

VS Code에 설정하기 ( settings.json / VS Code 에서 " ctrl + , " 누르고 우측상단 Open setting 클릭 )

{
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "[javascript]": {
        "editor.formatOnSave": true
    },
}

- 설정을 추가할때 `,`로 구분을 잘해주셔야 합니다 ( 마지막 제외 )

 

VS Code에 ESLint 설정파일 적용하기 ( .eslintrc.json ) / 규칙추가 : eslint.org/docs/rules/

{
    "plugins": ["prettier"],
    "extends": ["eslint:recommended", "plugin:prettier/recommended"],
    "rules": {
        "prettier/prettier": "error"
    }
}

 

VS Code에 Prettier 설정파일 적용하기 ( .prettierrc.json ) / 옵션추가 : prettier.io/docs/en/options.html 

{
    "trailingComma": "es5",
    "tabWidth": 2,
    "semi": true,
    "singleQuote": true
}