{"id":979,"date":"2021-03-21T23:53:47","date_gmt":"2021-03-21T22:53:47","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=979"},"modified":"2021-03-21T23:53:47","modified_gmt":"2021-03-21T22:53:47","slug":"using-eslint-and-prettier-with-vscode-in-an-angular-project","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2021\/03\/21\/using-eslint-and-prettier-with-vscode-in-an-angular-project\/","title":{"rendered":"Using ESLint and Prettier with VScode in an Angular Project ?"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<p>In this setup guide we will learn how to use\u00a0<a href=\"https:\/\/prettier.io\/\">Prettier<\/a>\u00a0to take care of our code formatting and\u00a0<a href=\"https:\/\/eslint.org\/\">ESLint<\/a>\u00a0to take care of your code style in an\u00a0<a href=\"https:\/\/angular.io\/\">Angular<\/a>\u00a0application.<\/p>\n\n\n\n<p>Create an angular application using the\u00a0<a href=\"https:\/\/cli.angular.io\/\">angular-cli<\/a>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ng new ng-pretty\r\ncd ng-pretty<\/code><\/pre>\n\n\n\n<p>Install the required dependencies:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code># Install ESLint\r\nnpm install --save-dev eslint\r\n\r\n# Install additional plugins\r\nnpm install --save-dev @typescript-eslint\/eslint-plugin eslint-plugin-prettier\r\n\r\n# Install Prettier and Prettier-ESLint dependencies\r\nnpm install --save-dev prettier prettier-eslint eslint-config-prettier<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<ul><li><a href=\"https:\/\/eslint.org\/\">eslint<\/a>: The core ESLint linting library<\/li><li><a href=\"https:\/\/github.com\/typescript-eslint\/typescript-eslint\">@typescript-eslint\/eslint-plugin<\/a>: A plugin that contains a bunch of ESLint rules that are TypeScript specific<\/li><li><a href=\"https:\/\/prettier.io\/\">prettier<\/a>: The core prettier library<\/li><li><a href=\"https:\/\/github.com\/prettier\/eslint-config-prettier\">eslint-config-prettier<\/a>: Disables ESLint rules that might conflict with prettier<\/li><li><a href=\"https:\/\/github.com\/prettier\/eslint-plugin-prettier\">eslint-plugin-prettier<\/a>: Runs prettier as an ESLint rule.<\/li><\/ul>\n\n\n\n<p>Add a configuration file for ESLint, named\u00a0<code><strong>.eslintrc.json<\/strong><\/code>\u00a0containing:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\r\n  \"parser\": \"@typescript-eslint\/parser\", \/\/ Specifies the ESLint parser\r\n  \"extends\": &#91;\r\n    \"plugin:@typescript-eslint\/recommended\", \/\/ Uses the recommended rules from the @typescript-eslint\/eslint-plugin\r\n    \"prettier\/@typescript-eslint\", \/\/ Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint\/eslint-plugin that would conflict with prettier\r\n    \"plugin:prettier\/recommended\" \/\/ Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.\r\n  ],\r\n  \"parserOptions\": {\r\n    \"ecmaVersion\": 2020, \/\/ Allows for the parsing of modern ECMAScript features\r\n    \"sourceType\": \"module\" \/\/ Allows for the use of imports\r\n  },\r\n  \"rules\": {\r\n    \/\/ Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs\r\n  }\r\n}<\/code><\/pre>\n\n\n\n<ul><li>You can add your specific linting rules in the&nbsp;<code>rules<\/code>&nbsp;property.<\/li><\/ul>\n\n\n\n<p>It&#8217;s a good idea not to format the dependencies folder, since every time you add a new dependency npm usually does that, for this you should add an\u00a0<code><strong>.eslintignore<\/strong><\/code>\u00a0file containing:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>package.json\npackage-lock.json\ndist<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>Modify the\u00a0<code>lint<\/code>\u00a0script in your\u00a0<code>package.json<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"scripts\": {\r\n  \"lint\": \"tsc --noEmit &amp;&amp; eslint . --ext js,ts,json --quiet --fix\",\r\n}<\/code><\/pre>\n\n\n\n<p>This will typecheck your app, and run the linter through all Javascript, JSON and Typescript files. Any ESLint errors that can be automatically fixed will be fixed with this command, but any other errors will be printed out in the command line.<\/p>\n\n\n\n<p>At this point, ESLint will work correctly with TypeScript. You can lint your project\u2019s JavaScript and TypeScript files by running\u00a0<code>npm run lint<\/code>.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Add a configuration file for Prettier, named\u00a0<code>.prettierrc.json<\/code>\u00a0containing:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\r\n  \"singleQuote\": true,\r\n  \"trailingComma\": \"none\",\r\n  \"endOfLine\": \"auto\"\r\n}<\/code><\/pre>\n\n\n\n<p>you can\u00a0<a href=\"https:\/\/prettier.io\/docs\/en\/configuration.html\">configure<\/a>\u00a0prettier any way you like ?<\/p>\n\n\n\n<p>Install the following Visual Studio Code extensions:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>dbaeumer.vscode-eslint\r\nesbenp.prettier-vscode<\/code><\/pre>\n\n\n\n<p>Add the following to your<strong>\u00a0<code>.vscode\/settings.json<\/code><\/strong>\u00a0file:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\r\n  \"&#91;javascript]\": {\r\n    \"editor.defaultFormatter\": \"dbaeumer.vscode-eslint\",\r\n    \"editor.codeActionsOnSave\": {\r\n      \"source.fixAll.eslint\": true\r\n    },\r\n    \"editor.formatOnSave\": false\r\n  },\r\n  \"&#91;typescript]\": {\r\n    \"editor.defaultFormatter\": \"dbaeumer.vscode-eslint\",\r\n    \"editor.codeActionsOnSave\": {\r\n      \"source.fixAll.eslint\": true\r\n    },\r\n    \"editor.formatOnSave\": false\r\n  },\r\n  \"&#91;json]\": {\r\n    \"editor.defaultFormatter\": \"dbaeumer.vscode-eslint\",\r\n    \"editor.codeActionsOnSave\": {\r\n      \"source.fixAll.eslint\": true\r\n    },\r\n    \"editor.formatOnSave\": false\r\n  }\r\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>And that\u2019s it! You should now have complete Visual Studio Code integration. When you violate a linting rule, you\u2019ll be visually alerted, and when you save a file, ESLint will attempt to fix any issues using Prettier. This should work for both JavaScript and TypeScript.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><span class=\"has-inline-color has-vivid-red-color\"><strong>PS:<\/strong><\/span> <em>\u00a0with <span class=\"has-inline-color has-vivid-cyan-blue-color\">ng new<\/span> command it will create\u00a0<strong><code>karma.conf.js<\/code>\u00a0<\/strong>and\u00a0<code><strong>protractor.conf.js<\/strong><\/code>\u00a0that are not compatible with somes eslint rules like\u00a0<code>no-empty-function<\/code>\u00a0or\u00a0<code>no-var-require<\/code>. I must add them to eslintignore.<\/em><\/p>\n\n\n\n<h5>Reference:<\/h5>\n\n\n\n<p><a href=\"https:\/\/dev.to\/dreiv\/\">https:\/\/dev.to\/dreiv\/<\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this setup guide we will learn how to use\u00a0Prettier\u00a0to take care of our code formatting and\u00a0ESLint\u00a0to take care of your code style in an\u00a0Angular\u00a0application. Create an angular application using the\u00a0angular-cli: Install the required dependencies: eslint: The core ESLint linting library @typescript-eslint\/eslint-plugin: A plugin that contains a bunch of ESLint rules that are TypeScript specific [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,5,83],"tags":[40,252,254,249,253],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/979"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=979"}],"version-history":[{"count":2,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/979\/revisions"}],"predecessor-version":[{"id":981,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/979\/revisions\/981"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=979"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=979"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}