eslint

Eslint

概念

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

项目中如何添加eslint

1、安装eslint、eslint-loader

npm install eslint eslint-loader --save-dev

2、根目录添加.eslintrc.js文件

module.exports = {
  root: true,
  env: {
    browser: true //支持浏览器
  },
  parserOptions: {
    ecmaVersion: 10, // 兼容ES10以下的
    sourceType: 'module',
  },
  extends: ['standard'], // https://www.npmjs.com/package/standard 格式上的校验
  rules: {}, // 可以覆盖上面的校验规则
}

3、webpack配置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校验不通过的时候会打包不成功并控制台打印错误信息。

项目中如何支持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

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"
  },