ESLint & Prettier: Enable semi option without complaints

Intro

If you have lint compliants as following when using ESLint( and plugins likeeslint-plugin-prettier) with Prettier, read this article.

1:33  error  Insert ';'  prettier/prettier

Delete ';' eslint(prettier/prettier)

Use semicolons in JavaScript

In JavaScript, it is not mandatory to use a semicolon at the end of each line. However, I am opinionated with a semicolon to end each statement explicitly.

I don't want to argue which is better. If you do not enforce semicolon usage (or omission) in any particular way, ignore this article.

let varName1 = "Alex";

let varName2 = "David"    // no semicolon at the end of the line

Code formater and beautifier tool Prettier is sticky to this style and enabled semi to true by default.

Meanwhile, we usually combine a linter tool like ESLint to do static code checker, but ESLint has its own rules to format code which may not be consitent with Prettier.

Different default semi rules

extends: [
    "eslint:recommended",
]

However, ESLint's recommended rules don't like semicolons, and don't allow semicolons at the end of the code lines, and overrides Prettier's semi option setting.

In the other word, the ASI(Automatical Semicolon Insertion) will not work even when we turn on Prettier's semi option as ESLint recommended rules turns it off by default.

They conflict with each other.

While using them together:

rules: {
     // this turns on the rule provided by this plugin, which runs Prettier from within ESLint
    "prettier/prettier": "error",  // In eslintrc.js
}

When we run eslint to check the code, complaints come out as Prettier still expects semicolons while ESLint supressing the semicolons.

   1:33  error  Insert ';'  prettier/prettier
   2:24  error  Insert ';'  prettier/prettier
   3:22  error  Insert ';'  prettier/prettier
   6:17  error  Insert ';'  prettier/prettier

This is really annoying.

Turn on ESLint's semi rule

So, what about turning on ESLint's semi rule in eslintrc.js?

rules: {
     // add this rule to use semicolon always
    "semi": ["error", "always", { "omitLastInOneLineBlock": false }],
}

Yes, ASI is enabled, however, the linter still complains:

Delete ';' eslint(prettier/prettier)

The tooltip will appear on each semicolon after I apply the semi rule in the config file. I guess(I am not sure) Prettier's semi option is turned off by ESLint at this time, so Prettier asks to delete the added semicolons.

WTF?! Is it possible to let them work togegher?

Solution

Way 1: Surrender to ESLint

To overcome this, most people just turn off the Prettier's semi option via setting it to false and restore eslint default rules. This means you succumb to ESLint and giv up to use Prettier's semi option so as to avoid the annoying complains.

{
  "semi": false,    // In .prettierrc file
}

Yes, its very simbple to get rid of it: I wont use this feature any more!!!

Way 2: Pass ESLint option config to Prettier

However, you may be as optoinated as me and still unhappy to do it this way.

I have also struggled to get rid of theses complaints, but there is a way to fix this.

In Prettier config file, we enable semi option:

{
  "semi": true,  // We still have to keep it default or true explicitly instead false!
}

In ESLint config file eslintrc.js:

rules: {
    // "prettier/prettier": "error",   // change this line to the following 2 lines
    // Pass ESLint semi config to Prettier, the semi option will merge and override the semi option set in .prettierrc
    "prettier/prettier": ["error", {"semi": true}],
    //"semi": ["error", "always", { "omitLastInOneLineBlock": false }],  // Turn on ESLint's semi rule is not necessary
}

By doing this, ASI is enabled in our JS project, and there are no complaints any more. The world is becomes peaceful! No conflicts and they work together.

Cheers!