How do I get tslint to watch for changes in a specific folder?

Question

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.

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

/src/main.tsNo valid rules have been specified

I am using it as such:

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

Still no joy.

It there a way to either:

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.

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.

Thank you!

Answer 1

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:

Installed npm-watch to my project:

$ npm install npm-watch --save-dev

Added the following to my package.json file:

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

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

Update:

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.

Here's my updated package.json:

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

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

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

Answer 2

If you are using TypeScript, then you can probably use tsc -w to watch the changes.

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