본문으로 바로가기

저장할 때 prettier format적용

category 개발도구/Eslint, Prettier 2022. 8. 19. 16:45
yarn add --dev prettier
// .prettierrc
{
  "singleQuote": true,
  "semi": false,
  "useTabs": false,
  "trailingComma": "all",
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}
// .prettierignore
.next
node_modules
.vscode
package.json
package-lock.json
dist
// .vscode/settings.json
{
  "javascript.format.enable": false,
  "advancedNewFile.exclude": {
    "node_modules": true,
    "dist": true
  },
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.tokenColorCustomizations": {
    "comments": "#7e6666"
  },
  "eslint.alwaysShowStatus": true,
  "eslint.format.enable": true,
}

위와 같이 설정하고 vscode를 재시작해보자.

위처럼 셋팅했는데도 안된다면 이것도 적용해보자.

vscode에서 Ctrl + Shift + p
그리고 Format Document With 검색후 엔터
Configure Default Formatter 엔터
Prettier - Code formatter 엔터