ECMAScriptESLint 介绍

ESLint.png

ESLint 是为此来检查我们描绘的 JavaScript
代码是否满足指定规则之静态代码检查工具。

由此用 ESLint 来检查有规则,我们可以:

  • 集合代码风格规则,如:代码缩进用几个空格;是否用驼峰命名法来命名变量和函数称等。
  • 调减不当, 如:相等比较必须用 ===
    ,变量在用前必须被声称,在标准化语句被未克动用赋值语句等。
  • 提高代码质量,如:函数最多生略条件分支;最多起几乎个参数,代码块最多会嵌套多少层等。
  • 别。如: 禁用 alert。这可增长用户体验,因为 alert
    框的外观不是那尴尬,而且多次与网站的品格不加,一般都见面于定义 alert
    框。

JSHint 和 JSLint 也是静态代码检查器,但 ESLint
比它们功能强大也重灵敏。

ESLint 是因此 Node.js 写的,可以透过 npm 来安装。ESLint 也可于
webpack(eslint-loader) 和 Gulp.js(gulp-eslint) 中使用。

在 webpack 中使用 ESlint

1 安装 ESLint 的依赖。

npm install  --save-dev eslint eslint-loader

2 在 webpack.config.js 加

module: {
  preLoaders: [
    {test: /\.js$/, loader: "eslint-loader", exclude: /node_modules/}
  ]
}

3 新建名为 .eslintrc 的文件。该公文之情节为对 ESLint
的配备。内容相近如下

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true
  },
  "parserOptions": {
    "ecmaVersion": 6
  },
  "rules": {
    "indent": ["error", 2],
    "no-mixed-spaces-and-tabs": "error"
    "camelcase": "error",
    "eqeqeq": "warn",
    "curly": "error",
    "no-undef": "error",
    "no-unused-vars": "warn",
    "max-params": "warn"
  }
}

其中

  • env 指定代码运行的条件。
  • parserOptions 指定 JavaScript 相关的选料项。ecmaVersion 指定用谁
    ECMAScript 的本,默认是 3 和 5。
  • rules 指定具体检查的条条框框。默认情况下,如果无安装检查的平整,ESLint
    不会见检查外规则。

重新详实的印证见官网的说明。

说明规则

说明规则是形容在 .eslintrc 文件中之 rules 下面的,如

"rules": {
  "indent": ["error", 2],
  "no-mixed-spaces-and-tabs": "error"
  "camelcase": "error"
}

安排一长条说明规则,这么形容

规则名: 值

价值好是以下几种

  • off 或 0:表示未说明规则。
  • warn 或 1:表示验证规则,当不满足时,给警告。
  • error 或 2 :表示验证规则,不饱时报错。

"eqeqeq": "error",
"camelcase": 2

假定规则来参数,则这样写

规则名: [值, 参数1, 参数2...]

"indent": ["error", 2]

广阔规则

  • indent: 代码缩进。参数有
    • 数字: 表示缩进的空格数。如 indent: ["error", 2]。默认值是4。
    • “tab”: 表示用 tab 来缩进
  • no-mixed-spaces-and-tabs: 代码缩进未可知混用空格和tab
  • camelcase: 变量,函数叫以驼峰命名法。参数有
    • “always”: 会检查属性名。是默认值。
    • “never”: 不反省属性名。
  • quotes: 字符串的引号。我所以配备是
    quotes: ["error", "single"]。具体见这里。
  • curly: 在 ifelse ifelsewhile
    的代码块被,即使就发生一行代码,也如因此写于 {} 中。
  • eqeqeq: 比较用 ===!==
  • no-cond-assign: 不在 if 中使赋值操作。
  • no-undef: 变量和函数在应用前必须先声明。全局变量或函数除外。
  • no-unused-vars:变量定义后会一定要是给利用。
  • no-alert: 代码不用 alert,confirm 和
    prompt。系统的弹出框比较丑,一般还为此由定义的弹奏出框。
  • max-params: 函数最多来几乎单参数。默认是3只。
  • max-statements: 函数最多发生略条语句。
  • max-depth:代码块被默认嵌套深度。

重新多之规则见官网的求证。

设认为温馨平长条配置规则太累,可以在 eslint 的默认推荐规则及召开修改,如

"extends": "eslint:recommended",// 启用 eslint 的默认推荐规
"rules": {
    // 新增的一些规则
    "indent": ["error", 4],
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "double"],
    "semi": ["error", "always"],

    // 覆盖一些规则的配置
    "comma-dangle": ["error", "always"],
    "no-cond-assign": ["error", "always"],

    // 禁用一些规则
    "no-console": "off",
}

也得以人家写好的相同堆积规则上修改

  • JavaScript Standard
    Style
  • Google
    Style
  • Airbnb
  • Shopify
  • XO

推介阅读

  • Awesome
    ESLint

正文遵守做共享CC BY-NC-SA
4.0商量

网络平台如需转载必须跟自我联系确认。