eslintrc.js配置文件详解及参考文档

 公司最近引入vue框架，跟着视频学习eslint配置规则，特将项目使用配置及其结合网上资料做了整理，当做笔记，并行希望能帮助到其他人。

一.eslint配置文件主要作用

      [1]检测代码合法性(JavaScript、JSX、ES6、Html、JSDoc、posts、vue、React、AngularJS、React Native、mocha)

      [2]代码格式化(按照eslint配置文件的规范设置)

二.eslint参考文档

      [1]英文版：https://eslint.org/docs/user-guide/configuring

      [2]中文版：http://eslint.cn/docs/rules/

三.其他标准参考文档：

    [1]标准js语法规则：https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style

    [2]import插件规则:https://github.com/benmosher/eslint-plugin-import

四.其他参考文档(在此表示感谢)：

    [1]rule常用规则实例：https://blog.csdn.net/weixin_38606332/article/details/80864381

    [2]eslint配置详细介绍：https://blog.csdn.net/q3254421/article/details/86477502

五.实例解析：

module.exports = {

    root: true, //指定配置文件根目录：表示当前文件为eslint的根配置文件，逐层查找时无需往更上一级的文件目录中进行搜索

    parser: 'babel-eslint',//指定eslint解析器：babel-eslint是围绕Babel解析器的包装器使其与ESLint兼容；可能值espree、esprima

    parserOptions: { //eslint解析器配置项

        sourceType: "module",//指定js的导入方式，module是指通过模块导入，默认值为script(表示通过script标签引入)

    },

    env: { //运行环境极其局全局变量

       browser: true, //浏览器环境

    },

    plugins: [//提供插件

       'html' //插件名称，省略了[eslint-plugin-]前缀，表示规范html

   ],

    extends: 'airbnb-base', //规则继承：airbnb-base包含了JS、Es6的语法检查要依赖于[eslint-pugin-import]；另一个值standard表示使用标准的js语法规则

    settings: { //添加共享规则参数,会提供给每一个规则，但是规则使不使用，看规则的设置

        'import/resolver': {

               webpack: { //解析webpack配置项，路径为bulid/webpack.base.conf.js

                  config: 'bulid/webpack.base.conf.js'

              }

       }

    },

   /* 自定义规则

    * 单条规则语法："规则名称":[规则值，规则配置] 或者 "规则名称":值

    * 基本规则值：off/0:关闭规则(不满足规则也不会提醒或者抛出异常)； warn/1:开启警告规则(若不满足规则不会影响代码)；                                   error/2:开启错误规则(若不满足规则会退出代码)

   */

    rule: { //具体规则

        /* XXX/AAA: 表示xxx插件自定义的规则，省略了[eslint-plugin]前缀*/

       'import/extension': ['error','always',{ //是[eslint-plugin-import]自定义规则

              js: 'never',

             vue: 'never',

       }],

       'import/no-extraneous-dependencies': ['error',{

             optionalDependencies:['test/unit/index.js']

       }],

      'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, //生产环境禁止使用debug模式

      'no-empty': 2, //禁止出现空语句块

      'generator-start-spacing': 0, //生成器函数*的前后空格

      'indent': 0, //缩进配置，0表示使用编辑器自带的格式化缩进

      'semi': ['error','always'], //语句强制分号，若没有分号则报错

      'space-before-function-parent': 0, //在function和()之间不需要预留空格

       }

   }