{"id":1710,"date":"2023-11-02T05:00:00","date_gmt":"2023-11-02T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1710"},"modified":"2023-11-01T15:06:46","modified_gmt":"2023-11-01T22:06:46","slug":"rxjs-eslint-plugin-for-angular","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/rxjs-eslint-plugin-for-angular\/","title":{"rendered":"RxJs eslint plugin for Angular"},"content":{"rendered":"\n<p>Last month, I discussed <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/improve-your-code-with-eslint\/\" target=\"_blank\" rel=\"noopener\" title=\"\">eslint<\/a> and how to use that tool to parse your code and receive feedback on best practices and possible improvements.<\/p>\n\n\n\n<p>Today, I want to mention an eslint plugin explicitly written for RxJs with Angular: <a href=\"https:\/\/github.com\/cartant\/eslint-plugin-rxjs-angular\" target=\"_blank\" rel=\"noopener\" title=\"\">eslint-plugin-rxjs-angular.<\/a><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>This plugin adds three possible validation rules:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"888\" height=\"311\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/11\/image.png\" alt=\"\" class=\"wp-image-1711\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/11\/image.png 888w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/11\/image-300x105.png 300w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/11\/image-768x269.png 768w\" sizes=\"auto, (max-width: 888px) 100vw, 888px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>All rules are optional, and it doesn&#8217;t make sense to use all of them at once because these best practices are contradictory in the sense that the goal is for you to choose one of these three approaches and be 100% consistent with it:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The <a href=\"https:\/\/github.com\/cartant\/eslint-plugin-rxjs-angular\/blob\/main\/docs\/rules\/prefer-async-pipe.md\" target=\"_blank\" rel=\"noopener\" title=\"\">first rule<\/a> will enforce that you always use the <code>async<\/code> pipe in your components.<\/li>\n\n\n\n<li>The <a href=\"https:\/\/github.com\/cartant\/eslint-plugin-rxjs-angular\/blob\/main\/docs\/rules\/prefer-composition.md#rule-details\" target=\"_blank\" rel=\"noopener\" title=\"\">second rule<\/a> doesn&#8217;t care about the <code>async<\/code> pipe but wants to ensure you unsubscribe on destroy.<\/li>\n\n\n\n<li>The <a href=\"https:\/\/github.com\/cartant\/eslint-plugin-rxjs-angular\/blob\/main\/docs\/rules\/prefer-takeuntil.md\" target=\"_blank\" rel=\"noopener\" title=\"\">third rule<\/a> is the most specific, as it enforces that you always use a Subject with <code><a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/rxjs-takeuntil-and-takewhile-operators\/\" target=\"_blank\" rel=\"noopener\" title=\"\">takeUntil<\/a><\/code> to unsubscribe in your components.<\/li>\n<\/ol>\n\n\n\n<p>I&#8217;d suggest using the first rule only because we covered before that the <code>async<\/code> pipe is the safest and <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/async-pipe-signals-and-change-detection\/\" target=\"_blank\" rel=\"noopener\" title=\"\">most performant option<\/a>. And remember that <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/async-pipe-syntax-tricks\/\" target=\"_blank\" rel=\"noopener\" title=\"\">you can always use the <code>async<\/code> pipe<\/a>. There are no excuses!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Last month, I discussed eslint and how to use that tool to parse your code and receive feedback on best practices and possible improvements. Today, I want to mention an eslint plugin explicitly written for RxJs with Angular: eslint-plugin-rxjs-angular. This plugin adds three possible validation rules: All rules are optional, and it doesn&#8217;t make sense [&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,10,17],"tags":[],"class_list":["post-1710","post","type-post","status-publish","format-standard","hentry","category-angular","category-best-practices","category-rxjs","category-tools"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1710","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=1710"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1710\/revisions"}],"predecessor-version":[{"id":1713,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1710\/revisions\/1713"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1710"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1710"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}