宜宾网站建设公司

eslint中三大通用规则的示例分析

这篇文章主要介绍了eslint中三大通用规则的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

专业领域包括网站建设、网站制作、商城网站建设、微信营销、系统平台开发， 与其他网站设计及系统开发公司不同，创新互联建站的整合解决方案结合了帮做网络品牌建设经验和互联网整合营销的理念，并将策略和执行紧密结合，为客户提供全网互联网整合方案。

安装

可以全局安装，也可以在项目下面安装。 如下是在项目中安装示例，只需要在 package.json 中添加如下配置，并进行安装： >"eslint": "^4.11.0"

配置

配置方式有两种，但建议使用文件配置的形式，比较独立，便于维护。 使用文件配置的方式：在项目的根目录下，新建一个名为 .eslintrc 的文件，在此文件中添加一些检查规则。

文件配置方式

env：你的脚本将要运行在什么环境中

Environment可以预设好的其他环境的全局变量，如brower、node环境变量、es6环境变量、mocha环境变量等

'env': {
  'browser': true,
  'commonjs': true,
  'es6': true
 },

globals：额外的全局变量

globals: {
  vue: true,
  wx: true
 },

rules：开启规则和发生错误时报告的等级

规则的错误等级有三种：

  • 0或'off'：关闭规则。

  • 1或'warn'：打开规则，并且作为一个警告（并不会导致检查不通过）。

  • 2或'error'：打开规则，并且作为一个错误 (退出码为1，检查不通过)。

参数说明：

  • 参数1 ： 错误等级

  • 参数2 ： 处理方式

配置代码注释方式

有时我们可能要在代码中忽略eslint的某种检查，或者加入某种特定检查，此时我们可以用如下的方式：

示例：

忽略 no-undef 检查
/* eslint-disable no-undef */

忽略 no-new 检查
/* eslint-disable no-new */

设置检查
/*eslint eqeqeq: off*/ /*eslint eqeqeq: 0*/

eslint 检查指令

检查且修复
eslint * --fix

检查指定文件
eslint app.js --fix

eslint官方提供了3种预安装包：

1、eslint-config-google

Google标准

执行安装：

npm install eslint eslint-config-google -g

2、eslint-config-airbnb

Airbnb标准,它依赖eslint, eslint-plugin-import, eslint-plugin-react, and eslint-plugin-jsx-a11y等插件，并且对各个插件的版本有所要求。

你可以执行以下命令查看所依赖的各个版本：

npm info "eslint-config-airbnb@latest" peerDependencies

你会看到以下输出信息，包含每个了每个plugins的版本要求

{ eslint: '^3.15.0',
 'eslint-plugin-jsx-a11y': '^3.0.2 || ^4.0.0',
 'eslint-plugin-import': '^2.2.0',
 'eslint-plugin-react': '^6.9.0' }

知道了每个plugins的版本要求后，代入以下命令执行安装即可使用：

npm install eslint-config-airbnb eslint@^#.#.# eslint-plugin-jsx-a11y@^#.#.# eslint-plugin-import@^#.#.# eslint-plugin-react@^#.#.# -g

3、eslint-config-standard

Standard标准，它是一些前端工程师自定的标准。

执行安装：

npm install eslint-config-standard eslint-plugin-standard eslint-plugin-promise -g

感谢你能够认真阅读完这篇文章，希望小编分享的“eslint中三大通用规则的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!


分享名称：eslint中三大通用规则的示例分析
网站URL：http://hbruida.cn/article/jsoocp.html

其他资讯