十分钟了解在项目中配置eslint

创建一个目录，npm init -y 初始化， 创建src目录，src下增加index.js文件。

概念

eslint 不仅支持语法上的校验，同时也支持格式上的校验.

项目中如何添加eslint

1、安装eslint、eslint-loader

npm install eslint eslint-loader --save-dev

2、用pnpm eslint --init去生成文件

You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
@eslint/create-config@0.4.6
Ok to proceed? (y) y
√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ What format do you want your config file to be in? · JSON
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest eslint-plugin-react@latest @typescript-eslint/parser@latest
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · pnpm
Installing @typescript-eslint/eslint-plugin@latest, eslint-plugin-react@latest, @typescript-eslint/parser@latest
 WARN  deprecated eslint-loader@4.0.2: This loader has been deprecated. Please use eslint-webpack-plugin
Packages: +126
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 248, reused 200, downloaded 48, added 126, done

devDependencies:
+ @typescript-eslint/eslint-plugin 7.2.0
+ @typescript-eslint/parser 7.2.0
+ eslint-plugin-react 7.34.0

 WARN  Issues with peer dependencies found
.
├─┬ @typescript-eslint/eslint-plugin 7.2.0
│ ├── ✕ missing peer typescript@"*"
│ └─┬ @typescript-eslint/type-utils 7.2.0
│   ├── ✕ missing peer typescript@"*"
│   └─┬ @typescript-eslint/typescript-estree 7.2.0
│     ├── ✕ missing peer typescript@"*"
│     └─┬ ts-api-utils 1.3.0
│       └── ✕ missing peer typescript@>=4.2.0
├─┬ @typescript-eslint/parser 7.2.0
│ └── ✕ missing peer typescript@"*"
└─┬ eslint-loader 4.0.2
  ├── ✕ missing peer webpack@"^4.0.0 || ^5.0.0"
  └── ✕ unmet peer eslint@"^6.0.0 || ^7.0.0": found 8.57.0
Peer dependencies that should be installed:
  typescript@>=4.2.0          webpack@"^4.0.0 || ^5.0.0"

The integrity of 1562 files was checked. This might have caused installation to take longer.
Done in 24.7s
Successfully created .eslintrc.json file in D:\HHJtEST\hhj_test

因为我们选择了项目中使用typescript,所以我们还需要额外下载typescript,webpack依赖(pnpm install typescript,webpack --save-dev)

pnpm eslint之后你就会发现package.json中自动下载了这些依赖

  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "eslint": "^8.57.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-react": "^7.34.0"
  }

.eslintrc.json文件

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:react/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint",
        "react"
    ],
    "rules": {
    }
}

3、我们还需要在package.json中配置脚本指令，给我们的Eslint配置指令

  "scripts": {
    "eslint": "eslint src"
  },

我们现在就可以用 pnpm eslint 去对我们的代码进行修复校验了。

打包代码的时候自动校验

上述的操作只是用命令去校验代码，那打包的时候自动对代码进行修复校验怎么弄呢，这个时候就需要用到eslint-loader 1、webpack7配置eslint-loader

      {
        enforce: 'pre',
        test: /\.js$/i,
        loader: 'eslint-loader',

        exclude: /node_modules/
      },

运行项目中如果遇到报错，报错信息为

TypeError: Cannot read properties of undefined (reading 'getFormatter')

是Eslint和eslint-loader版本不一致导致的，将eslint版本改成“7.32.0”, eslint-loader的版本为 "4.0.2" 原因是：eslint8是用 eslint-webpack-plugin插件去实现校验的，而eslint7是用eslint-loader去实现校验的。 在这里我们用eslint7去实现。

这样项目中打包的时候就会支持eslint校验了，eslint校验不通过的时候会打包不成功并控制台打印错误信息。 2、webpack8 配置 eslint-webpack-plugin

vscode支持校验代码

