VSCode - Prettier, ESLint 사용하기

VSCode에서 제공해주는 기능이 많이 있어서 간혹 VSCode 자체에서 처리하는건지 설치한 익스텐션에서 처리하는건지 햇갈리는 경우가 있는데 특히나 fomatter 같은 경우 햇갈린다.

왜냐하면 VSCode, Prettier, ESLint 모두 포매팅 기능이 있기 때문이다.

따라서, 셋 중에 어떤 기능을 이용해서 포매팅해야할지 선택해야하는데

보통,

소스 스타일링은 - Prettier,

문법체크, 코딩 컨벤션 룰은 - ESLint 를 사용하고

VSCode는 에디터로써, 포맷을 어느 시점에 정리할지 등을 정의해두는 듯하다.

그니까.. 각 Tool이 지니고 있는 고유한 장점을 이용하는거다.

 

1. 설정하기 전에 필요한 패키지 설치

1.eslint-plugin-react: 리액트와 관련된 eslint 룰셋
2.eslint-config-prettier: eslint의 포매팅 기능 off
3.eslint-plugin-prettier: eslint에 prettier 포매팅 기능 on

$yarn add prettier --dev --exact  //react에는 eslint만 내장되어있고 prettier는 없으므로 설치
$yarn add --dev eslint-config-prettier eslint-plugin-prettier eslint-plugin-react

위와 같이 개발 디펜던시로 설치하고 VSCode 에서 Prettier, ESLint Extension을 설치한다.

2. VSCode 설정

-> VSCode에서 Prettier, ESLint Extension 설치

-> 여기에서는 VSCode 설정화면에서 설정할 수도 있지만 윈도우 기준 [ Ctrl + , ] 명령어를 통해서  우측 상단에 "설정 열기(JSON)" 을 클릭하거나, [ Ctrl + Shift + P ] 를 이용해서 ">open settings"를 통해 settings.json 파일을 직접 수정하는게 개인적으로 훨씬 편하다.(설정 화면에서는 항목들이 너무많아 잘 안보임...ㅠㅠ)

여기서 설정은 취향대로하되, 아래 설정을 해두면 좋다.

"editor.formatOnSave": false // Prettier를 사용하기 위해 VSCode 자체 포매팅 off
"editor.tabSize": 2          // 일단 에디터에도 탭 눌렀을 때 두 칸 설정ㅋㅋ 이유는 가독성면에서 좋음
//"eslint.autoFixOnSave": true => Deprecated 된 프로퍼티 로써 저장시 ESLint를 통한 자동 수정을 위해서
"editor.codeActionsOnSave": { "source.fixAll.eslint": true } => 로 대신 사용해야함
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "html", "vue", "css"],
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2,
    "editor.formatOnSave": true
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2,
    "editor.formatOnSave": true
  },
 "[javascript]": {  // javascript 의 기본 포맷터는 prettier, 저장시 포매팅
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
 },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }

 

3. Prettier 설정

리액트에서 여러가지 설정 방법이 있는데 루트 디렉토리에서 ".prettierrc" 파일을 만들고 javascript object로 구성하는게 편리하다..

{
  "trailingComma": "none", // array등에서 마지막 항목에 콤마를 붙일건지 말건지.. 안붙이게 설정
  "tabWidth": 2, // 탭 2칸
  "semi": true, // 세미콜론 있게 설정
  "singleQuote": true, // 따옴표
  "bracketSpacing": true, // 괄호 열었을때 공백 넣을지 여부
  "jsxBracketSameLine": true, // 멀티 라인에서 > 닫는부분을 < 와 맞출지 여부
  "printWidth": 200
}

자세한 Prettier 옵션은 요기서

자세한 Prettier 설정은 요기서

 

4. ESLint

ESLint 또한 파일로 만드는게 편함. 여기서 rules 속성에 엄청나게 많고 유용한 기능들이 많다.

옵션 확인은 여기서

{
  "extends": [
    "react-app",
    "plugin:react/recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "prettier/prettier": [
      "error"
    ],
    "no-var": "error"
  }
}

 

=> react-app와 plugin:react/recommend의 차이는??

 

 

5. TypeScript React Project에서 ESLint, Prettier 적용

• yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react --D
• yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

// @typescript-eslint/parser: eslint에 타입스크립트 파서 사용
// @typescript-eslint/eslint-plugin: 타입스크립트 룰 모음집
// eslint-plugin-react: 리액트와 관련된 eslint 룰셋

// eslint-config-prettier: eslint의 포매팅 기능 삭제
// eslint-plugin-prettier: eslint에 prettier의 포매팅 기능 추가

 

 

 

참고