EditorConfig 和 ESLint 配合完善前端代码规范 ？

概念：

EditorConfig：主要用于维护多个编辑器和 IDE 从事同一项目的多个开发人员的一致编码风格。EditorConfig 项目包括一个用于定义编码样式的文件格式和一个文本编辑器插件集合，这些文本编辑器插件使编辑器可以读取文件格式并遵循定义的样式。

ESLint：是 js 的代码检查工具，在编写 js 代码的时候，有些错误很难被发现，需要在运行的时候不断的排错；而且每个人的编写代码的风格不一致，这样造成了阅读对方代码的困难；因此我们需要 eslint 在编写的过程发现错误，并统一风格。

二者对比

两者都可以对代码风格进行控制，侧重点不同，EditorConfig 更偏向于代码风格，定义和维护一致的编码风格。ESLint 侧重于检查 Javascript 编程语法错误，二者并不冲突，同时配合使用可以使代码风格更加优雅。

EditorConfig 使用

EditorConfig 插件支持很多编辑器，这里本人使用的是 vscode ，则在 vscode 中搜索安装其插件。然后在项目的根目录下创建 .editorconfig 配置文件，配置文件示例如下。

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 100

 ESLint 使用

编辑器中：同样的在 vsode 中搜索安装 ESLint 插件。在 vscode 扩展设置中，依次点击文件 -> 首选项 -> 设置中 settings.json 中修改默认配置，示例如下。

{
  "editor.formatOnType": true,
  "window.zoomLevel": 0,
  // 保存时自动fix
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.detectIndentation": false,
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html"
  },
  "eslint.validate": [
    "vue",
    "html",
    "javascript", //  用eslint的规则检测js文件 
  ],
  "files.eol": "\n",
  "editor.quickSuggestions": {
    "strings": true
  },
  "element-helper.quotes": "single",
  // 格式化插件的配置
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // "wrap_line_length": 100,
      "end_with_newline": true,
      "wrap_attributes_indent_size": 2,
      // 属性强制折行对齐 
      "wrap_attributes": "force",
    },
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/dist": true
  },
  "[css]": {
    "editor.suggest.insertMode": "replace"
  },
  "vetur.format.defaultFormatter": {
    "html": "js-beautify-html", //[js-beautify-html|prettyhtml|prettier]
    "css": "prettier",
    "postcss": "prettier",
    "scss": "prettier",
    "less": "prettier",
    "js": "vscode-typescript", // [vscode-typescript|prettier|none]
    "ts": "prettier",
    "stylus": "stylus-supremacy"
  },
  "files.associations": {
    "*.vue": "vue"
},
  // 文件头部注释
  //快捷键：crtl+alt+i（window）,ctrl+cmd+t (mac)
  "fileheader.customMade": {
    "Descripttion": "",
    "version": "1.0",
    "Author": "wuhao",
    "Date": "Do not edit",
    "LastEditors": "wuhao",
    "LastEditTime": "Do not Edit"
  },
  "javascript.preferences.quoteStyle": "single",
  "prettier.jsxSingleQuote": true,
  "prettier.singleQuote": true,
  "screencastMode.onlyKeyboardShortcuts": true,
  "timeline.excludeSources": [
    "git-history"
  ],
  "editor.minimap.enabled": true,
  "workbench.colorTheme": "Dracula",
  "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe",
  "liveServer.settings.donotShowInfoMsg": true,
  // "eslint.alwaysShowStatus": true,
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "settingsSync.ignoredExtensions": [],
  "explorer.confirmDelete": false,
"editor.formatOnPaste": true,
"[html]": {
    "editor.defaultFormatter": "HookyQR.beautify"
},
"html.format.enable": false,
"workbench.iconTheme": "material-icon-theme",
"vetur.ignoreProjectWarning": true,
"[javascript]": {
    "editor.defaultFormatter": "HookyQR.beautify"
},
}

项目中：在根目录下 .eslitrc.js 中，修改相应配置，示例如下，根目录下 .eslintignore 文件，忽略 ESLint 检测的文件。

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    '@vue/airbnb',
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-restricted-globals': ['error', 'event'],
    'no-param-reassign': ['error', { 'props': false }],
    'no-shadow': ['error', { 'allow': ['done', 'state'] }],
    "linebreak-style": [0 ,"error", "windows"],
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: 'babel-eslint',
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)',
      ],
      env: {
        jest: true,
      },
    },
  ],
};