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

前端之家收集整理的这篇文章主要介绍了js代码规范之Eslint安装与配置详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

什么是 ESLint

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

一、Eslint安装

1.全局安装

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

初始化配置文件

2.局部安装

初始化配置文件

3.webpack中配置eslint

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

二、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等

3.extends属性

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

(1)"eslint:recommended"

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

}
}

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

}
}

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

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

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

}

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

(1)Eslint部分核心规则

代码中可能的错误或逻辑错误有关 **/ "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中的规则

/* for vue */ // <a href="/tag/jinzhi/" target="_blank" class="keywords">禁止</a>重复的二级键名 // @off 没必要限制 'vue/no-dupe-keys': 'off',// <a href="/tag/jinzhi/" target="_blank" class="keywords">禁止</a>出现语法<a href="/tag/cuowu/" target="_blank" class="keywords">错误</a> 'vue/no-parsing-error': 'error',// <a href="/tag/jinzhi/" target="_blank" class="keywords">禁止</a>覆盖保留字 'vue/no-reservered-keys': 'error',// 组件的 data <a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>的值必须是一个<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a> // @off 没必要限制 'vue/no-shared-component-data': 'off',// <a href="/tag/jinzhi/" target="_blank" class="keywords">禁止</a> <template> 使用 key <a href="/tag/shuxing/" target="_blank" class="keywords">属性</a> // @off 太严格了 'vue/no-template-key': 'off',// render <a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>必须有返回值 'vue/require-render-return': 'error',// prop 的默认值必须匹配它的类型 // @off 太严格了 'vue/require-valid-default-prop': 'off',// 计算<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>必须有返回值 '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 的结束<a href="/tag/biaoqian/" target="_blank" class="keywords">标签</a>必须符合规定 // @off 有的<a href="/tag/biaoqian/" target="_blank" class="keywords">标签</a>不必严格符合规定,如 <br> 或 <br/> 都应该是合法的 'vue/html-end-tags': 'off',// 计算<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a><a href="/tag/jinzhi/" target="_blank" class="keywords">禁止</a>包含异步<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a> 'vue/no-async-in-computed-properties': 'error',// <a href="/tag/jinzhi/" target="_blank" class="keywords">禁止</a>出现难以理解的 v-if 和 v-for 'vue/no-confusing-v-for-v-if': 'error',// <a href="/tag/jinzhi/" target="_blank" class="keywords">禁止</a>出现重复的<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a> 'vue/no-duplicate-attributes': 'error',// <a href="/tag/jinzhi/" target="_blank" class="keywords">禁止</a>在计算<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>中对<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a><a href="/tag/xiugai/" target="_blank" class="keywords">修改</a> // @off 太严格了 'vue/no-side-effects-in-computed-properties': 'off',// <a href="/tag/jinzhi/" target="_blank" class="keywords">禁止</a>在 <textarea> 中出现 {{message}} 'vue/no-textarea-mustache': 'error',// 组件的<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>必须为一定的顺序 '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 限制<a href="/tag/zidingyi/" target="_blank" class="keywords">自定义</a>组件的<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>风格 // @off 没必要限制 'vue/attribute-hyphenation': 'off',// html <a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>值必须用双引号括起来 'vue/html-quotes': 'error',// @fixable 没有<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>时,组件必须自闭和 // @off 没必要限制 'vue/html-self-closing': 'off',// 限制每行允许的最多<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a><a href="/tag/shuliang/" target="_blank" class="keywords">数量</a> // @off 没必要限制 'vue/max-attributes-per-line': 'off',// @fixable 限制组件的 name <a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>的值的风格 // @off 没必要限制 'vue/name-property-casing': 'off',// @fixable <a href="/tag/jinzhi/" target="_blank" class="keywords">禁止</a>出现连续空格 // 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中的规则

属性必须是"button","submit","reset"三者之一 "react/default-props-match-prop-types": [2,{ "allowrequiredDefaults": false }],//强制所有defaultProps有对应的non-required PropType "react/destructuring-assignment": [1,//强制将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相关文章