eslint

vscode编辑器中ESLint插件如何使用：

vscode安装ESLint插件
全局安装eslint npm install eslint -g 或者本地安装 npm install eslint --save-dev
在命令行输入eslint --init在项目根目录新建eslint配置文件
根据需要可以修改.eslintrc.js文件，添加规则

对于一个非webpack项目，以上步骤之后就可以使用eslint，当出现错误或者警告时，编辑器编辑区会在相应地方爆红

对于一个webpack项目，除了以上步骤外还需要下载eslint-loader，还需要在webpack中做如下配置。当出现错误或者警告时，不仅编辑器编辑区会在相应地方爆红，而且（编辑器）终端、浏览器、浏览器控制台终会出现错误或者警告的相应信息

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader",
        options: {
          // eslint options (if necessary)
        }
      },
    ],
  },
  // ...
}

如果使用了babel-loader，则配置如下

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [path.resolve(__dirname, 'src')], // 指定检查的目录
        options: { // 这里的配置项参数将会被传递到 eslint 的 CLIEngine
          formatter: require('eslint-friendly-formatter') // 指定错误报告的格式规范
        }
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ],
  },
  // ...
}

eslint ​

eslint