eslint进阶篇，配合eslint for vs code ，提升vue开发效率。

VScode格式化vue 文件和通用文件

一套比较通用的配置，一次性统一js vue style html 的风格。而且拥有优秀的提示。 一次配置全局使用

1. 安装3个vscode 插件

1. ESlint （插件提供优秀的提示系统：直接在界面显示，而且将eslint扩展到vue文件）

2. vetur （提供了vue模板文件的格式化功能，格式和.vue中的html,js, style,全部格式化规则都是基于prettier）

3. prettier - Code formatter （主要用来格式化.js .html .css及其余样式文件 ）

   备注：vetur和prettier 插件都集成了"prettier-eslint",		
      prettier-eslint 的做用：代码先通过prettier 编译后再通过eslint 修复，能够保证格式化的代码不会出现eslint报错。

2. 配置vscode

将如下配置添加到vscode 的配置文件

ESlint规则

//eslint 配置
    "eslint.enable": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        },
    ],
    "eslint.options": {
	//这里定义的规则会合而且覆盖相同的.eslintrc文件的配置。
	//可是"prettier-eslint"只会根据.eslintrc文件生成格式化规则
        "rules": {
        
        }
    },
    "eslint.autoFixOnSave": false,

//vetur 通用配置
  //vetur 只对.vue文件起做用
  "vetur.validation.template": false,
  "vetur.validation.script": false,
  "vetur.validation.style": true,
  "vetur.format.defaultFormatter.html": "js-beautify-html",

  //"prettier-eslint"根据lint的文件所在的目录的.eslintrc文件肯定格式化规则
  "vetur.format.defaultFormatter.js": "prettier-eslint",

  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      //"prettier"默认配置 规则文档https://prettier.io/docs/en/options.html
      "tabWidth": 2,
      "useTabs": false,
      "printWidth": 80, //行长
      "semi": true, //分号,默认为true
      "singleQuote": false, //单引号
      "trailingComma": "none", //逗号
      "bracketSpacing": true, //Print spaces between brackets in object literals.
      "proseWrap": "never", //<always|never|preserve>"
      "endOfLine": "auto"
    },

    "js-beautify-html": {
      //"js-beautify-html"默认配置 规则文档https://github.com/beautify-web/js-beautify
      "indent_size": 2,
      "indent_char": " ",
      "indent_with_tabs": false,
      "editorconfig": false,
      "eol": "\n",
      "end_with_newline": false,
      "indent_level": 0,
      "preserve_newlines": true,
      "max_preserve_newlines": 1,
      "space_in_paren": false,
      "space_in_empty_paren": false,
      "jslint_happy": false,
      "space_after_anon_function": false,
      "space_after_named_function": false,
      "brace_style": "collapse",
      "unindent_chained_methods": false,
      "break_chained_methods": false,
      "keep_array_indentation": false,
      "unescape_strings": false,
      "e4x": false,
      "comma_first": false,
      "operator_position": "before-newline",
      "unformatted": [], // Tags that shouldn't be formatted. Causes mis-alignment
      "wrap_line_length": 0, // Lines should wrap at next opportunity after this number of characters (0 disables)
      "wrap_attributes": "force-expand-multiline"
      // Wrap attributes to new lines [auto|force|force-aligned|force-expand-multiline] ["auto"]
    }
  },

//prettier  配置
  //prettier 规则文档https://prettier.io/docs/en/options.html
  "prettier.disableLanguages": ["vue"],
  "prettier.eslintIntegration": true,
  "explorer.confirmDelete": false

3.Eslint设置快捷键

插件提供了一个 --fix 的快捷命令，设置到快捷键上。 。
打开vscode 的快捷键设置面板搜索"eslint",找到"fix all auto-fixable" ，设置快捷键，我设置的是shift+alt+s。

4. 全局安装eslint 用而且配置.eslintrc.js 文件

1. 在用户根目录配置全局 .eslintrc.js 文件 ，好比：

module.exports = {
  root: true,
  env: {
    node: true,
    es6: true
  },
  extends: [
     "eslint:recommended"，//通用配置
    // 'plugin:vue/essential',//vue配置
   // '@vue/standard'，//vue配置
	],
  rules: {
  },
  parserOptions: {
    parser: "babel-eslint"
  }
};

以上的配置文件时全局通用的，用于对通用的文件作格式化和lint处理。 处理vue文件时请开启注释了vue的配置。

---

5 大功告成，多种有文件的代码规范都一致了。

操做1：shift+alt+s 修复eslint错误

操做2：shift+alt+f 格式化文件

2个操做要一块儿使用，效果最佳。