ESlint, Prettier 설정 방법

프로젝트 생성 시 설정 방법

• Airbnb JavaScript Style Guide로 프로젝트 코드 스타일 설정
• jsx, typescript 등 추가적인 설정은 구글링해서 추가한다. - 추가적인 package 찾아서 설치하고, eslint config 설정 필요

eslint, prettier package 설치

• eslint : yarn add eslint --dev
• eslint-config-airbnb : npx install-peerdeps --dev eslint-config-airbnb
• eslint-config-prettier : yarn add --dev eslint-config-prettier
• prettier : yarn add --dev --exact prettier

eslint config 생성 및 설정

프로젝트 경로에 .eslintrc.json 생성

 

{
  "plugins": ["prettier"],
  "extends": ["airbnb", "plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": "error"
  },
  "env": {
    "browser": true,
    "node": true
  }
}

rules은 내부적으로 조율해서 추가하거나 변경한다. - https://eslint.org/docs/rules/ 참고

web.admin 프로젝트는 .eslintrc.json를 생성하지 않고 package.json 내 설정했음

prettier config 생성 및 설정

프로젝트 경로에 .prettierrc 생성

 {
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "proseWrap": "never"
}

 

옵션 설정은 내부적으로 조율해서 추가하거나 변경한다. - https://prettier.io/docs/en/options.html 참고

프로젝트 폴더 내 VSCode Settings 설정

.vscode/settings.json

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

VSCode 설정 방법

VSCode Extensions 설치

• ESLint
• Prettier - Code formatter

VSCode Settings 설정

• Code - Preferences(기본 설정) - Settings(설정) [⌘,]
• Workspace(작업 영역) - "javascript.format.enable": false

참고:: 

velog.io/@velopert/eslint-and-prettier-in-react