{"id":976,"date":"2021-03-21T23:35:15","date_gmt":"2021-03-21T22:35:15","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=976"},"modified":"2021-03-21T23:35:15","modified_gmt":"2021-03-21T22:35:15","slug":"eslint-vs-prettier","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2021\/03\/21\/eslint-vs-prettier\/","title":{"rendered":"ESLint vs. Prettier"},"content":{"rendered":"\n<p>What\u2019s the best code formatting library for JavaScript?<\/p>\n\n\n\n<p>When it comes to code formatting styles \u2014 developers often believe in the inherent\u00a0<em>rightness\u00a0<\/em>of their favorite style. So let\u00b4s discuss about the <strong>ESLint<\/strong> and <strong>Prettier<\/strong> libraries.<\/p>\n\n\n\n<h4><strong><span class=\"has-inline-color has-vivid-cyan-blue-color\">ESLint<\/span><\/strong><\/h4>\n\n\n\n<p>It\u00b4s the oldest one of both. ESLint was created around 2013 alongside TSLint (now deprecated). It has become one of the most popular libraries in JavaScript with more than 11 million weekly downloads.<\/p>\n\n\n\n<p>ESLint analyzes your code for style and coding errors that can lead to bugs. Compared to Prettier, ESLint does more to prevent coding errors. There are other differences between them and I\u2019ll be doing full a comparison at the end of this article. For now, let&#8217;s look at how we can set up ESLint in our projects.<\/p>\n\n\n\n<p>You can use\u00a0<a href=\"https:\/\/www.npmjs.com\/package\/eslint\">npm<\/a>\u00a0to install ESLint with:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install eslint --save-dev<\/code><\/pre>\n\n\n\n<p>Then run &#8230;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>eslint --init <\/code><\/pre>\n\n\n\n<p>&#8230;to initialize ESlint in the project. It will ask you a series of questions, like this.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" src=\"https:\/\/miro.medium.com\/max\/2832\/1*hW8F3C-sFqAKnUhYSrVK_g.png\" alt=\"\" width=\"691\" height=\"334\"\/><\/figure>\n\n\n\n<h5><strong>How would you like to use ESLint?<\/strong><\/h5>\n\n\n\n<p>There are three options:<\/p>\n\n\n\n<ul><li>To check syntax only.<\/li><li>To check syntax and find problems.<\/li><li>To check syntax, find problems, and enforce code style.<\/li><\/ul>\n\n\n\n<p> Select the last option, which covers all areas.<\/p>\n\n\n\n<h5><strong>What type of modules does your project use?<\/strong><\/h5>\n\n\n\n<p id=\"6d9d\">The first option is\u201cJavaScript module (import\/export).\u201dThis option is suitable if\u00a0<a href=\"https:\/\/babeljs.io\/docs\/en\/\">babel\u00a0<\/a>is installed in your project. All frameworks, such as React, Vue, and Angular, use babel. So, if you\u2019re working on those frameworks choice this option. The second option is \u201cCommonJS<em>\u201d<\/em>which is good for Node.js projects or any other JavaScript project which doesn&#8217;t use babel.<\/p>\n\n\n\n<h5 id=\"3a22\"><strong>Which framework does your project use?<\/strong><\/h5>\n\n\n\n<p>You just need to select the framework you are using. React, Vue, or Other.<\/p>\n\n\n\n<h5><strong>Where does your code run?<\/strong><\/h5>\n\n\n\n<p>Select Browser if your project is running in the browser. React, Vue, and Angular projects fall under this category. If you\u2019re running a Node.js project select the Node option.<\/p>\n\n\n\n<h5 id=\"849a\"><strong>How would you like to define a style for your project?<\/strong><\/h5>\n\n\n\n<p id=\"7461\">There are three options under this, but most developers go with the default \u201cUse a popular style guide\u201d<strong><\/strong>option to avoid confusion.<\/p>\n\n\n\n<h5 id=\"1b7a\"><strong>What format do you want your config file to be in?<\/strong><\/h5>\n\n\n\n<p id=\"0032\">In this case, I will choose .json<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>After completing this process it will take some time to install dependencies and you will find a<strong> .eslintrc.json<\/strong> file:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>module.exports = {\r\n   env: {\r\n     browser: true,\r\n     es6: true,\r\n   },\r\n   extends: &#91;\r\n     \u2018plugin:react\/recommended\u2019,\r\n     \u2018airbnb\u2019,\r\n   ],\r\n   globals: {\r\n     Atomics: \u2018readonly\u2019,\r\n     SharedArrayBuffer: \u2018readonly\u2019,\r\n   },\r\n   parserOptions: {\r\n     ecmaFeatures: {\r\n       jsx: true,\r\n     },\r\n     ecmaVersion: 11,\r\n     sourceType: \u2018module\u2019,\r\n   },\r\n   plugins: &#91;\r\n     \u2018react\u2019,\r\n   ],\r\n   rules: {\r\n   },\r\n};<\/code><\/pre>\n\n\n\n<p>You can add rules under the rules section like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>rules : {\r\n  no-console: 0; \r\n  no-empty: 0;\r\n  no-irregular-whitespace:0;\r\n}<\/code><\/pre>\n\n\n\n<p>As the last step, you need to update the package.json file scripts to run the lint as an npm command:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>script:{\r\n    \"lint\":\"eslint\"\r\n}\r\n\/\/npm run lint<\/code><\/pre>\n\n\n\n<p>This is pretty much it for ESlint. Now let&#8217;s look at Prettier.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h4><span class=\"has-inline-color has-vivid-cyan-blue-color\">Prettier<\/span><\/h4>\n\n\n\n<p>Prettier was introduced in 2016. We can \u00a0introduce it as a\u00a0<em>specialized code formatting tool<\/em>.<\/p>\n\n\n\n<p>If you use Prettier it will completely rewrite your code according to a set of rules. Don&#8217;t worry, it will not change the\u00a0<em>content<\/em>\u00a0of the code but it will change\u00a0<em>the structural view<\/em>.<\/p>\n\n\n\n<p>The aim of Prettier is to put an end to arguments about code style. Developers just need to write the code and Prettier will take care of formatting. Prettier supports many languages such as JS, TS, HTML, CSS, JSON, YML, and GrapQL, as well as frameworks like Angular, Vue, and React.<\/p>\n\n\n\n<p id=\"6ef2\">We will use the VS Code prettier extension to demonstrate the configuration of Prettier.<\/p>\n\n\n\n<p id=\"6355\">First, let\u00b4s install the VS Code Prettier extension.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" src=\"https:\/\/miro.medium.com\/max\/1919\/1*9xsCTcSHgpqlRCjDyDhNdw.png\" alt=\"\" width=\"871\" height=\"473\"\/><\/figure>\n\n\n\n<p>Then, open the command palette, using Command + Shift + P on Mac or Control + Shift + P on Windows. In the command palette search \u201cformat\u201d, then choose Format Document.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" src=\"https:\/\/miro.medium.com\/max\/1920\/1*6ExkLQL9RG2GHmCQCPmxSg.png\" alt=\"\" width=\"790\" height=\"444\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p id=\"0373\">If you\u2019ve previously configured any code formatters, there will be a prompt. Select the Configure option from there and you will be asked to choose the formatter you need to use. In this case, select Prettier.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Prettier will then completely rewrite the structure of your code according to the ruleset. There are many features, like auto-formatting on the file save, to make your coding life easier. You can find those instructions in their\u00a0<a href=\"https:\/\/prettier.io\/docs\/en\/index.html\">documentation\u00a0<\/a>as well.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h4><span class=\"has-inline-color has-vivid-cyan-blue-color\">ESLint Vs Prettier<\/span><\/h4>\n\n\n\n<ul><li>ESlint is not only a code formatter, it also helps developers to find coding errors. For Example, ESLint will give you a warning if you use a variable without declaring it. Prettier doesn&#8217;t have such an ability.<\/li><\/ul>\n\n\n\n<ul><li>Also, ESLint will let you know what\u2019s wrong with your code formatting and give you options to fix the issue. Then you can select one from those options. Prettier, on the other hand, doesn&#8217;t care about you at all. It simply formats all your code to a different structure format-wise.<\/li><\/ul>\n\n\n\n<ul><li>On the other hand, this whole rewriting process in Prettier prevents the developer from making any mistakes.<\/li><\/ul>\n\n\n\n<ul><li><a href=\"https:\/\/eslint.org\/docs\/rules\/max-len\">max-len<\/a>,\u00a0<a href=\"https:\/\/eslint.org\/docs\/rules\/no-mixed-spaces-and-tabs\">no-mixed-spaces-and-tabs<\/a>,\u00a0<a href=\"https:\/\/eslint.org\/docs\/rules\/keyword-spacing\">keyword-spacing<\/a>,\u00a0<a href=\"https:\/\/eslint.org\/docs\/rules\/comma-style\">comma-style<\/a>\u00a0these are some popular formatting rules in Prettier.<\/li><\/ul>\n\n\n\n<ul><li>In addition to the above type of rules, ESLint also considers code quality rules such as\u00a0<a href=\"https:\/\/eslint.org\/docs\/rules\/no-unused-vars\">no-unused-vars<\/a>,\u00a0<a href=\"https:\/\/eslint.org\/docs\/rules\/no-extra-bind\">no-extra-bind<\/a>,\u00a0<a href=\"https:\/\/eslint.org\/docs\/rules\/no-implicit-globals\">no-implicit-globals<\/a>,\u00a0<a href=\"https:\/\/eslint.org\/docs\/rules\/prefer-promise-reject-errors\">prefer-promise-reject-errors<\/a>.<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p id=\"0d18\">Overall, these methods seem to complement each other, while having some similarities.<\/p>\n\n\n\n<p id=\"afd7\">So why don&#8217;t we use both of them? Yes, we\u00a0<em>can\u00a0<\/em>use both, and the new trend is to VS Code extensions for both ESLint and Prettier, since it\u2019s pretty easy to do so. Also, Prettier has a\u00a0<a href=\"https:\/\/prettier.io\/docs\/en\/integrating-with-linters.html\">guide\u00a0<\/a>about integrating with ESLint.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h5>Reference:<\/h5>\n\n\n\n<p><a href=\"https:\/\/betterprogramming.pub\/eslint-vs-prettier-57882d0fec1d\">https:\/\/betterprogramming.pub\/eslint-vs-prettier-57882d0fec1d<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What\u2019s the best code formatting library for JavaScript? When it comes to code formatting styles \u2014 developers often believe in the inherent\u00a0rightness\u00a0of their favorite style. So let\u00b4s discuss about the ESLint and Prettier libraries. ESLint It\u00b4s the oldest one of both. ESLint was created around 2013 alongside TSLint (now deprecated). It has become one of [&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":[250,252,251,249],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/976"}],"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=976"}],"version-history":[{"count":2,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/976\/revisions"}],"predecessor-version":[{"id":978,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/976\/revisions\/978"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=976"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=976"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}