js代码规范之Eslint安装与配置详解


Posted in Javascript onSeptember 08, 2018

什么是 ESLint

ESLint(中文站点)是一个开源的 JavaScript 代码检查工具,使用 Node.js 编写,由 Nicholas C. Zakas 于 2013 年 6 月创建。ESLint 的初衷是为了让程序员可以创建自己的检测规则,使其可以在编码的过程中发现问题而不是在执行的过程中。ESLint 的所有规则都被设计成可插入的,为了方便使用,ESLint 内置了一些规则,在这基础上也可以增加自定义规则。

一、Eslint安装

1.全局安装

如果你想使 ESLint 适用于你所有的项目,建议全局安装 ESLint

$ npm install -g eslint

初始化配置文件

$ eslint --init

2.局部安装

$ npm install eslint --save-dev

初始化配置文件

$ ./node_modules/.bin/eslint --init

3.webpack中配置eslint

需要安装eslint-loader解析.eslint文件

{
    test: /\.(js|jsx|mjs)$/,
    enforce: 'pre',
    use: [
     {
      options: {
       formatter: eslintFormatter,
       eslintPath: require.resolve('eslint'),
       
      },
      loader: require.resolve('eslint-loader'),
     },
    ],
    include: paths.appSrc, //也可以用exclude排除不需要检查的目录或者用.eslintignore
},

二、ESlint配置

1.配置文件类型与优先级顺序

  • .eslintrc.js - 使用 .eslintrc.js 然后输出一个配置对象
  • .eslintrc.yaml - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
  • .eslintrc.yml
  • .eslintrc.json - 使用 .eslintrc.json 去定义配置的结构,ESLint 的 JSON 文件允许 JavaScript 风格的注释
  • .eslintrc(已弃用)
  • package.json - 在 package.json 里创建一个 eslintConfig属性,在那里定义你的配置

2.plugin属性

ESLint 支持使用第三方插件(以eslint-plugin-开头的npm包),在使用插件之前,必须使用 npm 安装。如eslint-plugin-react、eslint-plugin-vue等

module.exports = {
  "plugins": [
    "react"
  ],
  "extends": [
    "eslint:recommended"
  ],
  "rules": {
    "no-set-state": "off"
  }
}

3.extends属性

一个配置文件可以被基础配置中的已启用的规则继承。可以使用以下规则继承:

(1)"eslint:recommended"

继承Eslint中推荐的(打钩的)规则项

module.exports = {
  "extends": "eslint:recommended",
  "rules": {
    
  }
}

(2)使用别人写好的规则包(以eslint-config-开头的npm包),如eslint-config-standard

module.exports = {
  "extends": "standard",
  "rules": {
    
  }
}

(3)使用Eslint插件中命名的配置

