webpack5---6 eslint的使用

648 阅读1分钟

团队开发中,统一代码风格是很有必要的。不仅有利于代码的统一,也让其他人看着舒服。在这里介绍下webpack 中使用 eslint

首先介绍下我使用的loader和插件

npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D
npm i eslint-webpack-plugin -D
  • 首先在webpack.config.js 中来配置
const ESLintPlugin = require('eslint-webpack-plugin');
plugins: [
    // 详细plugins 的配置
    new htmlWebpackPlugin({
      template: './index.html',
    }),
    new miniCssExtractPlugin({
      filename: "css/[name].css"
    }),
    new ESLintPlugin({
      fix: true
    }),
    // 具体配置参考 https://webpack.docschina.org/plugins/eslint-webpack-plugin/
    new optimizeCssAssetsWebpackPlugin()
  ],

在项目中创建 .eslintrc.js

module.exports = {
  extends: 'airbnb-base',
  env: {
    browser: true,
    es6: true,
    node: true
  },
  parserOptions:{
    ecmaVersion: 2015,
    sourceType: "module"
  },
  rules: {
  // 可以根据自己的需要来改变配置
    "no-console":0
  }
}