首先确保已经安装了node和npm

一：创建项目：

如果没有，就先创建一个

npm init

这个初始化命令会在当前目录生成一个：package.json文件。此文件主要是用来记录项目的详细信息，包括依赖包、内部命令等等一切。我这个是一路回车下来的。

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

二：安装eslint

npm install eslint --save-dev

--save-dev 把依赖添加到 package.json 文件 devDependencies，这个是开发要用到的包

--save 添加到dependencies，这个是程序运行要用到的包

-g 全局安装，如果所有的项目都使用，建议全局安装

现在package.json就多了devDependencies

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "eslint": "^7.17.0"
  }
}

然后安装几个插件，如果有用到的话

#如果有用到ts
npm install --save-dev typescript @typescript-eslint/parser
npm install --save-dev @typescript-eslint/eslint-plugin
#如果有用到前端框架react
npm install eslint-plugin-react --save-dev

三：设置package.json的scripts

scripts就是脚本的意思，也就是你设置了，就可以在命令行执行你设置的脚本指令

这里添加lint和lint:create，你也可以用其他的名称

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint": "eslint app --fix",
    "lint:create": "eslint --init"
  }

 "lint:create": "eslint --init"：这个脚本是创建 .eslintrc.js文件，也就是eslint的配置文件
"lint": "eslint app --fix"：自动检测app目录下的所有.js文件，--fix是自动修复的意思，格式不满足，自动修复（不能百分百）

四：创建 .eslint.js 文件

npm run lint:create

这时候窗口会出现一系列问答的方式安装

How would you like to use ESLint? To check syntax, find problems, and enforce code style
What type of modules does your project use? JavaScript modules (import/export)
Which framework does your project use? None of these
Does your project use TypeScript? Yes
Where does your code run? Browser, Browser
What format do you want your config file to be in? JavaScript
Would you like to install them now with npm? Yes

选择橙色的然后回车，一路回车，也可以根据实际情况选择！

react报错，.eslint.js增加一段内容：

"settings": {
        "react": {
            "version": "detect"
        }
    }

五：用airbnb规则干

1：安装airbnb

https://www.npmjs.com/package/eslint-config-airbnb-base

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

 2：修改.eslint.js，因为我没有用到前端框架react和ts，所以这部分注释掉。

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended", //引入eslint的核心功能，并且报告一些常见的共同错误
        //"plugin:react/recommended", //启用对react语义支持
        //"plugin:@typescript-eslint/recommended",
        'airbnb-base' //引入 airbnb规则
    ],
    //指定解析器，ESLint 默认使用Espree作为其解析器
    //"parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        //"react",
        //"@typescript-eslint"
    ],
    // 个人自定义
    "rules": {
        "no-console": "off", //如果.eslint.js 选择的是浏览器，那么程序用console.log会警告，这里关闭
        "indent": ["error", 4] //4个空格缩进
    },
    /*"settings": {
        "react": {
            "version": "detect"
        }
    }*/
}; 

六：执行一下：

npm run lint

检查并格式化代码

参考：

1：https://www.yuque.com/cuggz/blog/od3iye

2：https://eslint.org/docs/rules/  eslint自定义规则