Front-end code specification - 2 minutes to teach you to use eslint in nodejs to customize team code specification

What is ESlint?

The official website says so:

ESLint is a configurable JavaScript Liner. It helps you find and fix problems in your JavaScript code. The problem can be anything from a potential runtime error, to not following best practices, to a style issue.

Core idea

rule

ESLint includes hundreds of built-in rules that you can use. You can also create custom rules or use rules created by others through plugins

configuration file

Put ESLint configuration in your project.

Format of the configuration file

ESLint supports configuration files in several formats:

JavaScript - Use .eslintrc.js and export an object containing your configuration.
JavaScript (ESM) - .eslintrc.cjs is used when running ESLint in a JavaScript package that specifies "type": "module" in package.json. Note that ESLint currently does not support ESM configuration.
YAML - Use .eslintrc.yaml or .eslintrc.yml to define configuration structures.
JSON - Use .eslintrc.json to define configuration structures. ESLint's JSON files also allow JavaScript-style comments.
package.json - Create an eslintConfig property in your package.json file and define your config there.

If there are multiple configuration files in the same directory, ESLint will only use one. The order of priority is as follows:

.eslintrc.js
.eslintrc.cjs
.eslintrc.yaml
.eslintrc.yml
.eslintrc.json
package.json

CLI and Node.js API

ESLint CLI is a command line interface with various options that can be passed to its commands.
The ESLint Node.js API allows you to use ESLint programmatically from your Node.js code.

other core concepts

shareable-config - ESLint configuration shared via npm.
ESLint plugin - npm module that can contain a set of ESLint rules, configurations, processors and environments
ESLint parser - converts code into an abstract syntax tree that ESLint can evaluate
Custom Processors - Extract JavaScript code from other types of files and let ESLint run checks on the JavaScript code
ESLint formatter

How to use ESlint?

This article takes the nodejs project as an example:

install eslint

npm i eslint -D

Use the command to automatically generate the .eslintrc file

 .\node_modules\.bin\eslint --init

Or use the following command to configure

npm init @eslint/config

Select configuration items as needed

The .eslintrc.js file is automatically created successfully

According to my nodejs project configuration, the automatically created .eslintrc.js looks like this

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "rules": {
    }
}

The code specification has taken effect

Common configuration

module.exports = {
    // 默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录。"root": true，它就会停止在父级目录中寻找
    root: true,
    "env": { // 预定义的全局变量
        "browser": true,
        "commonjs": true,
        "es2021": true,
        "node": true
    },
    // 一个配置文件可以被基础配置中的已启用的规则继承
    "extends": "eslint:recommended",// 继承推荐的规则
    // 为特定类型的文件指定处理器
    "overrides": [
    ],
    // 指定你想要支持的 语言选项
    "parserOptions": {
        "ecmaVersion": "latest"// ecma 最新
    },
    "rules": { // 0:off 关闭规则,1:warn 开启规则，展示警告,2:error 开启规则 展示错误，触发程序退出
        "no-unused-vars": 0,// 未使用的变量报错，关闭
        'no-debugger': 'off',
        'no-console': 'off',
        "indent": [2],/* 内部缩进2个空格，属性间隔开1个空格，自动对其属性缩进 */
        "array-bracket-spacing": [2,"never"],// 数据中不能存在空格
        "comma-dangle": [2,'never'],// 禁止末尾逗号
        "key-spacing": 2, // 对象键值对前后的空格
        "block-spacing": 2,
        "keyword-spacing": 2,// 关键字周围的空格
        "no-multi-spaces": 2,// 禁止多余的空格
        "arrow-spacing": 2,// 箭头函数的空格
        "space-infix-ops": 2, // 操作符左右的空格
        "space-unary-ops": [2,{ "words": true, "nonwords": false }],// 一元操作符的空格
        "spaced-comment": [2,"always"],// 注释语句前的空格
        "template-tag-spacing": [2,'always'],// 模板标记和它们的字面量之间有空格
        "object-curly-spacing": [2,'always'],// 强制在花括号中使用一致的空格
        "no-whitespace-before-property": 2,// 禁止属性前有空白
        "comma-spacing": 2
    }
}

to be added

I will write here today~
Friends, (￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ See you tomorrow~~
Everyone be happy every day

Everyone is welcome to point out where the article needs to be corrected~
Learning is endless, cooperation is win-win

insert image description here