配置一下这个代码规范的问题，在这里我们需要使用到的工具有: vetur，eslint，prettier

好了，当我们创建了一个项目或者接手了一个项目的时候，为了能够让我们的代码规范起来，可以自行配置vscode的json配置，但是项目是多人开发的，所以我们应该把这个配置具体到我们的项目中，达到每个开发人员都能够统一规范。

首先我们要在项目中安装一个包：@vue/prettier

yarn add -D @vue/eslint-config-prettier

安装好之后，在 .eslintrc.js 给它加上：

"extends": [
  "plugin:vue/essential",
  "eslint:recommended",
  "@vue/prettier"
],

现在我们执行 npm run lint 的时候，可以看到eslint已经帮我们启动了代码规范， 但是很多东西都不能按照我们的想法来执行的，这个时候我们还需要做一些配置：

在项目的根目录下创建一个.prettierrc.js文件，然后在其中加入：

module.exports = {
    semi: false,  //行位是否使用分号，默认为true
    singleQuote: true, //  是否使用单引号
    // bracketSpacing: true, //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
    // "printWidth": 80, //一行的字符数，如果超过会进行换行，默认为80
    // "tabWidth": 2, //一个tab代表几个空格数，默认为80
    // "useTabs": false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
    // "trailingComma": "none", //是否使用尾逗号，有三个可选值"<none|es5|all>"
    // parser: "babylon" //代码的解析引擎，默认为babylon，与babel相同。
}

到了这里，即时有上千个VUE文件，我们也可以通过npm run lint 处理我们的错误规范代码

配置到这里我们已经可以实现代码规范了， 但是为了能够在vscode编辑器看到我们的错误规范，我们还需要装一个插件，这个插件就叫Eslint。

安装好eslint后，因为eslint并不认识我们vue文件里面包含了js语法，所以我们还需要打开我们的vscode 配置文件，这里的配置只是配置我们个人的文件，并没有达到团队的配置效果，所以我们要在项目中创建一个.vscode文件夹，但是这里需要注意一个问题：.vscode 这个文件夹在.gitignore文件里面，所以千万要记得把.vscode删除

做好上面的一步之后，在.vscode里面创建文件settings.json文件，添加如下代码：

{
"eslint.autoFixOnSave": true,
"eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
}

上面的配置就是在保存的时候校验并修改我们的代码，它会自动帮我们整理代码规范

配置到这里其实已经结束了，但是因为我们安装了很多插件，例如Prettier ， 因为我们不只开发vue项目，可能还有其它类型的js项目特别是传统js项目，需要用到prettier进行美化，而prettier的一些功能是会和eslint相冲突的，比如说我们在全局设置了prettier的formatOnSave，这个功能就会和eslint的autoFixOnSave打架，为了避免这个矛盾，我们通常还会在本项目的settings.json文件里再多加几个选项，类似于这样：

"editor.tabSize": 2,
"editor.formatOnSave": false,
"prettier.semi": false,
"prettier.singleQuote": true

有了这些设置，基本上prettier就不会和eslint打架了。