如何让 tslint 监视特定文件夹中的更改? [英] How do I get tslint to watch for changes in a specific folder?

问题描述

我正在使用 webpack 2，它会告诉我我的打字稿代码是否存在编译问题.但是，我还没有想出一种方法来通过它运行 tslint，并让它在 webpack 以开发服务器模式运行时检测到的每个更改都运行.

I am using webpack 2, and it will tell me if there are compile issues with my typescript code. However, I have not figured out a way to run tslint through it and have it run with every change detected by webpack when its running in dev-server mode.

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

I have tried getting tslint-loader working, but for each file in my project it simply tells me:

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

/src/main.tsNo valid rules have been specified

我正在使用它:

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 中的 lint 错误-dev-server 模式每次我进行更改?
2. 只需从命令行运行 tslint 并让它持续监视"我项目中的文件?我正在寻找类似 tslint ./src/**/*.ts -t --force 的东西，但是有一个额外的 --watch 标志，它没有根据 tslint 文档存在.

1. Have the tslint-loader I'm using inform me of lint errors in webpack-dev-server mode each time I make a change?
2. Simply run tslint from the command line and have it continually "watch" the files in my project? I'm looking for something like tslint ./src/**/*.ts -t --force, but with an additional --watch flag that doesn't exist according to the tslint docs.

我不想使用我的编辑器(例如 VS Code)，因为并不是我团队中的每个人都使用它.我希望解决方案包含在 webpack 配置或 package.json 脚本中.

I would prefer not to use my editor (such as VS Code), as not everyone on my team uses it. I would prefer that the solution is contained either in the webpack config or the package.json scripts.

谢谢！

推荐答案

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

As far as a script you can run from the command line is concerned, you can try using npm-watch: https://www.npmjs.com/package/npm-watch.

我已经用它成功地完成了你所说的.这是我所做的:

I've used it to successfully do what you're talking about. Here's what I did:

将 npm-watch 安装到我的项目中:

Installed npm-watch to my project:

$ npm install npm-watch --save-dev

将以下内容添加到我的 package.json 文件中:

Added the following to my package.json file:

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

我认为 npm-watch 是一个很好的工具，可以为没有它的工具(如 tslint)提供 watch 功能.

I figure npm-watch is a good tool for giving watch functionality to tools that don't have it, like tslint.

更新:

此外，如果您不想在 package.json 文件中添加监视"部分，我实际上刚刚发现了一个我更喜欢的新工具，名为 chokidar.它允许您指定要在同一行上运行的所有文件选择器和命令.

Also, if you don't want to add a "watch" section to your package.json file, I've actually just discovered a new tool I like even better called chokidar. It allows you to specify the file selectors and command you want to run all on the same line.

这是我更新的 package.json:

Here's my updated package.json:

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

你基本上给它一个或多个文件选择器，然后使用-c"参数来指定当这些文件中的任何一个被更改时你想要运行的命令.

You basically give it one or more file selectors, and then use the '-c' parameter to specify the command you want run when any of those files are changed.

所以现在你可以运行命令:

So now you can just run the command:

$ npm run lint:watch

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

I like to run it with the --initial flag set, so it doesn't wait for any files to change before executing the command.

这篇关于如何让 tslint 监视特定文件夹中的更改?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！