“年轻人入门前端的第一课:ESLint”。
代码规范是程序员的根本,入门第一步,从规范代码开始,而ESLint就是一款专门用于Javascript/ESscript代码一致性的“插件”,基于node.js,或者你可以看做是项目构建系统的一部分。它的根本目的是统一项目的代码风格规范,养成规范的写代码习惯,减少不必要的错误和隐患。
ESLint中文网:http://eslint.cn/
安装前如果是新创项目,请初始化package.json: npm init
全局安装: npm install -g eslint
项目安装: npm install eslint --save-dev
注意:
1.如果你想你所有项目都使用eslint,请全局安装;如果nixi你想当前项目使用,请局部安装。
2.局部安装时请使用--save-dev,因为eslint是适用于开发环境(Software Development Environment,SDE)的插件,qing请不要添加到生产环境中。
接下来需要初始化esLint: eslint --init
根据自身或团队回答以下问题,选择你需要的风格配置,这里我选择一般格式的。
选择后会添加一些相关插件和生成一个.eslintrc.js的文件,这个文件就是通用的eslint配置文件,该文件中可以jia间接调用更多更具体的配置或配置文件,如图。第一种是使用默认标准配置,第二种是使用更为具体的配置文件。
这里我们选择载入我们编写的具体文件。新建文件"public-eslintrc.js"
注意:这种配置或配置文件可以通过extends嵌套引用,规则是继承过来作为基础配置,后者覆盖前者。
具体文件内容:
配置文件官方说明:http://eslint.cn/docs/user-guide/configuring
1.extends继承官方推荐的规则
2.确定规则使用的环境(可略)
3.parserOptions属性配置,一般用于支持es6
4.parser,globals,plugins都可略
5.最重要的是"rule"属性,配置了我们需要的具体规则
ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用的规则。要改变一个规则设置,你必须将规则 ID 设置为下列值之一:
-
"off"
或0
- 关闭规则 -
"warn"
或1
- 开启规则,使用警告级别的错误:warn
(不会导致程序退出) -
"error"
或2
- 开启规则,使用错误级别的错误:error
(当被触发的时候,程序会退出)
官方规则:http://eslint.cn/docs/rules/
下面列举常见的规则供参考
rules: {
/* 缩进 */
"indent": ["error", 2],
/* 使用双引号 */
"quotes": ["error", "double"],
/* 禁止在条件表达式中使用赋值语句 */
"no-cond-assign": "error",
/* 禁止重复声明变量 */
"no-redeclare": "error",
/* 禁止使用var */
"no-var": "error",
/* 禁止使用with */
"no-with": "error",
/* 强制驼峰法命名 */
"camelcase" : "error",
/* 禁止行内注释 */
"no-inline-comments": "error",
/* 多行模式必须带逗号,单行模式不能带逗号 */
"always-multiline": "",
/* 一元运算符,前后空格 */
"space-unary-ops":["error", {"words": true, "nonwords": true}],
/* 必须使用全等 */
"eqeqeq": "error",
/* 数组元素间空格隔开(,后面) */
"array-bracket-spacing": ["error", "never"],
/* 块级作用域外访问块内变量 */
"block-scoped-var": "error",
/* 行尾逗号 */
"comma-style": ["error", "last"],
/* 数组或对象键值对,末尾的逗号 */
"comma-dangle": ["error", "never"],
/* 圈复杂度.一般为if-else */
"complexity": ["error", 6],
/* 强制一致函数声明 */
"func-style": "error",
/* 最大函数嵌套层数 */
"max-nested-callbacks": ["error", 4],
/* 逗号前后空格 */
"comma-spacing": ["error", {"before": false, "after": true}],
/* if while function 后面的{必须与if在同一行,java风格。java风格 */
"brace-style": ["error", "1tbs", {"allowSingleLine": false}],
/* 关键字前后一致的空格 */
"keyword-spacing": "error",
/* 单行最大长度,tab个数 */
"max-len": ["error", 80, 4],
/* 不允许空格和tab混合使用 */
"no-mixed-operators": "error",
/* 不允许多个空行 */
"no-mixed-spaces-and-tabs": "error",
/* 声明时必须赋初值 */
"init-declarations": "error",
/* 强制使用分好而不是ASI */
"semi": "error",
/* 允许声明但未使用的变量 */
"no-unused-vars": ["off", {"vars": "local", "args": "none"}],
/* 注释需以空格开头 */
"spaced-comment": "warn",
/* 禁止console */
"no-console": "warn",
/* 禁止三元运算符 */
"no-ternary": "warn",
/* return 后面是否允许省略:暂略 ??? */
"consistent-return": "warn",
/* 方法定义规范--在小程序里暂略 */
"func-names": ["off", "always"],
/* 禁止使用未定义的变量 */
"no-undef": "off"
}
注意,eslint的所有规则都是“可插拔式”的,根据具体的需要来进行修改。
当然新人很多时候不知道轻重,不知道要考虑哪些哪些要点,这个时候我们可以参考一些通用的标准,eslint一般提供了三个通用的标准给我们,还记得在eslint --init回答问题的第二个吗,选择的标准有Google,Airbnb,Standard,虽说可以偷懒使用standard,但我们也可以尝试下。
如果要单独安装可以选择去学习下号称“最严规范”的Airbnb/javascript https://github.com/airbnb/javascript
基本上eslint入门就这些了,后面我详细学习了Airbnb后写一篇总结吧,以上。