“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.forEach
Do not ask alsoA callback function return value is not recommendedArray.prototype.map
The 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.
- Published as a library, named with
elint-config-
Start, and post innpm
In the warehouse. - To serve the project, in the project
.eslintrc
Named or placed in the project package.jsoneslintConfig
Field, 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.