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!

Immunology

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.

Kattiekatuscha

This is precisely what I was looking for! Thank you! – Immunology

npm install chokidar chokidar-cli --save-dev – Jetta

Good call there @Jetta -- thanks. All that said, I got this working with chokidar (thanks @jalbr74), but so far here it doesn't efficiently only re-lint the diff, but rather runs the linter process again. So it's not much help. Did y'all get it to work more efficiently by running only on the files that have changed? – Sudiesudnor

npm-watch is using nodemon, which is using chokidar under the hood. It's a shame there's an abstraction layer in Nodemon that (currently) doesn't pass through unix-style globs. – Bainter

i hass been delete all node_module and run npm install from zero. – Rozellarozelle

Answer 2

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

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

Schilling