Eslint, prettier 설정

Fstone·2021년 2월 8일

ESLint JavaScript Prettier

#VScode

목록 보기

1/1

ESLint

VScode 기준 extensions에서 ESLint 검색 후 최상단 extension 설치

ESLint 설정

그 다음
프로젝트 폴더에 .eslintrc.json 파일 생성 하여 아래 내용 추가

{
  extends : "react-app"
}

Prettier 설치

마찬가지로 VScode 기준 extensions에서 prettier 검색 후 최상단 extension 설치

해당 프로젝트 폴더 위치에서 eslint와 prettier configuration과 plug-in을 설치 해준다.

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

설치 후에 package.json를 확인해보면

"devDependencies": {
    "eslint-config-prettier": "^7.2.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.22.0",
    "prettier": "^2.2.1"

아래 세 항목이 추가된 걸 확인할 수 있다.

    "eslint-config-prettier": "^7.2.0",
    "eslint-plugin-prettier": "^3.3.1",
    "prettier": "^2.2.1"

다음 다시 .eslintrc.json으로 가서

plugin:prettier/recommended를 아래와 같이 추가

{
  extends : ["react-app", "plugin:prettier/recommended"]
}

Prettier 설정

위 과정 후에 VScode settings로 가서 settins.json에 들어가 아래 내용 추가

{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
  "prettier.disableLanguages": ["js"],
  "files.autoSave": "onFocusChange"
}

위 내용 추가 후 저장하려 하니 eslint.autoFixOnSave에서 migrate 관련 내용과 allow할 건지에 대해 묻는 알림 창이 뜬다. 일단 이 내용에 대해선 더 찾아봐야 하겠지만 allow 하고 안하고 전부 직접 확인해 본 결과 allow 하지 않으면 저장할 때 자동으로 code를 수정해주지 않았다.

아래는 allow 한 후 바뀐 settings.json 내용

    "[javascript]": {
    "editor.formatOnSave": false
    },
    "eslint.alwaysShowStatus": true,
    "prettier.disableLanguages": ["js"],
    "files.autoSave": "onFocusChange",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.tabSize": 2,
    "editor.formatOnSave": true

tabsize는 settings에서 직접 수정한 내용이고 그 외 내용은 prettier설정을 위해 추가한 내용이다.

Reference

https://yeri-kim.github.io/posts/eslint-prettier/

Fstone