Angular-CLI Serve with Lint Watch

18
votes

Is there any way to run ng lint while watching for file changes during ng serve? To encourage best practices according to the Angular 2 Style Guide our CI tool runs ng lint during the build process and it isn't always a developers first thought to run lint before submitting a pull request.

Is it possible to customize what ng serve does or has anyone figured out a way to include running lint as part of the recompilation process? If not, I'd also be interested in knowing whether others have any opinions on whether this is a good idea or not and why.

1
angularangular-clitslint
No, currently, there is no such an option. However, tslint is integrated into many popular IDE and Editors. You can maybe update the script tag in package.json to run parallel tasks (npm run start - in script tag you have "start":"ng serve && ng lint" -> in this case linting is automatically started during startup) – Alexander Peinsipp
There is a work-around, see my answer below. You just need to run both ng serve and npm run lint:watch in different terminals. – Markus Ende

1 Answers

12
votes

You can define an additional npm script with a watch using nodemon for this.

  1. Install nodemon npm package globally (npm i -g nodemon) or in your project (npm i --save-dev nodemon)

  2. Define the npm script in package.json (under "scripts"): `

    "lint:watch": "nodemon --exec \"npm run lint || exit 1\" --ext ts,html,scss"

  3. Run npm run lint:watch

You can change the --ext ts,html,scss,json to whatever file extensions you want to cause lint to restart. For further documentation of nodemon, see https://github.com/remy/nodemon#nodemon