eslint 代码格式_使用ESLint保持代码干净

eslint 代码格式

• What is linter?

  什么是短绒棉？

• ESLint

  ESLint

• Install ESLint globally

  全局安装ESLint

• Install ESLint locally

  在本地安装ESLint

• Use ESLint in your favourite editor

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

• Common ESLint configurations

  常见的ESLint配置

  • Airbnb style guide

    Airbnb风格指南

  • React

    React

  • Use a specific version of ECMAScript

    使用特定版本的ECMAScript

  • Force strict mode

    强制严格模式

  • More advanced rules

    更高级的规则

  Common ESLint configurations

  常见的ESLint配置

• Disabling rules on specific lines

  在特定行上禁用规则

ESLint is a JavaScript linter.

ESLint是一个JavaScript linter。

什么是短绒棉？ (What is linter?)

Good question! A linter is a tool that identifies issues in your code.

好问题！ linter是一种可识别代码中问题的工具。

Running a linter against your code can tell you many things:

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

• if the code adheres to a certain set of syntax conventions
  如果代码遵循一组特定的语法约定
• if the code contains possible sources of problems
  如果代码包含可能的问题根源
• if the code matches a set of standards you or your team define
  如果代码符合您或您的团队定义的一组标准

It will raise warnings that you, or your tools, can analyze and give you actionable data to improve your code.

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

ESLint (ESLint)

ESLint is a linter for the JavaScript programming language, written in Node.js.

ESLint是用Node.js编写JavaScript编程语言的一个模板。

It is hugely useful because JavaScript, being an interpreted language, does not have a compilation step and many errors are only possibly found at runtime.

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

ESLint will help you catch those errors. Which errors in particular you ask?

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

• avoid infinite loops in the for loop conditions

  避免for循环条件中的无限循环

• make sure all getter methods return something
  确保所有的getter方法都返回一些东西
• disallow console.log (and similar) statements
  禁止console.log(和类似的)语句
• check for duplicate cases in a switch
  检查交换机中是否有重复的案例
• check for unreachable code
  检查不可达的代码
• check for JSDoc validity
  检查JSDoc的有效性

and much more! The full list is available at https://eslint.org/docs/rules/

以及更多！ 完整列表可在https://eslint.org/docs/rules/获得。

The growing popularity of Prettier as a code formatter made the styling part of ESLint kind of obsolete, but ESLint is still very useful to catch errors and code smells in your code.

Prettier作为代码格式化程序的日益普及使ESLint的样式部分过时了，但是ESLint在捕获代码中的错误和代码味道方面仍然非常有用。

ESLint is very flexible and configurable, and you can choose which rules you want to check for, or which kind of style you want to enforce. Many of the available rules are disabled and you can turn them on in your .eslintrc configuration file, which can be global or specific to your project.

ESLint非常灵活且可配置，您可以选择要检查的规则或要强制执行的样式。 许多可用规则都被禁用，您可以在.eslintrc配置文件.eslintrc打开，该文件可以是全局的或特定于您的项目的。

全局安装ESLint (Install ESLint globally)

Using npm.

使用npm 。

npm install -g eslint

# create a `.eslintrc` configuration file
eslint --init

# run ESLint against any file with
eslint yourfile.js

在本地安装ESLint (Install ESLint locally)

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 (Use ESLint in your favourite editor)

The most common use of ESLint is within your editor of course.

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

常见的ESLint配置 (Common ESLint configurations)

ESLint can be configured in tons of different ways.

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

Airbnb风格指南 (Airbnb style guide)

A common setup is to use the Airbnb JavaScript coding style to lint your code.

常见的设置是使用Airbnb JavaScript编码样式来使您的代码更整齐。

Run

跑

yarn add --dev eslint-config-airbnb

or

要么

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

to install the Airbnb configuration package, and add in your .eslintrc file in the root of your project:

安装Airbnb配置包，并在项目根目录中添加.eslintrc文件：

{
  "extends": "airbnb",
}

React (React)

Linting React code is easy with the React plugin:

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

yarn add --dev eslint-plugin-react

or

要么

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

In your .eslintrc file add

在您的.eslintrc文件中添加

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

使用特定版本的ECMAScript (Use a specific version of ECMAScript)

ECMAScript changes version every year now.

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

The default is currently set to 5, which means pre-2015.

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

Turn on ES6 (or higher) by setting this property in .eslintrc:

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

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

强制严格模式 (Force strict mode)

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

更高级的规则 (More advanced rules)

A detailed guide on rules can be found on the official site at https://eslint.org/docs/user-guide/configuring

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

在特定行上禁用规则 (Disabling rules on specific lines)

Sometimes a rule might give a false positive, or you might be explicitly willing to take a route that ESLint flags.

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

In this case, you can disable ESLint entirely on a few lines:

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

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

or on a single line:

或单行：

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

or just disable one or more specific rules for multiple lines:

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

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

or for a single line:

或单行：

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

翻译自: https://flaviocopes.com/eslint/

eslint 代码格式