如何让 tslint 监视特定文件夹中的更改？

Question

我正在使用 webpack 2，它会告诉我我的 typescript 代码是否存在编译问题。但是，我还没有想出一种方法来通过它运行 tslint，并让它在 webpack 在 dev-server 模式下运行时检测到的每个更改都运行。

我尝试让tslint-loader 工作，但对于我项目中的每个文件，它只是告诉我：

/src/main.ts没有指定有效规则

我就是这样使用它的：

rules: [
  {
    test: /\.ts$/,
    enforce: 'pre',
    loader: 'tslint-loader',
    options: {
      configuration: {
        configFile: true // I have also tried setting this to "tslint.json"
      }
    }
  },
  ... more loaders...

还是不开心。

有办法：

1. 每次我进行更改时，我使用的 tslint-loader 是否会通知我 webpack-dev-server 模式下的 lint 错误？
2. 只需从命令行运行 tslint 并让它持续“监视”我项目中的文件？我正在寻找类似tslint ./src/**/*.ts -t --force 的东西，但根据tslint docs 不存在额外的--watch 标志。

我不希望use my editor（例如 VS Code），因为我的团队中并不是每个人都使用它。我希望解决方案包含在 webpack 配置或 package.json 脚本中。

谢谢！

Answer 1

如果您使用的是 TypeScript，那么您可能可以使用 tsc -w 来查看更改。

 "scripts": {
    "start": "tsc -w",
  }

Answer 2

就可以从命令行运行的脚本而言，您可以尝试使用 npm-watch:https://www.npmjs.com/package/npm-watch。

我已经用它成功地完成了你所说的事情。这是我所做的：

在我的项目中安装了 npm-watch：

$ npm install npm-watch --save-dev

在我的 package.json 文件中添加了以下内容：

"watch": {
    "lint": "src/main.ts"
},
"scripts": {
    "lint": "tslint src/**/*.ts -t verbose",
    "watch": "npm-watch"
},

我认为 npm-watch 是一个很好的工具，可以将手表功能提供给没有它的工具，例如 tslint。

更新：

另外，如果你不想在你的 package.json 文件中添加“watch”部分，我实际上刚刚发现了一个我更喜欢的新工具，叫做 chokidar。它允许您指定要在同一行上运行的所有文件选择器和命令。

这是我更新的 package.json：

"scripts": {
    "lint:watch": "chokidar webpack.config.* src/**/*.ts buildScripts/**/*.ts -c \"npm run lint\" --initial --verbose"
},

你基本上给它一个或多个文件选择器，然后使用'-c'参数来指定当任何这些文件发生变化时你想要运行的命令。

所以现在你可以运行命令了：

$ npm run lint:watch

我喜欢在设置 --initial 标志的情况下运行它，因此它不会在执行命令之前等待任何文件更改。