vscode사용시, .eslintrc.json 파일의 prettier설정이 적용되지 않는 이유

협업을 하고 있는 도중. 협업자들과 코드 format 설정이 다르다는걸 깨달았다. 

그래서 처음엔 전역 settings.json 파일에 prettier 설정을 수정했는데,

 

이렇게하면 다른 프로젝트에도 해당 format이 적용된다는걸 알았다.

 

그래서 전역 settings.json이 아닌 workspace의 settings.json 파일을 추가하여 적용하고자 하는 formatter를 설정하였다.

 

근데 협업자 중 한명이 이미 .eslintrc.json 파일에 eslint설정과 prettier 설정을 해두었으니 따로 workspace의 settings.json파일을 만들 필요 없이. 그대로 install 하고 사용하면 된다고 했다. 

 

그러나 나는  .eslintrc.json에서 설정된대로 소스가 적용되지 않았다!!!

 

그래서 찾아본 결과,

eslintrc.json에서 설정한 prettier은 적용이 잘 안될 수 도 있다고 한다.(왜인지는 모르겠지만?) prettier 공식문서에도 선호하지 않는 방법이라고 한다. 해당 이슈는 추후에 찾아보기로 하고, 우선 급하니까 prettier 파일을 추가해야겠다. 

 

1. vscode Extension에 ESLint와 Prettier가 설치되어 있는지 확인 후, 

 

2. 기존에 있던 eslint-plugin-prettier를 지우고 eslint-config-prettier를 설치

npm uninstall eslint-plugin-prettier --dev
# or
yarn remove eslint-plugin-prettier --dev

npm i eslint-config-prettier --dev
# or
yarn add eslint-config-prettier --dev

 

3.기존 eslintrc.json에 설정해두었던 eslint-plugin-prettier 관련 설정을 제거

//.eslintrc.json
{
  "extends": [
    "next/core-web-vitals",
    "plugin:storybook/recommended"
  ],
  //여기서부터
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "semi": true,
        "useTabs": false,
        "tabWidth": 2,
        "trailingComma": "all",
        "printWidth": 120,
        "bracketSpacing": true,
        "arrowParens": "avoid",
        "endOfLine": "auto"
      }
    ]
  }
  //여기까지 삭제
}

 

4. eslintrc.json 파일 내에 extends 속성으로 "prettier" 추가

완료된 소스는 아래와 같다.

//.eslintrc.json

{
  "extends": [
  	"next/core-web-vitals", 
    "plugin:storybook/recommended", 
    "prettier" //추가
]
}

 

5. 이제 ,prettierrc.json 파일 추가

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 120,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

 

6. vscode 전역 settings.json 파일에 formatter 추가.

윈도우 기준 F1키 누르고 settings 검색하면 전역 settings.json 파일이 보인다. 해당 파일 클릭!

 

7. setting.json 파일에 아래 내용 추가하고 저장!

{
  ...
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "javascript.format.enable": false,
  "typescript.format.enable": false,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "always"
  }
  ...
}

 

 

그리고 파일을 수정해서 저장하니까 내가 설정한 prettier 조건이 정상적으로 변경된다!! 휴우