vscode eslint, prettier conflict

상황

❓ vscode 사용시, eslint 와 prettier의 충돌로 빨간줄이 난무 할 경우

• vscode 에 eslint, prettier 확장 프로그램 사용.
• react-native project 에 eslintrc.js, prettier.js 설정하여 사용.

해결

1. prettier, eslint-config-prettier 설치

• eslint는 기본으로 설치가 되어 있기에 따로 설치하지 않는다. 설치 되어 있지 않다면 설치.

npm install -D prettier eslint-config-prettier

2. eslintrc.js 설정

• extends 에 prettier를 추가해준다
• 기존에 extends 에 추가해 놓은것이 있어 배열 형태로 입력

....
extends:['@react-native-community',"prettier"]

3. vscode setting.json 추가

• 다음 코드추가

...
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",

저장시 prettier 적용 추가 코드

• 띄어쓰기라도 안맞으면 빨간줄이 난무하는데, 이를 저장을 통해 해결
• setting.json

...
"[javascript]": {
    "editor.formatOnSave": true // true로 변경
  },
  "editor.codeActionsOnSave": {
    // For ESLint
    "source.fixAll.eslint": false
  },
  "[javascriptreact]": {
    "editor.formatOnSave": true // true로 변경
  },