动态更改文件列表上的eslint

Question

我只想运行 eslint 修改文件。我从命令行 (git diff --name-only --relative | grep -E '.*\.(vue|js)$' | xargs eslint --ext .js,.vue) 在 package.json 到运行 eslint 中创建了一个新的运行目标。从理论上讲，这应该可以正常工作，但是当使用 webpack 捆绑文件时，我的项目中发生了一些转换步骤（字符串替换），这将导致 eslint（一些非标准标记将扩展为 JS） .

我有哪些选择，我将如何实施它们？例如，我可以执行一个特定的 webpack rule/loader 并将结果通过管道传输到 eslint 吗？我看到的另一个选择是将 eslint 包含到 webpack rule/loader 进程中（而不是从命令行执行它），但是我将如何过滤当前修改的文件（这可以通过包含 git diff... 结果的临时文件？）

Answer 1

我有一些可行的方法。我选择修改 webpack.base.conf.js 而不是使用命令行解决方案来利用现有的字符串替换加载器。

文件是在 WebpackBeforeBuildPlugin 回调函数中收集的，而不是基于正则表达式的测试变量，而是使用一个函数来检查以前收集的文件。

const exec = require('child_process').exec;
const WebpackBeforeBuildPlugin = require('before-build-webpack');
var modFilesList = new Set([]);
const srcPath = resolve('.');

...
      rules: [{
        test: function(filename) {
          let relFilename = path.relative(srcPath, filename);
          let lint = modFilesList.has(relFilename);
          return lint
        },
        loader: 'eslint-loader',
        include: resolve('src'),
        exclude: /node_modules/,
        options: {
          formatter: require('eslint-friendly-formatter'),
          cache: false
        }
      }, {
       ... other string replacement loader ...
      }


   plugins: [
    ...
    new WebpackBeforeBuildPlugin(function(stats, callback) {
      // Collect changed files before building.
      let gitCmd = 'git diff --name-only --relative | grep -E ".*\.(vue|js)$"';
      const proc = exec(gitCmd, (error, stdout, stderr) => {
        if (stdout) {
          let files = stdout.split('\n');
          modFilesList = new Set(files);
        }
        if (error !== null) {
          console.log(`exec error: ${error}`);
        }
      });
      callback();
    })
  ]

目前唯一的问题是，当 git 文件更改发生时，它们不会根据这些文件更改（即新文件更改，或之前（在启动 webpack 之前）触发重新检查-dev-server) 更改的文件更改被丢弃)。我尽我所能检查了一切。更改被注册并存储在 modFilesList 中，测试函数被执行并且 returns true（对于先前未更改的文件中的新更改）或 false，以防更改被丢弃。我也玩过 cache 选项无济于事。似乎在初始加载时，eslint-loader 缓存了它将来会检查的文件（不知道这是使用测试函数而不是正则表达式的结果还是正则表达式的情况）。有没有人有想法或以前见过这个（eslint-loader 不更新文件列表）？

更新

这似乎是 webpack（或其他加载器之一）的问题，因为文件更改时甚至没有执行 eslint-loader。但是执行 test 函数有点奇怪。我不完全理解加载器是如何工作的或者它们是如何一起玩的，所以可能是其他加载器导致了这个...

动态更改文件列表上的eslint

eslint on dynamically changing file list

javascript

eslint

webpack

babel-loader

eslint-loader