使用 eslint 校验 js 语法

安装 eslint 和 eslint-loader

• 要是用 eslint，首先要安装 eslint 和 eslint-loader 插件

  yarn add eslint eslint-loader -D

在配置文件里增加一条规则

  const path = require('path')
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
  const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

  module.exports = {
    optimization: {
      minimizer: [
        new OptimizeCSSAssetsPlugin(),
        new UglifyJsPlugin({
          cache: true,
          parallel: true,
          sourceMap: true
        }),
      ]
    },
    devServer: {
      contentBase: path.join(__dirname, 'dist'),
      compress: true,
      port: 3000,
      open: true,
      progress: true
    },
    entry: {
      index: './src/index.js'
    },
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, 'dist')
    },

    module: {
      rules: [
        {
          test: /\.css$/,
          use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
        },
          //这是新增的规则
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'eslint-loader',
          }
        },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
          }
        }
      ]
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
      }),
      new HtmlWebpackPlugin({
        title: '测试',
        minify: false,
        template: path.resolve(__dirname, 'src/index.html'),
        chunks: ['index']
      })
    ]
  }

• 还可以写成这样

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

• 安装好插件个配置好规则之后，我们还要在项目目录里创建一个.eslintrc.json文件

  ​ 在线配置.eslintrc.json 地址

示例.eslintrc.json

    {
        "parserOptions": {
            "ecmaVersion": 5,
            "sourceType": "script",
            "ecmaFeatures": {}
        },
        "rules": {
            "no-useless-catch": 2,
            "no-useless-escape": 2,
            "no-with": 2,
            "require-atomic-updates": 2,
            "require-yield": 2,
            "use-isnan": 2,
            "valid-typeof": 2
        },
        "env": {}
    }

❝

现在进行打包或者启动本地服务的时候，就会校验 js 语法了

❞