使用ESLint保持代码干净

了解最流行的JavaScript linter的基础知识,这可以帮助使您的代码遵循一组特定的语法约定,检查该代码是否包含可能的问题根源,以及该代码是否与您或您的团队定义的一组标准相匹配

ESLint是一个JavaScript短毛绒。

什么是短绒棉?

好问题!短绒是识别代码中问题的工具。

对代码运行lint可以告诉您很多事情:

  • 如果代码遵循一组特定的语法约定
  • 如果代码包含可能的问题根源
  • 如果代码符合您或您的团队定义的一组标准

它将发出警告,提示您或您的工具可以分析并为您提供可操作的数据,以改进您的代码。

ESLint

ESLint是JavaScript编程语言的lint,用Node.js

它非常有用,因为JavaScript是一种解释型语言,没有编译步骤,而且很多错误只能在运行时发现。

ESLint将帮助您捕获那些错误。您特别问哪些错误?

  • 避免无限循环在里面for循环条件
  • 确保所有的getter方法都返回一些东西
  • 禁止console.log(和类似的)语句
  • 检查交换机中是否有重复的案例
  • 检查不可达的代码
  • 检查JSDoc的有效性

以及更多!完整列表可在以下位置获得:https://eslint.org/docs/rules/

越来越受欢迎更漂亮作为代码格式化程序,ESLint的样式部分已过时,但是ESLint在捕获代码中的错误和代码味道方面仍然非常有用。

ESLint非常灵活且可配置,您可以选择要检查的规则或要强制执行的样式。许多可用规则已被禁用,您可以在自己的计算机上将其打开.eslintrc配置文件,它可以是全局的或特定于您的项目的。

全局安装ESLint

使用npm

npm install -g eslint

# create a .eslintrc configuration file eslint --init

# run ESLint against any file with eslint yourfile.js

在本地安装ESLint

npm install eslint --save-dev

# create a .eslintrc configuration file ./node_modules/.bin/eslint --init

# run ESLint against any file with ./node_modules/.bin/eslint yourfile.js

在您喜欢的编辑器中使用ESLint

当然,ESLint的最常见用法是在您的编辑器中。

常见的ESLint配置

ESLint可以采用多种不同的方式进行配置。

Airbnb风格指南

常见的设置是使用Airbnb JavaScript编码风格整理您的代码。

yarn add --dev eslint-config-airbnb

或者

npm install --save-dev eslint-config-airbnb

安装Airbnb配置软件包,并添加您的.eslintrc文件放在您项目的根目录中:

{
  "extends": "airbnb",
}

反应

使用React插件可以轻松实现React代码:

yarn add --dev eslint-plugin-react

或者

npm install --save-dev eslint-plugin-react

在你的.eslintrc文件添加

{
  "extends": "airbnb",
  "plugins": [
      "react"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

使用特定版本的ECMAScript

ECMAScript现在每年都会更改版本。

当前默认设置为5,表示2015年前。

通过在以下位置设置此属性来打开ES6(或更高版本).eslintrc

{
  "parserOptions": {
    "ecmaVersion": 6,
  }
}

强制严格模式

{
  "parserOptions": {
    "ecmaFeatures": {
      "impliedStrict": true
    }
  }
}

更高级的规则

有关规则的详细指南,可以在以下官方网站上找到:https://eslint.org/docs/user-guide/configuring

在特定行上禁用规则

有时规则可能会带来误报,或者您可能明确地愿意采用ESLint标记的路由。

在这种情况下,您可以在以下几行中完全禁用ESLint:

/* eslint-disable */
alert('test');
/* eslint-enable */

或单行:

alert('test'); // eslint-disable-line

或只是针对多行禁用一个或多个特定规则:

/* eslint-disable no-alert, no-console */
alert('test');
console.log('test');
/* eslint-enable no-alert, no-console */

或单行:

alert('test'); // eslint-disable-line no-alert, quotes, semi

更多devtools教程: