• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

ESLint教程,ESLint开发指南,ESLint中文使用手册,ESLint中文文档

JAVA web前端中文站 3年前 (2017-08-01) 1699次浏览 已收录 0个评论

百度了一下,发现关于 ESLint 的文章不是很多。而有的人已经使用很久了,希望通过本文在给大家普及一下 eslint 的相关知识。

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

ESLint 是什么?

ESLint 是一个 QA 工具,用来避免低级错误和统一代码的风格。

ESLint 教程,ESLint 开发指南,ESLint 中文使用手册,ESLint 中文文档

ESLint 被设计为完全可配置的,主要有两种方式来配置 ESLint:

  • 在注释中配置:使用 JavaScript 注释直接把配置嵌入到 JS 文件中。
  • 配置文件:使用下面任一的文件来为全部的目录和它的子目录指定配置信息。

下面这些文件的优先级则是按照以上出现的顺序(.eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json > .eslintrc > package.json)。

  • javascript:使用.eslintrc.js 文件并导出一个包含配置的对象。
  • YAML:.eslintrc.yaml 或者.eslintrc.yml
  • JSON:.eslintrc.json,并且此文件允许使用 JS 形式的注释
  • 废弃的用法:.eslintrc,此文件可以是 JSON 或者 YAML
  • package.json:在 package.json 文件中创建 eslintConfig 属性,所有的配置包含在此属性中。

可以被配置的信息主要分为 3 类:

  • Environments:你的 javascript 脚步将要运行在什么环境(如:nodejs,browser,commonjs 等)中。
  • Globals:执行代码时脚步需要访问的额外全局变量。
  • Rules:开启某些规则,也可以设置规则的等级。

ESLint 安装

 npm install -g eslint

如果你的项目还没有配置文件的话,可以通过指定–init 参数来生成一个新的配置文件:

 eslint --init

然后,配合命令行的 eslint 工具就可以检查代码了。

 eslint [options] file.js [file.js] [dir]

当然,也可以安装在项目中,然后配合编辑器的插件(如 vscode-eslint)来使用。

指定全局变量

可以在配置文件或注释中指定额外的全局变量,false 表明变量只读:

注释:

 /* global var1, var2 */ /* global var1:false, var2:false */

JSON:

 {   "globals": {       "var1": true,       "var2": false   } }

在配置文件中可以设置一些规则。
规则的错误等级有三种:

  • "off" 或者 0:关闭规则。
  • "warn" 或者 1:打开规则,并且作为一个警告(不影响 exit code)。
  • "error" 或者 2:打开规则,并且作为一个错误(exit code 将会是 1)。
 /* eslint eqeqeq: "off", curly: "error" */ /* eslint eqeqeq: 0, curly: 2 */

也可以在注释中关闭所有或者某个规则:

 /* eslint-disable */ /* eslint-enable */ /* eslint-disable no-alert, no-console */ /* eslint-enable no-alert, no-console */

具体的规则可以在官网上找到,或者使用别人写好的配置,例如 eslint-config-airbnb。

下面可以下载 demo,进入练习部分。

学习操作步骤

进入 demos/eslint-demo 目录,安装 ESLint。

 $ cd demos/eslint-demo $ npm install eslint --save-dev

通常,我们会使用别人已经写好的代码检查规则,这里使用的是 Airbnb 公司的规则。所以,还要安装 ESLint 这个规则模块。

 $ npm install eslint-plugin-import eslint-config-airbnb-base --save-dev

上面代码中,eslint-plugin-import 是运行这个规则集必须的,所以也要一起安装。

ESLint 的配置文件是.eslintrc.json,放置在项目的根目录下面。新建这个文件,在里面指定使用 Airbnb 的规则。

 {   "extends": "airbnb-base" }

4、打开项目的 package.json,在 scripts 字段里面添加三个脚本。

 {   // ...   "scripts" : {     "test": "echo /"Error: no test specified/" && exit 1",     "lint": "eslint **/*.js",     "lint-html": "eslint **/*.js -f html -o ./reports/lint-results.html",     "lint-fix": "eslint --fix **/*.js"   },   // ... }

除了原有的 test 脚本,上面代码新定义了三个脚本,它们的作用如下。

  • lint:检查所有 js 文件的代码
  • lint-html:将检查结果写入一个网页文件./reports/lint-results.html
  • lint-fix:自动修正某些不规范的代码

5、运行静态检查命令。

 $ npm run lint   1:5  error    Unexpected var, use let or const instead  no-var   2:5  warning  Unexpected console statement              no-console   2 problems (1 error, 1 warning)

正常情况下,该命令会从 index.js 脚本里面,检查出来两个错误:一个是不应该使用 var 命令,另一个是不应该在生产环境使用 console.log 方法。

6、修正错误。

 $ npm run lint-fix

运行上面的命令以后,再查看 index.js,可以看到 var x = 1;被自动改成了 const x = 1;。这样就消除了一个错误,但是还留下一个错误。

7、修改规则。

由于我们想要允许使用 console.log 方法,因此可以修改.eslintrc.json,改变 no-console 规则。请将.eslintrc.json 改成下面的样子。

 {   "extends": "airbnb-base",   "rules": {     "no-console": "off"   } }

再运行 npm run lint,就不会报错了。

【注:本文源自网络文章资源,由站长整理发布】

 $ npm run lint 

web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:ESLint 教程,ESLint 开发指南,ESLint 中文使用手册,ESLint 中文文档
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址