vue-cil 项目 2022 vscode 保存 vue、js 格式化 Eslint + Prettier

当前技术环境下蓬勃发展，更新很快，导致网上流传的许多配置方式都无使用。为了重新规范化团队开发质量，在旧项目中集成 ESLint 后，也日益凸显出许多问题。很多时候，在解决由于格式化，导致的冲突、无法提交等问题。因此在开发时，格式化为预期的代码格式需求，异常强烈。

vsCode拓展版本

ESLint v2.2.2

Prettier - Code formatter v9.5.0

package.json 依赖包版本

“eslint”: “^6.7.2”

“prettier”: “^1.19.1”,

“eslint-plugin-prettier”: “^3.1.3”,

“eslint-plugin-vue”: “^6.2.2”,

“@vue/eslint-config-prettier”: “^6.0.0”,

“@vue/cli-plugin-eslint”: “~4.4.0”,

“@vue/eslint-config-prettier”: “^6.0.0”,

“babel-eslint”: “^10.1.0”,

“@vue/cli-service”: “~4.4.0”,

安装 VSCode 扩展

1. ESLint（当前使用版本v2.2.2）
   https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

2. Prettier - Code formatter （当前使用版本 v9.5.0）
   https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

配置 .vscode/settings.json

{
  "editor.tabSize": 2, // 缩进2个空格
  "files.insertFinalNewline": true, // 文件结尾插入新行
  // 编辑器 保存时格式化
  "editor.formatOnSave": true, // 保存时格式化
  "editor.formatOnSaveMode": "modifications",  // 保存时格式化模式，仅格式化修改的文件
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 默认格式化方式
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,   // 保存时 使用 eslint 修复
  },
  // eslint 保存时格式化
  "eslint.enable": true,
  "eslint.run": "onType",
  "eslint.format.enable": true,
  "eslint.codeActionsOnSave.mode": "all", // 修复模式
  "eslint.validate": ["javascript", "javascriptreact", "vue", "html"], // 校验的文件
  "html.validate.scripts": false
}

配置 .eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
    jquery: true,
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "require-atomic-updates": "off",
  },
};

配置 .prettierrc

{
  "printWidth": 100,
  "trailingComma": "all"
}