{"id":1632,"date":"2023-10-16T05:00:00","date_gmt":"2023-10-16T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1632"},"modified":"2023-10-03T14:58:26","modified_gmt":"2023-10-03T21:58:26","slug":"fine-tuning-your-eslint-configuration","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/fine-tuning-your-eslint-configuration\/","title":{"rendered":"Fine-tuning your eslint configuration"},"content":{"rendered":"\n<p>Last week, we introduced <a href=\"https:\/\/eslint.org\/\" target=\"_blank\" rel=\"noopener\" title=\"\">eslint<\/a> and how it can help improve our code by identifying places where we have dead code or don&#8217;t follow best practices. Sometimes, we &#8220;break&#8221; some of these rules on purpose or decide to adopt a different convention, which is perfectly fine.<\/p>\n\n\n\n<p>In that case, instead of giving up on eslint entirely, a better idea is to change its configuration to tweak the severity of a rule or even disable it. An es lint rule has three different  severity settings:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8220;off&#8221; or 0 &#8211; turns the rule off<\/li>\n\n\n\n<li>&#8220;warn&#8221; or 1 &#8211; turns the rule on as a warning (doesn&#8217;t make the lint command fail)<\/li>\n\n\n\n<li>&#8220;error&#8221; or 2 &#8211; turns the rule into an error (makes the lint command fail with exit code 1 &#8211; a good option to fail a continuous integration build)<\/li>\n<\/ul>\n\n\n\n<p>Such severity tweaks can be made in the <code>.eslintrc.json<\/code> file created in your project by the Angular schematics:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"633\" height=\"193\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/10\/image-7.png\" alt=\"\" class=\"wp-image-1633\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/10\/image-7.png 633w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/10\/image-7-300x91.png 300w\" sizes=\"auto, (max-width: 633px) 100vw, 633px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>In the above example, I made the first two rules throw an error instead of a warning (I&#8217;m very much against <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/typescript-any-vs-unknown\/\" target=\"_blank\" rel=\"noopener\" title=\"\">disabling type-checking in TypeScript<\/a>), but I&#8217;m OK with seeing some <code>var<\/code> keywords instead of <code>let<\/code>, so I turned off that third rule.<\/p>\n\n\n\n<p>Getting the rule&#8217;s name is easy: When the linter fails, that name will be displayed in the console. Here <code>@typescript-eslint\/no-empty-function<\/code> :<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"35\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/10\/image-8.png\" alt=\"\" class=\"wp-image-1634\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/10\/image-8.png 662w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/10\/image-8-300x16.png 300w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>Some rules accept more configuration options to create an allowlist of accepted values. For instance, @angular-eslint\/no-input-rename prevents you from renaming @Input values, but you can specify a config option that allows a few input names:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"381\" height=\"215\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/10\/image-9.png\" alt=\"\" class=\"wp-image-1635\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/10\/image-9.png 381w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/10\/image-9-300x169.png 300w\" sizes=\"auto, (max-width: 381px) 100vw, 381px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>The config for that rule becomes an object that looks like this:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"407\" height=\"231\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/10\/image-10.png\" alt=\"\" class=\"wp-image-1636\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/10\/image-10.png 407w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/10\/image-10-300x170.png 300w\" sizes=\"auto, (max-width: 407px) 100vw, 407px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>The above config allows renaming inputs only if the new name is <code>check<\/code> or <code>test<\/code>. This gives you more flexibility than turning off a rule entirely if it&#8217;s too restrictive for you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Last week, we introduced eslint and how it can help improve our code by identifying places where we have dead code or don&#8217;t follow best practices. Sometimes, we &#8220;break&#8221; some of these rules on purpose or decide to adopt a different convention, which is perfectly fine. In that case, instead of giving up on eslint [&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,31,19,17],"tags":[],"class_list":["post-1632","post","type-post","status-publish","format-standard","hentry","category-angular","category-best-practices","category-testing","category-tools"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1632","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=1632"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1632\/revisions"}],"predecessor-version":[{"id":1638,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1632\/revisions\/1638"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1632"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1632"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}