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個操做要一塊兒使用，效果最佳。