在日常开发中，常常会遇到多人协作开发的情况，而每个人都有自己的代码风格，为了对代码规范进行统一，Eslint的使用是必不可少的，并且对于常见的代码编写错误 Eslint亦可以给出相应的提示或格式化处理，而prettier则是针对代码格式化的一个扩展插件，本文主要针对 Vue 项目中 Eslint + prettier + Vscode 实现代码规范的基础配置以及保存自动格式化。

1. Vscode 安装 Eslint + prettier 插件

 // 首先在 Vscode 的插件商店直接搜索并安装 Eslint 插件

2. Vue 项目安装所需依赖插件

 // 通过 npm 或 yarn 安装所需要的依赖插件
 1) eslint    // Eslint 插件主体
 2) eslint-config-prettier    // Eslint 与 prettier 格式化处理
 3) eslint-plugin-simple-import-sort    // import 导出排序插件
 4) eslint-plugin-prettier 
 5) prettier    // prettier 插件主体
 6) prettier-eslint    // 解决 Eslint 与 prettier 格式化冲突

 安装指令 - npm (yarn安装指令此处不作示范)
 npm i --save-dev eslint eslint-plugin-prettier eslint-config-prettier eslint-plugin-simple-import-sort prettier prettier-eslint

3. Vscode Eslint Settings 配置项

 // Vscode 中打开左下角齿轮 => 设置 => 标签栏进入 settings.json => 拷入以下配置
 <!--  
    配置 stylelint 验证文件类型
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true    // 保存时自动按照 Eslint 规范进行代码格式化
    },
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      "typescript",
      "typescriptreact",
      "html",
      "vue"
    ],
 -->

4. Vue 项目中 Eslint .eslintrc 配置项

 // 在 Vue 项目根目录新建 .eslintrc 或 .eslintrc.js 配置文件并写入以下内容(由于 json 文件无法添加注释故示例为 js 格式，如配置文件为 .eslintrc 需自行调整为 json 格式)
 module.exports = {
    root: true,
    env: {
        'browser': true,
        'es2021': true,
        'node': true
    },
    plugins: ['simple-import-sort'],
    extends: [
        'plugin:vue/essential',
        'eslint:recommended', 
        'prettier',
        'plugin:prettier/recommended',
    ],
    parserOptions: {
        // Use babel-eslint for JavaScript    
        'parser': 'babel-eslint',
        'ecmaVersion': 2017,
        // With import/export syntax    
        'sourceType': 'module'
    },
    rules: {}    // 自定义规则 - 支持规则可参考 Eslint 官网: https://eslint.org/
 }

总结: 以上配置完成后针对常见代码错误 Eslint 都会给出错误提示方便定位，同时在保存时即可自动格式化代码，极大的提升了代码编写效率以及规范化，但是工具终归只是辅助，代码规范还是要以个人遵守为主.