What’s the best code formatting library for JavaScript?

When it comes to code formatting styles — developers often believe in the inherent rightness of their favorite style. So let´s discuss about the ESLint and Prettier libraries.

ESLint

It´s 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.

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’ll be doing full a comparison at the end of this article. For now, let’s look at how we can set up ESLint in our projects.

You can use npm to install ESLint with:

npm install eslint --save-dev

Then run …

eslint --init 

…to initialize ESlint in the project. It will ask you a series of questions, like this.

How would you like to use ESLint?

There are three options:

• To check syntax only.
• To check syntax and find problems.
• To check syntax, find problems, and enforce code style.

Select the last option, which covers all areas.

What type of modules does your project use?

The first option is“JavaScript module (import/export).”This option is suitable if babel is installed in your project. All frameworks, such as React, Vue, and Angular, use babel. So, if you’re working on those frameworks choice this option. The second option is “CommonJS”which is good for Node.js projects or any other JavaScript project which doesn’t use babel.

Which framework does your project use?

You just need to select the framework you are using. React, Vue, or Other.

Where does your code run?

Select Browser if your project is running in the browser. React, Vue, and Angular projects fall under this category. If you’re running a Node.js project select the Node option.

How would you like to define a style for your project?

There are three options under this, but most developers go with the default “Use a popular style guide”option to avoid confusion.

What format do you want your config file to be in?

In this case, I will choose .json

After completing this process it will take some time to install dependencies and you will find a .eslintrc.json file:

module.exports = {
   env: {
     browser: true,
     es6: true,
   },
   extends: [
     ‘plugin:react/recommended’,
     ‘airbnb’,
   ],
   globals: {
     Atomics: ‘readonly’,
     SharedArrayBuffer: ‘readonly’,
   },
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
     },
     ecmaVersion: 11,
     sourceType: ‘module’,
   },
   plugins: [
     ‘react’,
   ],
   rules: {
   },
};

You can add rules under the rules section like this:

rules : {
  no-console: 0; 
  no-empty: 0;
  no-irregular-whitespace:0;
}

As the last step, you need to update the package.json file scripts to run the lint as an npm command:

script:{
    "lint":"eslint"
}
//npm run lint

This is pretty much it for ESlint. Now let’s look at Prettier.

Prettier

Prettier was introduced in 2016. We can  introduce it as a specialized code formatting tool.

If you use Prettier it will completely rewrite your code according to a set of rules. Don’t worry, it will not change the content of the code but it will change the structural view.

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.

We will use the VS Code prettier extension to demonstrate the configuration of Prettier.

First, let´s install the VS Code Prettier extension.

Then, open the command palette, using Command + Shift + P on Mac or Control + Shift + P on Windows. In the command palette search “format”, then choose Format Document.

If you’ve 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.

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 documentation as well.

ESLint Vs Prettier

• 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’t have such an ability.

• Also, ESLint will let you know what’s 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’t care about you at all. It simply formats all your code to a different structure format-wise.

• On the other hand, this whole rewriting process in Prettier prevents the developer from making any mistakes.

• max-len, no-mixed-spaces-and-tabs, keyword-spacing, comma-style these are some popular formatting rules in Prettier.

• In addition to the above type of rules, ESLint also considers code quality rules such as no-unused-vars, no-extra-bind, no-implicit-globals, prefer-promise-reject-errors.

Overall, these methods seem to complement each other, while having some similarities.

So why don’t we use both of them? Yes, we can use both, and the new trend is to VS Code extensions for both ESLint and Prettier, since it’s pretty easy to do so. Also, Prettier has a guide about integrating with ESLint.

Reference:

https://betterprogramming.pub/eslint-vs-prettier-57882d0fec1d