统一项目格式化规则：

1、首先创建项目后，安装babel-eslint插件

2、然后将下面这三个文件放在项目的根目录中

 .eslintrc.js文件（内容如下）

module.exports = { root: true, parserOptions: { parser: babel-eslint, sourceType: module }, env: { browser: true, node: true, es6: true, }, extends: [plugin:vue/recommended, eslint:recommended], // add your custom rules here //it is base on https://github.com/vuejs/eslint-config-vue rules: { "vue/max-attributes-per-line": [2, { "singleline": 10, "multiline": { "max": 1, "allowFirstLine": false } }], "vue/singleline-html-element-content-newline": "off", "vue/multiline-html-element-content-newline": "off", "vue/name-property-casing": ["error", "PascalCase"], accessor-pairs: 2, arrow-spacing: [2, { before: true, after: true }], block-spacing: [2, always], brace-style: [2, 1tbs, { allowSingleLine: true }], camelcase: [0, { properties: always }], comma-dangle: [2, never], comma-spacing: [2, { before: false, after: true }], comma-style: [2, last], constructor-super: 2, curly: [2, multi-line], dot-location: [2, property], eol-last: 2, eqeqeq: [2, allow-null], generator-star-spacing: [2, { before: true, after: true }], handle-callback-err: [2, ^(err|error)$], indent: [2, 2, { SwitchCase: 1 }], jsx-quotes: [2, prefer-single], key-spacing: [2, { beforeColon: false, afterColon: true }], keyword-spacing: [2, { before: true, after: true }], new-cap: [2, { newIsCap: true, capIsNew: false }], new-parens: 2, no-array-constructor: 2, no-caller: 2, no-console: off, no-class-assign: 2, no-cond-assign: 2, no-const-assign: 2, no-control-regex: 0, no-delete-var: 2, no-dupe-args: 2, no-dupe-class-members: 2, no-dupe-keys: 2, no-duplicate-case: 2, no-empty-character-class: 2, no-empty-pattern: 2, no-eval: 2, no-ex-assign: 2, no-extend-native: 2, no-extra-bind: 2, no-extra-boolean-cast: 2, no-extra-parens: [2, functions], no-fallthrough: 2, no-floating-decimal: 2, no-func-assign: 2, no-implied-eval: 2, no-inner-declarations: [2, functions], no-invalid-regexp: 2, no-irregular-whitespace: 2, no-iterator: 2, no-label-var: 2, no-labels: [2, { allowLoop: false, allowSwitch: false }], no-lone-blocks: 2, no-mixed-spaces-and-tabs: 2, no-multi-spaces: 2, no-multi-str: 2, no-multiple-empty-lines: [2, { max: 1 }], no-native-reassign: 2, no-negated-in-lhs: 2, no-new-object: 2, no-new-require: 2, no-new-symbol: 2, no-new-wrappers: 2, no-obj-calls: 2, no-octal: 2, no-octal-escape: 2, no-path-concat: 2, no-proto: 2, no-redeclare: 2, no-regex-spaces: 2, no-return-assign: [2, except-parens], no-self-assign: 2, no-self-compare: 2, no-sequences: 2, no-shadow-restricted-names: 2, no-spaced-func: 2, no-sparse-arrays: 2, no-this-before-super: 2, no-throw-literal: 2, no-trailing-spaces: 2, // no-undef: 2, no-undef: 0, no-unused-vars: 0, no-undef-init: 2, no-unexpected-multiline: 2, no-unmodified-loop-condition: 2, no-unneeded-ternary: [2, { defaultAssignment: false }], no-unreachable: 2, no-unsafe-finally: 2, // no-unused-vars: [2, { // vars: all, // args: none // }], no-unused-components: 0, no-useless-call: 2, no-useless-computed-key: 2, no-useless-constructor: 2, no-useless-escape: 0, no-whitespace-before-property: 2, no-with: 2, one-var: [2, { initialized: never }], operator-linebreak: [2, after, { overrides: { ?: before, :: before } }], padded-blocks: [2, never], quotes: [2, single, { avoidEscape: true, allowTemplateLiterals: true }], semi: [2, never], semi-spacing: [2, { before: false, after: true }], space-before-blocks: [2, always], space-before-function-paren: [2, never], space-in-parens: [2, never], space-infix-ops: 2, space-unary-ops: [2, { words: true, nonwords: false }], spaced-comment: [2, always, { markers: [global, globals, eslint, eslint-disable, *package, !, ,] }], template-curly-spacing: [2, never], use-isnan: 2, valid-typeof: 2, wrap-iife: [2, any], yield-star-spacing: [2, both], yoda: [2, never], prefer-const: 2, no-debugger: process.env.NODE_ENV === production ? 2 : 0, object-curly-spacing: [2, always, { objectsInObjects: false }], array-bracket-spacing: [2, never], } }

.eslintignore （内容如下）

build/*.js config/*.js

.editorconfig (内容如下)

# http://editorconfig.org root = true [*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true [*.md] insert_final_newline = false trim_trailing_whitespace = false

3、最后将这个下面的json文件内容粘贴到vscode中的setting.json文件中，（ codeActionsOnSave 这个属性是vscode装了eslint插件后才会有的属性，该属性值设置为： "source.fixAll": true 时，则可以使代码在保存时自动按照 .eslintrc.js 中定义的规则格式化代码）

{ "editor.codeActionsOnSave": { "source.fixAll": true, } }

4、最后重启一下vscode就可以了

下面介绍常用的代码格式化工具：

​

  1、Vetur：专门用于格式化 *.vue 文件

这个插件是 vscode 能优雅写 Vue 的核心，绝对的神器，它的优点：

代码高亮

代码片段

Emmet 语法支持

语法错误校验检查

格式化代码

代码提醒

对三方 UI 框架的支持

这里主要说说格式化代码相关，防止和 ESLint 打架。

从官方文档可以看出，Vetur集成了prettier，这就非常棒了。Vetur能够让 *.vue 文件中不同的块使用不同的格式化方案，<template>调用 html 格式化工具，<script>调用 JavaScript 格式化工具，<style>使用样式格式化工具。

下面是Vetur中默认的格式化工具

{ "vetur.format.defaultFormatter.html": "prettyhtml", "vetur.format.defaultFormatter.css": "prettier", "vetur.format.defaultFormatter.postcss": "prettier", "vetur.format.defaultFormatter.scss": "prettier", "vetur.format.defaultFormatter.less": "prettier", "vetur.format.defaultFormatter.stylus": "stylus-supremacy", "vetur.format.defaultFormatter.js": "prettier", "vetur.format.defaultFormatter.ts": "prettier", "vetur.format.defaultFormatter.sass": "sass-formatter" }

重要的是，这些工具已经集成！！！不需要额外下载了。

  2、Eslint：校验文件格式的标准（上文提到过的，也是我们项目正在使用的规则）

vscode 的 ESLint 插件在某个版本已经移除了 "eslint.validate" 这个配置选项，而网上很多教程都是使用的这个，导致一贴进 vscode 的配置文件，就开始保存和不兼容。

在新版的 ESLint 中已经支持了对 *.vue 文件的校验，所以无需再进行这项配置了，只需要添加一个保存时自动修复 ESLint 错误的功能就行了。

{ // eslint配置项，保存时自动修复错误 "editor.codeActionsOnSave": { "source.fixAll": true } }

  3、Prettier：和Vetur一样都是格式化工具，但Vetur虽好却只能作用于*.vue文件， *.js *.html文件则可以使用Prettier插件来进行格式化

这里做下简单配置，来让 Prettier 更好的和和 ESLint 配合。在项目的根目录建立  .prettierrc 文件，键入以下代码

{ "semi": false, // 去除语句结尾的分号 ; "singleQuote": true // 使用单引号 替代双引号 " }

同时建议在 vscode 的配置文件中加入以下代码：

{ // 保存时自动格式化代码 "editor.formatOnSave": true, // 默认使用prettier格式化支持的文件 "editor.defaultFormatter": "esbenp.prettier-vscode", // 指定 *.vue 文件的格式化工具为vetur，防止和prettier冲突 "[vue]": { "editor.defaultFormatter": "octref.vetur" }, // 指定 *.js 文件的格式化工具为vscode自带，以符合ESLint规范 "[javascript]": { "editor.defaultFormatter": "vscode.typescript-language-features" } }