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,// 使用eslint插件时需要把此项设置为false
  "vetur.validation.script": true,//检查js代码
  "vetur.validation.style": true,//能检查css的属性是否存在,分隔符是否正确，
  "vetur.format.defaultFormatter.html": "js-beautify-html",

  //"prettier"
  "vetur.format.defaultFormatter.js": "prettier",

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

    "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": false,
  "prettier.tslintIntegration": false,
  "prettier.printWidth": 80,
  "prettier.tabWidth": 2,
  "prettier.semi": true,
  "prettier.singleQuote": true,
  "prettier.jsxSingleQuote": false,
  "prettier.trailingComma": "none",
  "prettier.bracketSpacing": true,
  "prettier.jsxBracketSameLine": false,
  "prettier.arrowParens": "avoid",

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个操作要一起使用，效果最佳。

转载于:https://my.oschina.net/u/4079668/blog/3016271