上述操作是打包的时候去校验代码，如果能保存之后校验代码，提示错误的语法，对敲代码的速度提升不少。 1、vscode下载eslint插件 2、配置

 "editor.formatOnSave": true,
 "eslint.enable": true,

项目中如何支持typescript

1、安装typescript、ts-loader

npm install typescript ts-loader --save-dev

2、配置tsconfig.json

npx tsc --init

3、webpack.config.json中配置

      {
        test: /\.ts$/,
        use: ['babel-loader', 'ts-loader']
      },

项目中如何支持typescript校验

1、安装

npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin

2、配置eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true
  },
  parserOptions: {
    ecmaVersion: 10,
    sourceType: 'module',
    project: ['./tsconfig.json'],
  },
  rules: {},
  plugins: ['@typescript-eslint'],
  extends: ['standard', 'plugin:@typescript-eslint/recommended'],
  parser: '@typescript-eslint/parser'
}

3、eslintrc.js配置

      {
        enforce: 'pre',
        test: /\.(js|jsx|ts|tsx)/i,
        loader: 'eslint-loader',
        exclude: /node_modules/
      },

注意vscode中eslint默认不会不会检查ts后缀的，需要在文件-设置-首选项中-工作台

  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript"
  ],

项目中如何支持jsx

JSX = Javascript+XML,就是Javascript和XML结合的一种格式，它是Javascript的语法扩展。在实际开发中JSX在产品的打包阶段都会被编译成纯JavaScript,不会带来任何副作用。反而会让代码更加直观并易于维护。

1、安装

npm install @babel/preset-react

2、babelrc

{
  "plugins": [
    "@babel/syntax-dynamic-import"
  ],
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ],
    [
      "@babel/preset-react"
    ]
  ]
}

3、webpack.config.json

      {
        test: /\.(js|jsx)$/i,
        loader: 'babel-loader'
      },

4、eslintrc.js 配置后eslint可以校验jsx文件 4.1 安装

npm install eslint-plugin-react --save-dev

4.2 配置eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true
  },
  parserOptions: {
    ecmaVersion: 10,
    sourceType: 'module',
    project: ['./tsconfig.json'],
    ecmaFeatures: {
      "jsx": true
    }
  },
  rules: {},
  plugins: ['@typescript-eslint', "react"],
  extends: ['standard', 'plugin:@typescript-eslint/recommended', "plugin:react/recommended"],
  parser: '@typescript-eslint/parser'
}

项目中支持tsx

1、安装

npm i -D @babel/preset-typescript

2、修改.babelrc文件

{
  "plugins": [
    "@babel/syntax-dynamic-import"
  ],
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ],
    [
      "@babel/preset-react"
    ],
    [
      "@babel/preset-typescript"
    ]
  ]
}

3、tsconfig.json

"compilerOptions": {
    "jsx": "react",
}

package.json配置的版本号

  "devDependencies": {
    "@babel/core": "^7.22.9",
    "@babel/preset-env": "^7.22.9",
    "@babel/preset-react": "^7.22.5",
    "@typescript-eslint/eslint-plugin": "^6.2.1",
    "@typescript-eslint/parser": "^6.2.1",
    "@webpack-cli/generators": "^3.0.7",
    "autoprefixer": "^10.4.14",
    "babel-loader": "^9.1.3",
    "css-loader": "^6.8.1",
    "eslint": "^7.32.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-react": "^7.33.1",
    "html-webpack-plugin": "^5.5.3",
    "mini-css-extract-plugin": "^2.7.6",
    "postcss": "^8.4.27",
    "postcss-loader": "^7.3.3",
    "prettier": "^3.0.1",
    "sass": "^1.64.2",
    "sass-loader": "^13.3.2",
    "standard": "^17.1.0",
    "style-loader": "^3.3.3",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1",
    "eslint-plugin-import": "^2.28.0",
    "react": "^18.2.0",
    "ts-loader": "^9.4.4",
    "typescript": "^5.1.6"
  },