格式化代码

ESLint 和 Prettier 总结

ESLint

ESLint 针对代码质量和风格问题进行统一格式化
通过npm init @eslint/config会安装相应的包到项目中
通过 .eslintrc 文件配置自定义规则
要在编辑器 VSCode 中获得提示以及保存自动应用规则的话，需要下载 ESLint 的 VSCode 插件
ESLint 的 VSCode 插件会查找当前工作空间的 eslint 配置，找不到的话就会去全局查找，根据配置进行相应的格式化操作
社区有一些现成的成套规则，可以通过安装插件，比如eslint-config-airbnb，在配置文件中添加

{
  "extends": ["airbnb"]
}

Prettier

ESLint 主要解决代码质量问题，对于风格统一并没有解决完全
Prettier 则完全解决了代码风格问题
可以通过.prettierrc进行配置
但是一起使用时可能会存在格式上的冲突
需要关掉和 Prettier 冲突的 Eslint 配置，通过安装eslint-config-prettier关掉
npm i eslint-config-prettier -D，并添加如下配置

// .eslintrc
{
   // prettier 一定要是最后一个，才能确保覆盖
  "extends": ["prettier"]
}

推荐做法：同时安装eslint-config-prettier和eslint-plugin-prettier
eslint-config-prettier的作用是将 prettier 的规则以插件的形式加入到 ESlint 中
npm i eslint-config-prettier -D，并添加如下配置

// .eslintrc
{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

// 合并上面两条配置的写法
{
  "extends": ["plugin:prettier/recommended"]
}

vue-cli 项目配置

通过 vue-cli 生成的项目中，如果选择使用 ESLint 和 Prettier，就能看到生成的配置是类似这种形式

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

extends 配置说明

"plugin:vue/essential"：使用eslint-plugin-vue
"eslint:recommended" ：启用 eslint 核心的推荐规则
"@vue/prettier"：eslint-plugin-prettier-vue 插件，包含了eslint-plugin-prettier的所有作用

VSCode 配置

ctrl + shift + P 输入 setting
Open User Setting 表示用户自定义的配置
Open Default Setting 表示默认配置，其中能看到所有配置项的解释
VSCode Settings
针对每个安装的 Extensions，在介绍页面能看到相应的用法
Vue tools for VSCode：Vetur 文档
点击右下角的 ESLint，会在 OUTPUT 控制台中看到 ESLint Server 的情况，如果格式化不生效，看控制台是否有错误

{
  // The setting below turns on Auto Fix for all providers including ESLint
  "editor.codeActionsOnSave": {
    "source.fixAll": true
    // 开启eslint
    // "source.fixAll.eslint": true
  },
  // 默认格式化工具：prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 指定某种类型文件使用的Formatter
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

npm 安装的库和 VSCode 的插件的关系

只有 eslint 插件启用了，vscode 的 setting.json 文件中，'eslint.format.enable'配置才有意义，否则无效，用于开启格式化。'editor.formatOnSave'和'editor.formatOnPaste'分别配置在保存和粘贴时格式化
安装了 eslint 插件，并且进行了自动格式化配置，那么项目中没有再用 npm 安装 eslint，eslint 插件也会格式化代码。
npm 安装的 eslint 是在命令行中运行的。如果你只安装 npm 包，VSCode 是不会有 lint 提示的，只能通过命令行，在小黑窗查看不符合 lint 规则的检测信息。安装 npm 包最主要的原因是可以通过 git hook 强制提交代码前 lint 和格式化代码保证代码仓库的代码风格统一。

ESLint+Prettier格式化代码配置

格式化代码

ESLint 和 Prettier 总结

ESLint

Prettier

vue-cli 项目配置

extends 配置说明

VSCode 配置

npm 安装的库和 VSCode 的插件的关系

参考资料