VSCode Prettier + ESlint 配置代码格式化

• ESlint 是代码风格和语法规则的检查工具，旨在为团队统一代码风格，写出正确的语法
• Prettier 是帮助开发者按照 ESlint 规则格式化的工具

vscode 安装 ESlint 插件

ESLint

vscode 安装 Prettier 插件

Prettier - Code formatter

配置

搜索 files.autoSave 

选择 onFocuschange

搜索 editor.defaultFormatter 

选择 Prettier - Code formatter

搜索 editor.formatOnSave 

勾选

在项目中配置 prettier

• .prettierrc

{
  "arrowParens": "avoid",
  "semi": true,
  "singleQuote": true,
  "printWidth": 120,
  "endOfLine": "auto"
}

• 不需要格式化的文件可在 .prettierignore 中配置

.cache
package.json
package-lock.json
public
node_modules
pnpm-lock.yaml

• 配置到这里，在当前文件 保存按钮，就可以实现格式化了，格式化规则按照 .prettierrc 的配置
• 有个问题，当前配置只能对 js 文件进行格式化，想要对 .vue .css .scss 扩展名的文件进行格式化，需要在 setting.json 中进行设置，如下配置 .js, .css, .vue, .scss都按照 prettier-vscode 插件进行格式：

"[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "sibiraj-s.vscode-scss-formatter"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }