{"id":30588,"date":"2025-06-06T11:11:04","date_gmt":"2025-06-06T09:11:04","guid":{"rendered":"https:\/\/www.angulararchitects.io\/?p=30588"},"modified":"2025-08-09T20:27:02","modified_gmt":"2025-08-09T18:27:02","slug":"best-practices-prettier-eslint","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/","title":{"rendered":"NG Best Practices: Prettier &#038; ESLint"},"content":{"rendered":"<div class=\"wp-post-series-box series-angular-project-setup-en wp-post-series-box--expandable\">\n\t\t\t<input id=\"collapsible-series-angular-project-setup-en69f3a4729dda5\" class=\"wp-post-series-box__toggle_checkbox\" type=\"checkbox\">\n\t\n\t<label\n\t\tclass=\"wp-post-series-box__label\"\n\t\t\t\t\tfor=\"collapsible-series-angular-project-setup-en69f3a4729dda5\"\n\t\t\ttabindex=\"0\"\n\t\t\t\t>\n\t\t<p class=\"wp-post-series-box__name wp-post-series-name\">\n\t\t\tThis is post 2 of 2 in the series <em>&ldquo;Angular Project Setup&rdquo;<\/em>\t\t<\/p>\n\t\t\t<\/label>\n\n\t\t\t<div class=\"wp-post-series-box__posts\">\n\t\t\t<ol>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/the-perfect-project-setup-for-angular-structure-and-automation-for-more-quality\/\">The Perfect Project Setup for Angular: Structure and Automation for More Quality<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><span class=\"wp-post-series-box__current\">NG Best Practices: Prettier &#038; ESLint<\/span><\/li>\n\t\t\t\t\t\t\t<\/ol>\n\t\t<\/div>\n\t<\/div>\n<p>I consider myself a strict nerd when it comes to project rules, and I have a great need for clean, readable code. Hence, in this article, I want to discuss some additional configurations that I prefer to use in my projects.<\/p>\n<p><strong>Prettier<\/strong> and <strong>ESLint<\/strong> are among my favorite tools for ensuring code quality and consistency in <em>Angular workspaces<\/em>. They help maintain a clean codebase, enforce coding standards, and improve collaboration among team members. In this post, I will guide you through setting up <strong>Prettier<\/strong> and <strong>ESLint<\/strong> in your <em>Angular project<\/em>, ensuring that your code is not only functional but also beautifully formatted.<\/p>\n<p>First things first, let\u2019s distinguish between the roles of these two tools:<\/p>\n<ul>\n<li><strong>Prettier<\/strong> is a code formatter that ensures consistent code formatting across all developers.<\/li>\n<li><strong>ESLint<\/strong> is a code linter that enforces coding standards and best practices.<\/li>\n<\/ul>\n<h2>Base case: Prettier and ESLint with defaults (Manfred's setup)<\/h2>\n<p>To set up <strong>Prettier<\/strong> and <strong>ESLint<\/strong> with default settings, follow these steps:<\/p>\n<h3>Install Packages<\/h3>\n<pre><code class=\"language-bash\">pnpm i -D prettier eslint<\/code><\/pre>\n<blockquote><p>\n<strong>Note:<\/strong> Use the package manager of your choice. I recommend using <a href=\"https:\/\/pnpm.io\/\">pnpm<\/a>!\n<\/p><\/blockquote>\n<p>For the two tools to work together smoothly, install these additional packages:<\/p>\n<pre><code class=\"language-bash\">pnpm i -D eslint-config-prettier eslint-plugin-prettier<\/code><\/pre>\n<p>Finally, add the <em>Angular ESLint<\/em> plugins (including TypeScript support):<\/p>\n<pre><code class=\"language-bash\">ng add angular-eslint<\/code><\/pre>\n<p>You should now have the following packages in your <code>package.json<\/code> (besides your own):<\/p>\n<pre><code class=\"language-json\">{\n  &quot;devDependencies&quot;: {\n    &quot;angular-eslint&quot;: &quot;^19.6.0&quot;,\n    &quot;eslint&quot;: &quot;^9.27.0&quot;,\n    &quot;eslint-config-prettier&quot;: &quot;^10.1.5&quot;,\n    &quot;eslint-plugin-prettier&quot;: &quot;^5.4.1&quot;,\n    &quot;prettier&quot;: &quot;^3.5.3&quot;,\n    &quot;typescript-eslint&quot;: &quot;^8.33.0&quot;\n  }\n}<\/code><\/pre>\n<h3>Add \/ Check Config Files<\/h3>\n<h4>Prettier Configuration<\/h4>\n<p>Create a <code>.prettierrc.json<\/code> file in your project root with the following content:<\/p>\n<pre><code class=\"language-json\">{\n  &quot;singleQuote&quot;: true \/\/ add this line to enforce single quotes\n}<\/code><\/pre>\n<blockquote><p>\n<strong>Note:<\/strong> Remove any comments from JSON files to avoid parsing errors.\n<\/p><\/blockquote>\n<ul>\n<li><strong>singleQuote<\/strong>: Enforces single quotes in JavaScript and TypeScript files.<\/li>\n<\/ul>\n<p>Most developers prefer single quotes since they are slightly more concise and don\u2019t require holding the Shift key. As a rule of thumb: use single quotes in JavaScript\/TypeScript and double quotes in HTML and (S)CSS.<\/p>\n<h4>ESLint Configuration<\/h4>\n<p>When you run <code>ng add angular-eslint<\/code>, it will generate an <code>eslint.config.js<\/code> file for you. We\u2019re using the flat config format instead of <code>.eslintrc.json<\/code> because it offers better modularity and extensibility.<\/p>\n<p>Here\u2019s an example of what it might look like:<\/p>\n<pre><code class=\"language-js\">\/\/ eslint.config.js\n\/\/ @ts-check\nconst eslint = require(&#039;@eslint\/js&#039;);\nconst tseslint = require(&#039;typescript-eslint&#039;);\nconst angular = require(&#039;angular-eslint&#039;);\nconst eslintConfigPrettier = require(&#039;eslint-config-prettier&#039;); \/\/ add the glue plugin\n\nmodule.exports = tseslint.config(\n  {\n    ignores: [&#039;.angular\/**&#039;, &#039;.nx\/**&#039;, &#039;coverage\/**&#039;, &#039;dist\/**&#039;], \/\/ add these ignores\n    files: [&#039;**\/*.ts&#039;],\n    extends: [\n      eslint.configs.recommended,\n      ...tseslint.configs.recommended,\n      ...tseslint.configs.stylistic,\n      ...angular.configs.tsRecommended,\n      eslintConfigPrettier, \/\/ add the glue plugin\n    ],\n    processor: angular.processInlineTemplates,\n    rules: {\n      &#039;@angular-eslint\/directive-selector&#039;: [\n        &#039;error&#039;,\n        {\n          type: &#039;attribute&#039;,\n          prefix: &#039;app&#039;,\n          style: &#039;camelCase&#039;,\n        },\n      ],\n      &#039;@angular-eslint\/component-selector&#039;: [\n        &#039;error&#039;,\n        {\n          type: &#039;element&#039;,\n          prefix: &#039;app&#039;,\n          style: &#039;kebab-case&#039;,\n        },\n      ],\n    },\n  },\n  {\n    files: [&#039;**\/*.html&#039;],\n    extends: [...angular.configs.templateRecommended, ...angular.configs.templateAccessibility],\n    rules: {},\n  },\n);<\/code><\/pre>\n<h2>Best Practice: My Recommended Setup<\/h2>\n<h3>Prettier Config Best Practices<\/h3>\n<p>Try adding these two options to make your formatting even <em>prettier<\/em>:<\/p>\n<pre><code class=\"language-json\">{\n  &quot;bracketSameLine&quot;: true, \/\/ avoid useless\/empty final line for multiline html opening tags\n  &quot;printWidth&quot;: 120, \/\/ raise line length to 120 characters (80 is too short for big screens)\n  &quot;singleQuote&quot;: true\n}<\/code><\/pre>\n<blockquote><p>\n<strong>Note:<\/strong> Remove any comments from JSON files to avoid parsing errors.\n<\/p><\/blockquote>\n<ul>\n<li><strong>bracketSameLine<\/strong>: Avoids an extra blank line when you have multiline HTML opening tags, which makes your <em>Angular templates<\/em> cleaner.<\/li>\n<li><strong>printWidth<\/strong>: Sets the maximum line length to 120 characters (instead of the default 80), which is more comfortable on wide monitors.<\/li>\n<\/ul>\n<p>Download this <strong>Prettier<\/strong> config <a href=\"https:\/\/github.com\/L-X-T\/ng-b357\/blob\/main\/.prettierrc.json\">here<\/a>.<\/p>\n<h4>Prettier Ignore File<\/h4>\n<p>Create a <code>.prettierignore<\/code> file at the project root to exclude files and directories from <strong>Prettier<\/strong>:<\/p>\n<pre><code class=\"language-text\">\/.angular\n\/.nx\n\/coverage\n\/dist\nnode_modules<\/code><\/pre>\n<blockquote><p>\n<strong>Note:<\/strong> It's probably a good idea to check you <code>.gitignore<\/code> file for more things to ignore.\n<\/p><\/blockquote>\n<h3>Caution: Prettifying Existing Projects \u26a0\ufe0f<\/h3>\n<p>Be careful when adding <strong>Prettier<\/strong> or changing its config in an existing codebase: it can reformat a lot of files at once. To avoid confusion, make sure you commit only the <strong>Prettier<\/strong>-related changes in a separate commit. That way, you can review formatting changes in isolation and not mix them with other code changes. \ud83d\ude42<\/p>\n<h3>ESLint Config Best Practices<\/h3>\n<p>Now let\u2019s make the <strong>ESLint<\/strong> configuration stricter and more comprehensive. This helps catch potential issues early and ensures best practices across your codebase. Some of these rules are, to be honest, opinionated\u2014but they\u2019re worth it for keeping an enterprise-scale codebase clean and maintainable. Feel free to adjust or remove rules as needed for your team.<\/p>\n<pre><code class=\"language-js\">\/\/ eslint.config.js\n\/\/ @ts-check\nconst eslint = require(&#039;@eslint\/js&#039;);\nconst tseslint = require(&#039;typescript-eslint&#039;);\nconst angular = require(&#039;angular-eslint&#039;);\nconst eslintConfigPrettier = require(&#039;eslint-config-prettier&#039;);\n\nmodule.exports = tseslint.config(\n  {\n    ignores: [&#039;.angular\/**&#039;, &#039;.nx\/**&#039;, &#039;coverage\/**&#039;, &#039;dist\/**&#039;],\n    files: [&#039;**\/*.ts&#039;],\n    extends: [\n      eslint.configs.recommended,\n      ...tseslint.configs.recommended,\n      ...tseslint.configs.stylistic,\n      ...angular.configs.tsRecommended,\n      eslintConfigPrettier,\n    ],\n    processor: angular.processInlineTemplates,\n    rules: {\n      &#039;@angular-eslint\/directive-selector&#039;: [\n        &#039;error&#039;,\n        {\n          type: &#039;attribute&#039;,\n          prefix: &#039;app&#039;,\n          style: &#039;camelCase&#039;,\n        },\n      ],\n      &#039;@angular-eslint\/component-selector&#039;: [\n        &#039;error&#039;,\n        {\n          type: [&#039;attribute&#039;, &#039;element&#039;],\n          prefix: &#039;app&#039;,\n          style: &#039;kebab-case&#039;,\n        },\n      ],\n\n      \/\/ Angular best practices\n      &#039;@angular-eslint\/no-empty-lifecycle-method&#039;: &#039;warn&#039;,\n      &#039;@angular-eslint\/prefer-on-push-component-change-detection&#039;: &#039;warn&#039;,\n      &#039;@angular-eslint\/prefer-output-readonly&#039;: &#039;warn&#039;,\n      &#039;@angular-eslint\/prefer-signals&#039;: &#039;warn&#039;,\n      &#039;@angular-eslint\/prefer-standalone&#039;: &#039;warn&#039;,\n\n      \/\/ TypeScript best practices\n      &#039;@typescript-eslint\/array-type&#039;: [&#039;warn&#039;],\n      &#039;@typescript-eslint\/consistent-indexed-object-style&#039;: &#039;off&#039;,\n      &#039;@typescript-eslint\/consistent-type-assertions&#039;: &#039;warn&#039;,\n      &#039;@typescript-eslint\/consistent-type-definitions&#039;: [&#039;warn&#039;, &#039;type&#039;],\n      &#039;@typescript-eslint\/explicit-function-return-type&#039;: &#039;error&#039;,\n      &#039;@typescript-eslint\/explicit-member-accessibility&#039;: [\n        &#039;error&#039;,\n        {\n          accessibility: &#039;no-public&#039;,\n        },\n      ],\n      &#039;@typescript-eslint\/naming-convention&#039;: [\n        &#039;warn&#039;,\n        {\n          selector: &#039;variable&#039;,\n          format: [&#039;camelCase&#039;, &#039;UPPER_CASE&#039;, &#039;PascalCase&#039;],\n        },\n      ],\n      &#039;@typescript-eslint\/no-empty-function&#039;: &#039;warn&#039;,\n      &#039;@typescript-eslint\/no-empty-interface&#039;: &#039;error&#039;,\n      &#039;@typescript-eslint\/no-explicit-any&#039;: &#039;warn&#039;,\n      &#039;@typescript-eslint\/no-inferrable-types&#039;: &#039;warn&#039;,\n      &#039;@typescript-eslint\/no-shadow&#039;: &#039;warn&#039;,\n      &#039;@typescript-eslint\/no-unused-vars&#039;: &#039;warn&#039;,\n\n      \/\/ JavaScript best practices\n      eqeqeq: &#039;error&#039;,\n      complexity: [&#039;error&#039;, 20],\n      curly: &#039;error&#039;,\n      &#039;guard-for-in&#039;: &#039;error&#039;,\n      &#039;max-classes-per-file&#039;: [&#039;error&#039;, 1],\n      &#039;max-len&#039;: [\n        &#039;warn&#039;,\n        {\n          code: 120,\n          comments: 160,\n        },\n      ],\n      &#039;max-lines&#039;: [&#039;error&#039;, 400], \/\/ my favorite rule to keep files small\n      &#039;no-bitwise&#039;: &#039;error&#039;,\n      &#039;no-console&#039;: &#039;off&#039;,\n      &#039;no-new-wrappers&#039;: &#039;error&#039;,\n      &#039;no-useless-concat&#039;: &#039;error&#039;,\n      &#039;no-var&#039;: &#039;error&#039;,\n      &#039;no-restricted-syntax&#039;: &#039;off&#039;,\n      &#039;no-shadow&#039;: &#039;error&#039;,\n      &#039;one-var&#039;: [&#039;error&#039;, &#039;never&#039;],\n      &#039;prefer-arrow-callback&#039;: &#039;error&#039;,\n      &#039;prefer-const&#039;: &#039;error&#039;,\n      &#039;sort-imports&#039;: [\n        &#039;error&#039;,\n        {\n          ignoreCase: true,\n          ignoreDeclarationSort: true,\n          allowSeparatedGroups: true,\n        },\n      ],\n\n      \/\/ Security\n      &#039;no-eval&#039;: &#039;error&#039;,\n      &#039;no-implied-eval&#039;: &#039;error&#039;,\n    },\n  },\n  {\n    files: [&#039;**\/*.html&#039;],\n    extends: [...angular.configs.templateRecommended, ...angular.configs.templateAccessibility],\n    rules: {\n      \/\/ Angular template best practices\n      &#039;@angular-eslint\/template\/attributes-order&#039;: [\n        &#039;error&#039;,\n        {\n          alphabetical: true,\n          order: [\n            &#039;STRUCTURAL_DIRECTIVE&#039;, \/\/ deprecated, use @if and @for instead\n            &#039;TEMPLATE_REFERENCE&#039;, \/\/ e.g. <code>&lt;input #inputRef&gt;<\/code>\n            &#039;ATTRIBUTE_BINDING&#039;, \/\/ e.g. <code>&lt;input required&gt;<\/code>, <code>id=&quot;3&quot;<\/code>\n            &#039;INPUT_BINDING&#039;, \/\/ e.g. <code>[id]=&quot;3&quot;<\/code>, <code>[attr.colspan]=&quot;colspan&quot;<\/code>,\n            &#039;TWO_WAY_BINDING&#039;, \/\/ e.g. <code>[(id)]=&quot;id&quot;<\/code>,\n            &#039;OUTPUT_BINDING&#039;, \/\/ e.g. <code>(idChange)=&quot;handleChange()&quot;<\/code>,\n          ],\n        },\n      ],\n      &#039;@angular-eslint\/template\/button-has-type&#039;: &#039;warn&#039;,\n      &#039;@angular-eslint\/template\/cyclomatic-complexity&#039;: [&#039;warn&#039;, { maxComplexity: 10 }],\n      &#039;@angular-eslint\/template\/eqeqeq&#039;: &#039;error&#039;,\n      &#039;@angular-eslint\/template\/prefer-control-flow&#039;: &#039;error&#039;,\n      &#039;@angular-eslint\/template\/prefer-ngsrc&#039;: &#039;warn&#039;,\n      &#039;@angular-eslint\/template\/prefer-self-closing-tags&#039;: &#039;warn&#039;,\n      &#039;@angular-eslint\/template\/use-track-by-function&#039;: &#039;warn&#039;,\n    },\n  },\n);<\/code><\/pre>\n<blockquote><p>\n<strong>Disclaimer:<\/strong> This is my current opinion and subject to improvements. Feel free to hook me up on <a href=\"https:\/\/www.linkedin.com\/posts\/thalhammer_ng-best-practices-prettier-eslint-angulararchitects-activity-7336703800520466434-uwZN?utm_source=share&amp;utm_medium=member_desktop&amp;rcm=ACoAABHd8yoBWJL9SFscJIADQAFeyoSQ4ve5LBU\">LinkedIn<\/a>, <a href=\"https:\/\/bsky.app\/profile\/lxt.bsky.social\/post\/3lqwo5k26s22t\">bluesky<\/a> or <a href=\"https:\/\/x.com\/LX_T\/status\/1930937697381593480\">X<\/a>.\n<\/p><\/blockquote>\n<p>Download this <a href=\"https:\/\/github.com\/L-X-T\/ng-b357\/blob\/main\/eslint.config.js\"><strong>ESLint<\/strong> config<\/a>.<\/p>\n<h2>Workflow Integration<\/h2>\n<p>To ensure that your code is always formatted and linted correctly, integrate <strong>Prettier<\/strong> and <strong>ESLint<\/strong> into your development workflow: I run <strong>Prettier<\/strong> automatically on every save. That works charmingly in Cursor, VS Code and Webstorm (even NeoVIM, I guess). Sometimes I just write my code in one ugly line and then press <code>Cmd + S<\/code> (yes Mac user, but I do have a Pixel phone \u2013 best combo \ud83d\ude1c) to format it.<\/p>\n<p>And then before committing, I run <strong>ESLint<\/strong> to check for any issues. This can be done manually (that's what I prefer) or automatically using a pre-commit hook. This is fully integrated in my manual pre-commit workflow:<\/p>\n<ul>\n<li>run <code>ng lint<\/code> to check for linting issues<\/li>\n<li>run <code>ng b<\/code> to check if the project builds<\/li>\n<li>run <code>ng e2e<\/code> to ensure e2e tests pass<\/li>\n<\/ul>\n<p>If you're using <code>Nx<\/code> then just replace <code>ng<\/code> with <code>nx<\/code> in the commands above.<\/p>\n<h2>Workshops<\/h2>\n<p>If you want to deep-dive into <em>Angular<\/em>, we offer a variety of workshops \u2013 both in English and German.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.angulararchitects.io\/en\/training\/angular-best-practices\/\"><strong>Best Practices Workshop<\/strong><\/a> \ud83d\udcc8 (including <strong>Prettier<\/strong> and <strong>ESLint<\/strong> setup)<\/li>\n<li><a href=\"https:\/\/www.angulararchitects.io\/en\/training\/angular-accessibility-workshop\/\"><strong>Accessibility Workshop<\/strong><\/a> \u267f<\/li>\n<li><a href=\"https:\/\/www.angulararchitects.io\/en\/training\/angular-performance-optimization-workshop\/\"><strong>Performance Workshop<\/strong><\/a> \ud83d\ude80<\/li>\n<li><a href=\"https:\/\/www.angulararchitects.io\/en\/training\/angular-styling-workshop\/\"><strong>NG Styling Workshop<\/strong><\/a> \ud83c\udfa8<\/li>\n<\/ul>\n<h2>Conclusion<\/h2>\n<p>Setting up <strong>Prettier<\/strong> and <strong>ESLint<\/strong> in your <em>Angular<\/em> project is a straightforward process that can significantly enhance your code quality and maintainability. By following the steps outlined in this post, you can ensure that your code is not only functional but also beautifully formatted and adheres to best practices.<\/p>\n<p>This blog post was written by <a href=\"https:\/\/alex.thalhammer.name\">Alexander Thalhammer<\/a>. Comment it on <a href=\"https:\/\/www.linkedin.com\/posts\/thalhammer_ng-best-practices-prettier-eslint-angulararchitects-activity-7336703800520466434-uwZN?utm_source=share&amp;utm_medium=member_desktop&amp;rcm=ACoAABHd8yoBWJL9SFscJIADQAFeyoSQ4ve5LBU\">LinkedIn<\/a>, <a href=\"https:\/\/bsky.app\/profile\/lxt.bsky.social\/post\/3lqwo5k26s22t\">bluesky<\/a> or <a href=\"https:\/\/x.com\/LX_T\/status\/1930937697381593480\">X<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is post 2 of 2 in the series &ldquo;Angular Project Setup&rdquo; The Perfect Project Setup for Angular: Structure and Automation for More Quality NG Best Practices: Prettier &#038; ESLint I consider myself a strict nerd when it comes to project rules, and I have a great need for clean, readable code. Hence, in this [&hellip;]<\/p>\n","protected":false},"author":21,"featured_media":30611,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":""},"categories":[18],"tags":[],"class_list":["post-30588","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","post_series-angular-project-setup-en"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>NG Best Practices: Prettier &amp; ESLint - ANGULARarchitects<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"NG Best Practices: Prettier &amp; ESLint - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"This is post 2 of 2 in the series &ldquo;Angular Project Setup&rdquo; The Perfect Project Setup for Angular: Structure and Automation for More Quality NG Best Practices: Prettier &#038; ESLint I consider myself a strict nerd when it comes to project rules, and I have a great need for clean, readable code. Hence, in this [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2025-06-06T09:11:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-09T18:27:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/06\/bp-perfect-project-setup-prettier-eslint-hero-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1707\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Alexander Thalhammer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@LX_T\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alexander Thalhammer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/\"},\"author\":{\"name\":\"Alexander Thalhammer\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/eefb0cd4d115dfd406a02b6dbc760d45\"},\"headline\":\"NG Best Practices: Prettier &#038; ESLint\",\"datePublished\":\"2025-06-06T09:11:04+00:00\",\"dateModified\":\"2025-08-09T18:27:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/\"},\"wordCount\":816,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/06\/bp-perfect-project-setup-prettier-eslint-hero-scaled.jpg\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/\",\"name\":\"NG Best Practices: Prettier & ESLint - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/06\/bp-perfect-project-setup-prettier-eslint-hero-scaled.jpg\",\"datePublished\":\"2025-06-06T09:11:04+00:00\",\"dateModified\":\"2025-08-09T18:27:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/06\/bp-perfect-project-setup-prettier-eslint-hero-scaled.jpg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/06\/bp-perfect-project-setup-prettier-eslint-hero-scaled.jpg\",\"width\":2560,\"height\":1707,\"caption\":\"Best Prectices Perfect Project Setup Prettier ESLint Hero Image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"NG Best Practices: Prettier &#038; ESLint\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"name\":\"ANGULARarchitects\",\"description\":\"AngularArchitects.io\",\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\",\"name\":\"ANGULARarchitects\",\"alternateName\":\"SOFTWAREarchitects\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"width\":644,\"height\":216,\"caption\":\"ANGULARarchitects\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/github.com\/angular-architects\",\"https:\/\/www.linkedin.com\/company\/angular-architects\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/eefb0cd4d115dfd406a02b6dbc760d45\",\"name\":\"Alexander Thalhammer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/23f1b6f9b1ee7d04247b8320851762347d56c76b1537d100d07390d6d919b78d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/23f1b6f9b1ee7d04247b8320851762347d56c76b1537d100d07390d6d919b78d?s=96&d=mm&r=g\",\"caption\":\"Alexander Thalhammer\"},\"sameAs\":[\"https:\/\/x.com\/LX_T\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"NG Best Practices: Prettier & ESLint - ANGULARarchitects","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/","og_locale":"en_US","og_type":"article","og_title":"NG Best Practices: Prettier & ESLint - ANGULARarchitects","og_description":"This is post 2 of 2 in the series &ldquo;Angular Project Setup&rdquo; The Perfect Project Setup for Angular: Structure and Automation for More Quality NG Best Practices: Prettier &#038; ESLint I consider myself a strict nerd when it comes to project rules, and I have a great need for clean, readable code. Hence, in this [&hellip;]","og_url":"https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/","og_site_name":"ANGULARarchitects","article_published_time":"2025-06-06T09:11:04+00:00","article_modified_time":"2025-08-09T18:27:02+00:00","og_image":[{"width":2560,"height":1707,"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/06\/bp-perfect-project-setup-prettier-eslint-hero-scaled.jpg","type":"image\/jpeg"}],"author":"Alexander Thalhammer","twitter_card":"summary_large_image","twitter_creator":"@LX_T","twitter_misc":{"Written by":"Alexander Thalhammer","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/"},"author":{"name":"Alexander Thalhammer","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/eefb0cd4d115dfd406a02b6dbc760d45"},"headline":"NG Best Practices: Prettier &#038; ESLint","datePublished":"2025-06-06T09:11:04+00:00","dateModified":"2025-08-09T18:27:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/"},"wordCount":816,"commentCount":0,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/06\/bp-perfect-project-setup-prettier-eslint-hero-scaled.jpg","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/","url":"https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/","name":"NG Best Practices: Prettier & ESLint - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/06\/bp-perfect-project-setup-prettier-eslint-hero-scaled.jpg","datePublished":"2025-06-06T09:11:04+00:00","dateModified":"2025-08-09T18:27:02+00:00","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/06\/bp-perfect-project-setup-prettier-eslint-hero-scaled.jpg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/06\/bp-perfect-project-setup-prettier-eslint-hero-scaled.jpg","width":2560,"height":1707,"caption":"Best Prectices Perfect Project Setup Prettier ESLint Hero Image"},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/best-practices-prettier-eslint\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"NG Best Practices: Prettier &#038; ESLint"}]},{"@type":"WebSite","@id":"https:\/\/www.angulararchitects.io\/en\/#website","url":"https:\/\/www.angulararchitects.io\/en\/","name":"ANGULARarchitects","description":"AngularArchitects.io","publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.angulararchitects.io\/en\/#organization","name":"ANGULARarchitects","alternateName":"SOFTWAREarchitects","url":"https:\/\/www.angulararchitects.io\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","width":644,"height":216,"caption":"ANGULARarchitects"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/github.com\/angular-architects","https:\/\/www.linkedin.com\/company\/angular-architects\/"]},{"@type":"Person","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/eefb0cd4d115dfd406a02b6dbc760d45","name":"Alexander Thalhammer","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/23f1b6f9b1ee7d04247b8320851762347d56c76b1537d100d07390d6d919b78d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/23f1b6f9b1ee7d04247b8320851762347d56c76b1537d100d07390d6d919b78d?s=96&d=mm&r=g","caption":"Alexander Thalhammer"},"sameAs":["https:\/\/x.com\/LX_T"]}]}},"_links":{"self":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/30588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/comments?post=30588"}],"version-history":[{"count":10,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/30588\/revisions"}],"predecessor-version":[{"id":30989,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/30588\/revisions\/30989"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media\/30611"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=30588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=30588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=30588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}