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和()之间不需要预留空格

       }

   }

 

你可能感兴趣的:(WEB前端知识点)