Vscode中 vue项目中使用eslint保存时自动格式化代码

多人的项目开发，代码格式不一致会引起冲突，使用eslint 统一代码规范，保存的时候自动统一代码格式，减少因为代码格式引起的冲突。

一、准备

1.1 安装如下依赖

@vue/cli-plugin-eslint

eslint

eslint-plugin-prettier

@vue/eslint-config-prettier

eslint-plugin-vue

1.2 安装vscode 插件

eslint:

Prettier - Code formatter：

Beautify：

二、设置 Eslint 的规则

在项目根目录下新建 .eslintrc.js 文件，用于编写 eslint 的相关规则，来校验代码。关于 eslint 的具体规则，可以查看官方文档。

module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: ['plugin:vue/essential', 'eslint:recommended','@vue/prettier'],
    rules: {
        'no-console': 0,
        'no-debugger': 0
    },
    parserOptions: {
        parser: 'babel-eslint'
    }
}

三、手动设置vsCode 的settings.json 文件内容：

打开vscode => 首选项 => 设置 => 扩展 => ESLint => 在 settings.json 中编辑，

在 settings.json 文件中添加如下代码：

{
    "todo-tree.tree.showScanModeButton": false,
    "[json]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "eslint.migration.2_x": "off",
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "[html]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "[javascript]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    //设置eslint保存时自动格式化
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint":true
    }
}

如果设置完没有生效，重新启动vsCode，会弹出一个允许授权的弹框，点击允许就可以了。