“This is the fifth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Hello, I’m Shanyue.

Eslint verifies code not only for style, but also for readability, security, and robustness.

As for the verification of semicolons and colons, they belong to the style verification and are related to personal style. They can follow the team standard and can be discussed and compromised.

// This is a style check
{
  semi: ['error'.'never']}Copy the code

Unlike prettier, ESLint is more about checking code robustness. Take an example.

  • Array.prototype.forEachDo not ask alsoA callback function return value is not recommended
  • Array.prototype.mapThe callback functionA new value must be returnedUsed to map

When code does not comply with these two requirements, esLint will report an error if it is verified by the following rules. Such verification is related to the robustness of the code and is not negotiable or compromised.

// This is code robustness verification
{
  'array-callback-return': ['error', { checkForEach: true}}]Copy the code

Rule

In ESLint, rules are used as the smallest Rule unit for verification code.

{
  rules: {
    semi: ['error'.'never']
    quotes: ['error'.'single', { avoidEscape: true}}}]Copy the code

In ESLint itself, there are plenty of rules built in, such as semicolons, colons, and commas.

Eslint rules source code location

Eslint does not provide Rules for typescript, React, etc.

Plugin

React, typescript, flow, etc., need to create their own Rules, which are called plugins. They maintain a series of Rules.

Naming starts with eslint-plugin- and is published in the NPM repository, while executing rules that start with react/, flow/, etc.

{
  'react/no-multi-comp': [error, { ignoreStateless: true}}]Copy the code
  • React ESLint Rules
  • TypeScript ESLint Rules

Config

You need to configure a variety of self-adapted rules and plug-ins, called Config, in third-party libraries and corporate business projects.

  1. Published as a library, named withelint-config-Start, and post innpmIn the warehouse.
  2. To serve the project, in the project.eslintrcNamed or placed in the project package.jsoneslintConfigField, the second option is recommended.
  • eslint-config-react-app
  • eslint-config-airbnb

The following is the outermost configuration of eslint-config-Airbnb.

module.exports = {
  extends: [
    'eslint-config-airbnb-base'.'./rules/react'.'./rules/react-a11y',
  ].map(require.resolve),
  rules: {}}Copy the code

In our actual company project, there’s no need to reinvent the wheel, just the extends in the configuration file inherits those nice ESLint-Config.