vue进阶笔记（一）vue使用eslint和自动fix

最近重构项目，找到了eslint自动fix的方法遂想大展身手，结果放开规则校验瞬间出现了上千个error。只能慢慢摸索用了将近一天的时间和各类大招摆平了这个问题，下面步入正题：

首先确认安装了vue-cli

npm install vue-cli -g
复制代码

或者体验一把vue-cli 3.0

npm install @vue/cli -g
复制代码

接下来建立一个vue项目

vue init webpack studyEslint
复制代码

选择你想用的代码规范

接下来看看项目中跟eslint有关的地方

脚手架生成的有三个eslint的配置文件

.editorconfig

此文件的做用是为了防止团队协做时你们所用ide不一样致使代码规范不一样每次合并代码时带来大量的并无变化的代码合并和没必要要的冲突。 安装插件(webstorm 跳过) 此处以 VS Code 为例

去商店中搜索 EditorConfig for VS Code 进行安装，这样 VS Code 就会优先根据项目根目录的.editorconfig 文件对缩进之类风格进行配置，覆盖 VS Code 默认配置。

EditorConfig 插件会从文件所在目录开始逐级向上查找 .editorconfig，直到到达根目录或者找到包含属性 root=true 的 .editorconfig 文件为止。

当找到全部知足条件的 .editorconfig 配置文件后，插件会读取这些配置文件的内容，距离文件路径最短的配置文件中的属性优先级最高，同一个文件按照从上到下方式读取，底部定义的同名属性优先级要高于顶部定义的。

大部分编辑器都有这个插件，即便团队成员使用不一样的 IDE，也能够很好的统一代码风格。

只要保证.editorconfig 这个文件一直便可

root = true                     // 表示当前是项目根目录

[*]                             // 全部文件都使用配置
charset = utf-8                 // 编码格式
indent_style = space            // Tab键缩进的样式，由space和table两种 通常代码中是space
indent_size = 2                 // 缩进size为2
end_of_line = lf                // 以lf换行 默认win为crlf mac和linux为lf
insert_final_newline = true     // 末尾加一行空行
trim_trailing_whitespace = true // 去掉行尾多余空格
复制代码

.eslintignore

此文件是eslint忽略文件配置，配置到此文件的文件文件夹都会被eslint的检测规则忽略

/build/
/config/
/dist/
/*.js
/test/unit/coverage/
复制代码

接下来是最核心的.eslintrc.js

下面是vue模版的默认配置

// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
  // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
  extends: ['plugin:vue/essential', 'airbnb-base'],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // check if imports actually resolve
  settings: {
    'import/resolver': {
      webpack: {
        config: 'build/webpack.base.conf.js'
      }
    }
  },
  // add your custom rules here
  rules: {
    // don't require .vue extension when importing 'import/extensions': ['error', 'always', { js: 'never', vue: 'never' }], // disallow reassignment of function parameters // disallow parameter object manipulation except for specific exclusions 'no-param-reassign': ['error', { props: true, ignorePropertyModificationsFor: [ 'state', // for vuex state 'acc', // for reduce accumulators 'e' // for e.returnvalue ] }], // allow optionalDependencies 'import/no-extraneous-dependencies': ['error', { optionalDependencies: ['test/unit/index.js'] }], // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' } } 复制代码

此内容中需重点关注env,这里能够配置开发环境内容，例如：

env: {
    browse: true,
    node: true
}
复制代码

plugin是配置咱们须要用到的一些插件， 还有一个对象是globals，用来配置全局变量是否可变同时也有声明的做用（亲测）：

globals:{
    ping: true,
    var1: false
}
复制代码

这样就解决了引用第三方库而后使用里面的方法没有声明报错的问题，true是代码此全局变量能够修改，false表明不可修改。

最后是rules，这里配置了你的个性化规则，你可能以为有些规范太严格或者不太须要那能够在这里修改校验规则，报错等级或者直接关掉。 ESLint 附带有大量的规则。你可使用注释或配置文件修改你项目中要使用的规则。要改变一个规则设置，你必须将规则 ID 设置为下列值之一：

• "off" 或 0 - 关闭规则
• "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会致使程序退出)
• "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

这是全局的设置办法，也能够在文件中用注释的办法：

/*eslint getter-return: "error"*/
复制代码

这样就能修改此文件中的这个校验规则。

重点----自动fix

此处以vscode为例，安装eslint的插件，修改vscode的配置文件

"eslint.enable": true,
"eslint.autoFixOnSave": true,
"eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
"editor.wordWrap": "wordWrapColumn",
"editor.formatOnSave": true,
复制代码

里面配置了一个80字符长度自动换行的规则。

能够配合prettier插件一块儿使用，vscode配置文件能够配置

"prettier.eslintIntegration": true,
复制代码

⚠️我的不建议将prettier的校验规则配置到eslint和airbnb或者standard的规则一块儿使用，这样有冲突！有冲突！有冲突！prettier听从的是google的规范。

如需了解更多的eslint的知识请访问 eslint中文