vscode extentions

vscode에서 협업 시에 꼭 설치해야 하는 extentions가 있다.
바로 코딩컨벤션을 위한 ESlint & Prettier extentions이다. git으로 관리하기 위해서, 동일한 포멧, 문법 사용으로 팀원간 협업이 원활해 지기도 하니 꼭 아래내용을 참고하여 설치 & 설정하도록 하자!

ESlint

• formatting
• 문법수정

ESlint는 보통 잘못 입력한 문법을 수정하기 위해서 사용하며 포메팅은 prettier를 사용한다.

Prettier

• formatting 특화!

vscode의 대표 formatter로서, 팀원간 코딩컨벤션을 맞추기위해 꼭 사용된다. ESlint와 기능이 겹치기 때문에, Prettier 사용시 ESlint의 fomatter기능을 종료시키는 설정이 필요하다.

설치

1. extentions 설치

• ESlint
• prettier

vscode extentions에서 위 2개 항목을 설치한다.

2. react 프로젝트에 설치

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

• eslint-config-prettier : eslint와 prettier 사이 겹치는 포매팅 룰 삭제
• eslint-plugin-prettier : eslint에 prettier 포매팅 기능 추가

eslint-config-prettier로 eslint의 원래 포매팅 기능을 버리고
eslint-plugin-prettier로 prettier의 포메팅을 사용한다.

.prettierrc.js

{
  "printWidth": 100, // 화면 폭
  "tabWidth": 2, // 탭간격, 스페이스 설정시 2칸 띄어쓰기
  "singleQuote": true, // ' 사용
  "trailingComma": "all", // , 자동 붙이기
  "bracketSpacing": true, // [1,2] -> [ 1, 2 ]
  "semi": true, // ; 사용
  "useTabs": false, // tab키 사용. false 추천 == space 대체
  "arrowParens": "avoid", // (x) => x를 x => x로 변환
  "endOfLine": "lf"
}

.eslintrc.js

{
  "extends": ["plugin:prettier/recommended"]
}

// 또는

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

만약 airBnb 코딩컨벤션을 따르고 싶다면?

npm i -D eslint-config-airbnb-base eslint-plugin-import 추가설치

아래와 같이 .eslintrc.js 내용을 작성한다.

 // .eslintrc.js
 {
   "extends": ["airbnb-base", "plugin:prettier/recommended"]
 }

vscode settings.json

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

추가하기