{"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<p class=\"wp-block-paragraph\"><a href=\"https:\/\/eslint.org\/\" target=\"_blank\" rel=\"noopener\" title=\"\">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 class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"312\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/10\/Pasted-image-20230906145630.png\" alt=\"\" class=\"wp-image-1625\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/10\/Pasted-image-20230906145630.png 750w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/10\/Pasted-image-20230906145630-300x125.png 300w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A linter is a perfect complement to a compiler. For instance, <a href=\"https:\/\/github.com\/angular-eslint\/angular-eslint\" target=\"_blank\" rel=\"noopener\" title=\"\">angular-eslint<\/a>, the eslint plugin for Angular, will also look at your HTML templates and flag code that doesn&#8217;t follow the <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/angular-style-guide\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Angular style guide<\/a>. It&#8217;s also looking for possible mistakes, such as getting the <code>ngModel<\/code> 2-way data-binding syntax wrong:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"125\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/10\/image-4.png\" alt=\"\" class=\"wp-image-1626\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/10\/image-4.png 500w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/10\/image-4-300x75.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To give you a better idea, here is the list of all the <a href=\"https:\/\/github.com\/angular-eslint\/angular-eslint\/tree\/main\/packages\/eslint-plugin-template\/docs\/rules\" target=\"_blank\" rel=\"noopener\" title=\"\">template rules<\/a> and all the <a href=\"https:\/\/github.com\/angular-eslint\/angular-eslint\/tree\/main\/packages\/eslint-plugin\/docs\/rules\" target=\"_blank\" rel=\"noopener\" title=\"\">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<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"337\" height=\"35\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/10\/image-5.png\" alt=\"\" class=\"wp-image-1627\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/10\/image-5.png 337w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/10\/image-5-300x31.png 300w\" sizes=\"auto, (max-width: 337px) 100vw, 337px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This will download the proper dependencies and plugins and set up everything necessary to lint your code. If you&#8217;re using an older version of Angular or building a library instead of an app, there are step-by-step instructions <a href=\"https:\/\/github.com\/angular-eslint\/angular-eslint#quick-start\" target=\"_blank\" rel=\"noopener\" title=\"\">to follow here<\/a>. Once the set-up is done, all you have to do is run:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"90\" height=\"31\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/10\/image-6.png\" alt=\"\" class=\"wp-image-1628\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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":"<p>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 [&hellip;]<\/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":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1624","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1624"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1624\/revisions"}],"predecessor-version":[{"id":1631,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1624\/revisions\/1631"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}