Question

我最近在代码库中添加了eslint作为webpack加载器，之前从未用过linter解析过。

显然，触发的错误数量是无穷无尽的：有没有机会配置eslint来解析只有被触摸的文件？我希望linter能够解析开发人员进行更改的每个文件。

这是我目前使用的加载程序（如果感兴趣的话），非常标准的配置：

{test: /\.(jsx|js)$/, loader: "eslint-loader?{cache: true}", exclude: /node_modules/}

谢谢

Answer 1

我参加聚会肯定要晚一点，但是今天我面临着同样的问题，而且似乎仍然没有共同的解决方案。

我最终用以下方法对webpack的devServer进行了猴子修补：

  const { exec } = require('child_process');
  
  // ...
  
  devServer: {
    hot: false,
    inline: false,
    publicPath: '/',
    historyApiFallback: true,
    disableHostCheck: true,
    after: (app, server, compiler) => {
      compiler.hooks.watchRun.tap(
        'EsLint-upon-save',
        () => {
          // This should only work in dev environment
          if (process.env.NODE_ENV !== 'development') {
            return;
          }
        
          // Credits to:
          // https://stackoverflow.com/a/43149576/9430588
          const filesChanged = Object.keys(compiler.watchFileSystem.watcher.mtimes);
          
          // Might be empty
          if (!filesChanged.length) {
            return;
          }

          filesChanged.forEach((changedFileAbsolutePath) => {
            const extension = changedFileAbsolutePath.split('.').pop();

            if (extension === 'js' || extension === 'jsx') {
              exec(`npx eslint --fix --fix-type suggestion,layout ${changedFileAbsolutePath}`); 
            }
          });
        }
      );
    }
  },

这肯定是一种快速且肮脏的解决方案，但是似乎可以与eslint@7.7.0一起使用。

Answer 2

我用观察者完成了它;这是详细解决方案：

Webpack配置的依赖项：

var logger = require('reliable-logger');
var watch = require('watch');
var CLIEngine =  require('eslint').CLIEngine

观察者和linter配置并启动;我用所有的待办事项粘贴它，因为它是：

var configureLinterAndWatchFiles = function() {
var changedFiles = [];
var formatter;
var report;
var SEPARATOR = "////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////";

// TODO I got the feeling that one of those settings is breaking the
//   linter (probably the path resolving?)
var linter =  new CLIEngine({
    // TODO do I need this? Looks like I don't...
    // envs: ["node"],
    // TODO what is the default?
    useEslintrc: true,
    // TODO I find weird that I get no error with this: configFile: "../.eslintrc1111"
    //  make sure that the configuration file is correctly picked up
    configFile: ".eslintrc",
    // TODO useless if your root is src
    // ignorePath: "node_modules"
    // TODO probably both useless... the first I still don't get it,
    //   the second you are enforcing the filtering yourself by checks
    // cache: false,
    // extensions: [".js", ".jsx"]
});

var fileUpdatedFn = function(f) {
    // TODO I would prefer much more to get the list of changed files from
    //   git status (how to?). Here I am building my own
    // resetting the array only for debug purpose
    // changedFiles = [];
    if(/.js$/.test(f) || /.jsx$/.test(f)) {
        changedFiles.push(f);
        logger.info(SEPARATOR);
        report = linter.executeOnFiles(changedFiles);
        logger.info(formatter(report.results));
    }
};

// get the default formatter
formatter = linter.getFormatter();

watch.watchTree('src', function(f, curr, prev) {
    if (typeof f == "object" && prev === null && curr === null) {
    // Finished walking the tree
    } else if (prev === null) {
    // f is a new file
    } else if (curr.nlink === 0) {
    // f was removed
    } else {
        // f was changed
        fileUpdatedFn(f);
    }
});

};

在module.exports中，作为最后一行：

module.exports = function(callback, options){
  // ... more code ...
  configureLinterAndWatchFiles();
}

那应该是它。正如我在评论中指出的那样：

我想知道，如果缓存标志（eslint.org/docs/developer-guide/nodejs-api#cliengine）最适合用于解决问题。从这里（github.com/adametry/gulp-eslint/issues / ...）：＆＃34; - 缓存标志将跳过在上一次运行中没有问题的任何文件，除非它们已被修改＆＃34;：不确定如果这是我的情况，但感兴趣。

eslint：howto lint只触及文件

2 个答案: