如何讓tslint監視特定文件夾中的更改？

Question

我正在使用webpack 2，它會告訴我我的打字稿代碼是否存在編譯問題。 但是，我還沒有找到一種方法來運行tslint並讓它在webpack運行在dev-server模式時檢測到的每個更改都運行。

我試過讓tslint-loader工作，但對於我項目中的每個文件，它只是告訴我：

/src/main.tsNo指定了有效規則

我正在使用它：

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文檔還有一個額外的--watch標志。

我不想使用我的編輯器 （例如VS Code），因為我團隊中的每個人都不會使用它。 我希望解決方案包含在webpack配置或package.json腳本中。

謝謝！

Answer 1

就您可以從命令行運行的腳本而言，您可以嘗試使用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文件中添加“監視”部分，我實際上剛剛發現了一個我喜歡的新工具，甚至更好地稱為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標志設置來運行它，因此它不會在執行命令之前等待任何文件更改。

Answer 2

如果您使用的是TypeScript，那么您可以使用tsc -w來觀察更改。

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