ESlint的使用

官方网站

eslint 官网
eslint-plugin-prettier 官网
lint-staged 官网
prettier 官网

安装

npm install eslint --save-dev

配合 prettier 安装

npm install eslint eslint-config-prettier eslint-plugin-prettier prettier --save-dev

初始化配置

./node_modules/.bin/eslint --init

或者

npx eslint --init

根据提示进行配置

$ npx eslint --init
You can also run this command directly using 'npm init @eslint/config'.
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · none
√ Which framework does your project use? · none
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · prompt
√ What format do you want your config file to be in? · JavaScript
√ What style of indentation do you use? · tab
√ What quotes do you use for strings? · double
√ What line endings do you use? · unix
√ Do you require semicolons? · No / Yes
A config file was generated, but the config file itself may not follow your linting rules.
Successfully created .eslintrc.js file in C:\ls-project03\miniprogr

运行 eslint --init 之后，.eslintrc 文件会在你的文件夹中自动创建

配合 prettier 的配置

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  // 添加 prettier 预设配置
 + extends: ["plugin:prettier/recommended"],
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  rules: {
  // prettier 错误变为警告
  +  "prettier/prettier": ["warn"],
  },
};

设置排除文件

.eslintignore

项目目录添加.eslintignore 文件,添加需要 eslint 排除的文件 默认排除 node_modules

node_modules

.prettierignore

项目目录添加.prettierignore 文件,添加需要 prettier 排除的文件 tip:prettier 默认排除 node_modules

node_modules

添加 npm 脚本

package.json

  "scripts": {
   + "lint": "prettier --write .",
   + "lint:js": "eslint --fix .",
  },

prettier --write . 修复项目目录下所有文件,``.prettierignore 会被排除

eslint --fix . 修复项目目录下所有 js 文件,``.eslintignore 会被排除

设置 commit 时自动 lint

安装 husky 和 lint-staged 并自动配置

npx mrm@2 lint-staged

修改 package.json

"lint-staged": {
   - "*.js": "eslint --cache --fix",
   // 使用 prettier 进行 lint
   +"*": "prettier --ignore-unknown --write"
  }