使用webpack5从0配置eslint

好的，我可以帮你解答这个问题。首先，你需要安装以下几个依赖：

npm install eslint eslint-loader eslint-config-airbnb-base eslint-plugin-import -D

接下来，你需要在你的webpack配置文件中添加以下loader配置：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: ['babel-loader', 'eslint-loader'],
    },
  ],
},

然后在你的项目根目录下添加一个`.eslintrc.js`文件，该文件内容如下：

module.exports = {
  extends: ['airbnb-base'],
  plugins: ['import'],
  rules: {
    'no-console': 'off',
    'import/no-unresolved': 'error',
  },
};

现在，你已经成功地将eslint集成到webpack中了。每次在运行webpack打包时，它都会自动检查你的代码，并给出相应的警告或错误信息。

相关问题

webpack5配置eslint 使用standard版本

首先，你需要安装 `eslint-config-standard` 和 `eslint-plugin-standard`。

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

然后，在你的webpack配置文件中添加eslint配置。

module.exports = {
  // ... other configurations
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [path.resolve(__dirname, 'src')], // 指定检查的目录
        options: {
          formatter: require('eslint-friendly-formatter'), // 指定错误报告的格式规范
          eslintPath: require.resolve('eslint'),
          configFile: '.eslintrc.json', // 指定eslint配置文件路径
          plugins: ['standard'], // 配置eslint插件
          globals: [], // 声明全局变量
          rules: {
            'no-console': 'error', // 禁止使用console
            'no-debugger': 'error', // 禁止使用debugger
            'no-alert': 'error', // 禁止使用alert
            'no-unused-vars': 'error', // 禁止未使用的变量
            'standard/no-callback-literal': 'error' // 禁止在回调函数中直接使用字面量
          }
        }
      },
      // ... other loaders
    ]
  }
}

最后，你需要在项目根目录下创建 `.eslintrc.json` 文件，并进行以下配置：

{
  "extends": [
    "standard"
  ],
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "single"]
  }
}

上述配置表示，我们使用 `standard` 规则集进行代码检查，支持浏览器和 node.js 环境，使用 ECMAScript 2020 版本，强制使用分号和单引号。

这样，你就可以在开发过程中使用 `eslint-loader` 进行代码检查了。

使用webpack5 搭建一个 要求支持react typescript 配置eslint

好的，首先你需要安装webpack5、react、typescript、eslint以及相关的loader和插件。你可以通过以下命令安装它们：

npm install webpack webpack-cli webpack-dev-server react react-dom @types/react @types/react-dom typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier -D

接下来，你需要创建一个webpack配置文件，可以命名为`webpack.config.js`，在该文件中配置webpack相关内容：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-env',
                '@babel/preset-react',
                '@babel/preset-typescript',
              ],
            },
          },
          {
            loader: 'ts-loader',
          },
        ],
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    port: 3000,
  },
  mode: 'development',
};

在上面的配置中，我们指定了入口文件为`src/index.tsx`，打包后的输出文件为`dist/bundle.js`。我们还通过resolve属性指定了文件的拓展名，这样在引入文件时就不用指定拓展名了。

在module属性中，我们定义了不同类型文件的loader，例如对于`.tsx`和`.ts`文件，我们使用了`babel-loader`和`ts-loader`，对于`.js`和`.jsx`文件，我们只使用了`babel-loader`。此外，我们还使用了`style-loader`和`css-loader`处理`.css`文件。

在plugins属性中，我们使用了`HtmlWebpackPlugin`插件，用于生成HTML文件。在devServer属性中，我们指定了开发服务器的端口和从哪个文件夹提供内容。

最后，我们使用了`inline-source-map`作为开发模式下的source-map，将模式设置为`development`。

接下来，你需要创建一个`.babelrc`文件，用于配置babel：

{
  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"]
}

然后，你需要创建一个`.eslintrc.json`文件，用于配置eslint：

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["airbnb", "plugin:@typescript-eslint/recommended", "prettier"],
  "rules": {
    "prettier/prettier": ["error"],
    "react/jsx-filename-extension": [1, { "extensions": [".tsx"] }],
    "import/extensions": ["error", "never", { "svg": "always" }]
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
}

在上面的配置中，我们使用了`@typescript-eslint/parser`解析Typescript代码，并使用了`@typescript-eslint/eslint-plugin`插件提供的规则。我们还继承了`eslint-config-airbnb`和`eslint-config-prettier`，并使用了一些自定义的规则。

最后，你需要在`package.json`中添加一些scripts，用于启动开发服务器和打包代码：

{
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  }
}

现在你就可以使用`npm start`命令启动开发服务器，使用`npm run build`命令打包代码了。