{"id":1624,"date":"2023-10-13T05:00:00","date_gmt":"2023-10-13T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1624"},"modified":"2023-10-03T14:32:23","modified_gmt":"2023-10-03T21:32:23","slug":"improve-your-code-with-eslint","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/improve-your-code-with-eslint\/","title":{"rendered":"Improve your code with eslint"},"content":{"rendered":"\n

eslint<\/a> is a popular linter that parses your code and outputs a list of warnings and errors to help you improve. The library is designed to lint JavaScript code, and there are extra plugins for TypeScript and Angular so we can get even more specific feedback for our components and services. Here is an example of linting output:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

A linter is a perfect complement to a compiler. For instance, angular-eslint<\/a>, the eslint plugin for Angular, will also look at your HTML templates and flag code that doesn’t follow the Angular style guide<\/a>. It’s also looking for possible mistakes, such as getting the ngModel<\/code> 2-way data-binding syntax wrong:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

To give you a better idea, here is the list of all the template rules<\/a> and all the Angular TypeScript rules<\/a>. If you want to give eslint a try, the first step is to install it with the help of some schematics:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

This will download the proper dependencies and plugins and set up everything necessary to lint your code. If you’re using an older version of Angular or building a library instead of an app, there are step-by-step instructions to follow here<\/a>. Once the set-up is done, all you have to do is run:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

This command will parse all your files and output feedback in the console. Note that several IDEs can detect your eslint config and suggest automatic fixes to linting errors, which is even better!<\/p>\n","protected":false},"excerpt":{"rendered":"

eslint is a popular linter that parses your code and outputs a list of warnings and errors to help you improve. The library is designed to lint JavaScript code, and there are extra plugins for TypeScript and Angular so we can get even more specific feedback for our components and services. Here is an example […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,19,17],"tags":[],"class_list":["post-1624","post","type-post","status-publish","format-standard","hentry","category-angular","category-testing","category-tools"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t