module.exports = {
  "plugins": [
    "react"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "rules": {
    "no-set-state": "off"
  }
}

(4)使用"eslint:all",继承Eslint中所有的核心规则项

module.exports = {
  "extends": "eslint:all",
  "rules": {
    // override default options
    "comma-dangle": ["error", "always"],
    "indent": ["error", 2],
    "no-cond-assign": ["error", "always"],

    // disable now, but enable in the future
    "one-var": "off", // ["error", "never"]

    // disable
    "init-declarations": "off",
    "no-console": "off",
    "no-inline-comments": "off",
  }
}

4.rules属性(根据自己的需要进行配置)

(1)Eslint部分核心规则

"rules": {
    /**
    **这些规则与 JavaScript 代码中可能的错误或逻辑错误有关
    **/
    "for-direction":"error",//强制 “for” 循环中更新子句的计数器朝着正确的方向移动
    "getter-return":"error",//强制在 getter 属性中出现一个 return 语句
    "no-await-in-loop":"error",//禁止在循环中 出现 await
    "no-compare-neg-zer":"error",//禁止与 -0 进行比较
    "no-cond-assign":[//禁止在条件语句中出现赋值操作符
      "error",
      "always"
    ],
    "no-console":[//禁用 console
      "error"
//      { "allow": ["warn", "error"] }
    ],
    "no-constant-condition":"error",//禁止在条件中使用常量表达式
    "no-control-regex":"error",//禁止在正则表达式中使用控制字符
    "no-debugger":"error",//禁用 debugger
    "no-dupe-args":"error",//禁止在 function 定义中出现重复的参数
    "no-dupe-keys":"error",//禁止在对象字面量中出现重复的键
    "no-duplicate-case":"error",//禁止重复 case 标签
    "no-empty":"error",//禁止空块语句
    "no-empty-character-class":"error",//禁止在正则表达式中出现空字符集
    "no-ex-assign":"error",//禁止对 catch 子句中的异常重新赋值
    "no-extra-boolean-cast":"error",//禁止不必要的布尔类型转换
    "no-extra-parens":"error",//禁止冗余的括号
    "no-extra-semi":"error",//禁用不必要的分号
    "no-func-assign":"error",//禁止对 function 声明重新赋值
    "no-inner-declarations":"error",//禁止在嵌套的语句块中出现变量或 function 声明
    "no-invalid-regexp":"error",//禁止在 RegExp 构造函数中出现无效的正则表达式
    "no-irregular-whitespace":"error",//禁止不规则的空白
    "no-obj-calls":"error",//禁止将全局对象当作函数进行调用
    "no-prototype-builtins":"error",//禁止直接使用 Object.prototypes 的内置属性
    "no-regex-spaces":"error",//禁止正则表达式字面量中出现多个空格
    "no-sparse-arrays": "error",//禁用稀疏数组
    "no-template-curly-in-string":"error",//禁止在常规字符串中出现模板字面量占位符语法
    "no-unexpected-multiline":"error",//禁止使用令人困惑的多行表达式
    "no-unreachable":"error",//禁止在 return、throw、continue 和 break 语句后出现不可达代码
    "no-unsafe-finally":"error",//禁止在 finally 语句块中出现控制流语句
    "no-unsafe-negation":"error",//禁止对关系运算符的左操作数使用否定操作符
    "use-isnan":"error",//要求调用 isNaN()检查 NaN
    "valid-jsdoc":"error",//强制使用有效的 JSDoc 注释
    "valid-typeof":"error",//强制 typeof 表达式与有效的字符串进行比较
    /**
    **最佳实践
    **/
    "accessor-pairs":"error",//强制getter/setter成对出现在对象中
    "array-callback-return":"error",//强制数组方法的回调函数中有 return 语句
    "block-scoped-var":"error",//把 var 语句看作是在块级作用域范围之内
    "class-methods-use-this":"error",//强制类方法使用 this
    "complexity":"error"//限制圈复杂度
    .....
  }

(2)eslint-plugin-vue中的规则

'rules': {

    /* for vue */

    // 禁止重复的二级键名

    // @off 没必要限制

    'vue/no-dupe-keys': 'off',

    // 禁止出现语法错误

    'vue/no-parsing-error': 'error',

    // 禁止覆盖保留字

    'vue/no-reservered-keys': 'error',

    // 组件的 data 属性的值必须是一个函数

    // @off 没必要限制

    'vue/no-shared-component-data': 'off',

    // 禁止 <template> 使用 key 属性

    // @off 太严格了

    'vue/no-template-key': 'off',

    // render 函数必须有返回值

    'vue/require-render-return': 'error',

    // prop 的默认值必须匹配它的类型

    // @off 太严格了

    'vue/require-valid-default-prop': 'off',

    // 计算属性必须有返回值

    'vue/return-in-computed-property': 'error',

    // template 的根节点必须合法

    'vue/valid-template-root': 'error',

    // v-bind 指令必须合法

    'vue/valid-v-bind': 'error',

    // v-cloak 指令必须合法

    'vue/valid-v-cloak': 'error',

    // v-else-if 指令必须合法

    'vue/valid-v-else-if': 'error',

    // v-else 指令必须合法

    'vue/valid-v-else': 'error',

    // v-for 指令必须合法

    'vue/valid-v-for': 'error',

    // v-html 指令必须合法

    'vue/valid-v-html': 'error',

    // v-if 指令必须合法

    'vue/valid-v-if': 'error',

    // v-model 指令必须合法

    'vue/valid-v-model': 'error',

    // v-on 指令必须合法

    'vue/valid-v-on': 'error',

    // v-once 指令必须合法

    'vue/valid-v-once': 'error',

    // v-pre 指令必须合法

    'vue/valid-v-pre': 'error',

    // v-show 指令必须合法

    'vue/valid-v-show': 'error',

    // v-text 指令必须合法

    'vue/valid-v-text': 'error',
    
    //
    // 最佳实践
    //
    // @fixable html 的结束标签必须符合规定
    // @off 有的标签不必严格符合规定,如 <br> 或 <br/> 都应该是合法的

    'vue/html-end-tags': 'off',

    // 计算属性禁止包含异步方法

    'vue/no-async-in-computed-properties': 'error',

    // 禁止出现难以理解的 v-if 和 v-for

    'vue/no-confusing-v-for-v-if': 'error',

    // 禁止出现重复的属性

    'vue/no-duplicate-attributes': 'error',

    // 禁止在计算属性中对属性修改

    // @off 太严格了

    'vue/no-side-effects-in-computed-properties': 'off',

    // 禁止在 <textarea> 中出现 {{message}}

    'vue/no-textarea-mustache': 'error',

    // 组件的属性必须为一定的顺序

    'vue/order-in-components': 'error',

    // <component> 必须有 v-bind:is

    'vue/require-component-is': 'error',

    // prop 必须有类型限制

    // @off 没必要限制

    'vue/require-prop-types': 'off',

    // v-for 指令的元素必须有 v-bind:key

    'vue/require-v-for-key': 'error',
    
    //
    // 风格问题
    //
    // @fixable 限制自定义组件的属性风格
    // @off 没必要限制

    'vue/attribute-hyphenation': 'off',

    // html 属性值必须用双引号括起来

    'vue/html-quotes': 'error',

    // @fixable 没有内容时,组件必须自闭和

    // @off 没必要限制

    'vue/html-self-closing': 'off',

    // 限制每行允许的最多属性数量

    // @off 没必要限制

    'vue/max-attributes-per-line': 'off',

    // @fixable 限制组件的 name 属性的值的风格

    // @off 没必要限制

    'vue/name-property-casing': 'off',

    // @fixable 禁止出现连续空格

    // TODO: 李德广  触发 新版本 typeerror:get 'range' of undefined

    // 'vue/no-multi-spaces': 'error',

    // @fixable 限制 v-bind 的风格

    // @off 没必要限制

    'vue/v-bind-style': 'off',

    // @fixable 限制 v-on 的风格

    // @off 没必要限制

    'vue/v-on-style': 'off',

    // 定义了的 jsx element 必须使用

    'vue/jsx-uses-vars': 'error'

  }

(3)eslint-plugin-react中的规则

/**
    **react规则
    **/
    "react/boolean-prop-naming": ["error", { "rule": "^is[A-Z]([A-Za-z0-9]?)+" }],//bool类型的props强制固定命名
    "react/button-has-type": ["error", {"reset": false}],//强制按钮的type属性必须是"button","submit","reset"三者之一
    "react/default-props-match-prop-types": [2, { "allowRequiredDefaults": false }],//强制所有defaultProps有对应的non-required PropType
    "react/destructuring-assignment": [1, "always"],//强制将props,state,context解构赋值
    "react/display-name": [1, { "ignoreTranspilerName": false }],//react组件中强制定义displayName
    "react/forbid-component-props": [1],//禁止在自定义组件中使用(className, style)属性
    "react/forbid-dom-props": [1, { "forbid": ["style"] }],//禁止在dom元素上使用禁止的属性
    "react/forbid-elements": [1, { "forbid": ["button"] }],//禁止某些元素用于其他元素
    "react/forbid-prop-types": [1],//禁止某些propTypes属性类型
    "react/no-access-state-in-setstate":"error",//禁止在setState中使用this.state
    "react/no-children-prop":[1],//不要把Children当做属性
    "react/no-string-refs":[1],//不要使用string类型的ref
    "react/no-unused-state":[1],//不要在state中定义未使用的变量
    //.....
    "react/jsx-no-undef": [1, { "allowGlobals": false }],//不允许使用未声明的变量
    "react/jsx-key":[1]//遍历使用key

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 Javascript
Javascript非构造函数的继承
Apr 27 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
vuejs响应用户事件(如点击事件)
Mar 14 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
浅谈React Native 中组件的生命周期
Sep 08 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
JavaScript回调函数callback用法解析
Jan 14 Javascript
JS控制下拉列表左右选择实例代码
May 08 Javascript
Vue 同步异步存值取值实现案例
Aug 05 Javascript
vue弹窗插件实战代码
Sep 08 #Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 #Javascript
详解Webpack-dev-server的proxy用法
Sep 08 #Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 #Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 #Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 #Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 #jQuery
You might like
用php+javascript实现二级级联菜单的制作
2008/05/06 PHP
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
PHP return语句的另一个作用
2014/07/30 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
php cli配置文件问题分析
2015/10/15 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
PHP设计模式(五)适配器模式Adapter实例详解【结构型】
2020/05/02 PHP
潜说js对象和数组
2011/05/25 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
JavaScript模拟push
2016/03/06 Javascript
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
详解Webpack loader 之 file-loader
2018/11/07 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
django中的HTML控件及参数传递方法
2018/03/20 Python
Python数据可视化之画图
2019/01/15 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
酒店服务与管理毕业生求职信
2013/11/02 职场文书
留学推荐信怎么写
2014/01/25 职场文书
《口技》教学反思
2014/02/21 职场文书
2014民事授权委托书范本
2014/09/29 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
医院消毒隔离制度
2015/08/05 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python
delete in子查询不走索引问题分析
2022/07/07 MySQL