“年轻人入门前端的第一课: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

根据自身或团队回答以下问题,选择你需要的风格配置,这里我选择一般格式的。

eslint怎么支持jsx eslint有什么用_配置文件

选择后会添加一些相关插件和生成一个.eslintrc.js的文件,这个文件就是通用的eslint配置文件,该文件中可以jia间接调用更多更具体的配置或配置文件,如图。第一种是使用默认标准配置,第二种是使用更为具体的配置文件。

 

eslint怎么支持jsx eslint有什么用_javascript_02

这里我们选择载入我们编写的具体文件。新建文件"public-eslintrc.js"

注意:这种配置或配置文件可以通过extends嵌套引用,规则是继承过来作为基础配置,后者覆盖前者。

eslint怎么支持jsx eslint有什么用_配置文件_03

具体文件内容:

eslint怎么支持jsx eslint有什么用_ci_04

配置文件官方说明: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后写一篇总结吧,以上。