Upgrade your Code Quality with Linter and Formatter (Part 3)

Congrats! You’ve come a long way, you have upgraded your code standard one step further, even small change is much better than nothing.

As promised in Part 2, we will talk about the combination of ESLint and Prettier in this article.

Okay, the idea is

• When we run ESLint
• We want ESLint to include Prettier format rules as well
• In addition to ESLint code standard errors, ESLint also checks the included format rules of prettier and throws errors if your code doesn’t meet those rules.

As I said in Part 1, ESLint allows us to add custom plugins which contain our own rules.

Thanks to the Author and Contributors of “eslint-plugin-prettier” and “eslint-config-prettier” packages, these two will help Prettier work with ESLint.

eslint-plugin-prettier: runs Prettier as ESLint rules

eslint-config-prettier: turns off ESLint rules which conflict with Prettier format rules. I forgot to mention that ESLint also has some format rules, that’s why it may conflict. For example: semicolon, indent, quote.

Let’s install them and see how they works

Install the packages:

1yarn add --dev eslint-config-prettier eslint-plugin-prettier

Add configuration to eslint.config.mjs

1import globals from "globals";
2import pluginJs from "@eslint/js";
3
4// add this one
5import prettierPluginRecommended from 'eslint-plugin-prettier/recommended'
6
7
8export default [
9  { files: ["**/*.js"], languageOptions: { sourceType: "commonjs" } },
10  { languageOptions: { globals: globals.browser } },
11  pluginJs.configs.recommended,
12
13  // add this one
14  prettierPluginRecommended,
15  
16  {
17    rules: {
18      "prefer-const": "error"
19    }
20  }
21];

Update the code and prettier config before running the command:

Only add semicolon to all lines

Press enter or click to view image in full size

hello.js

index.js

Set “semi” to false in .prettierrc

Execute eslint command and check the result:

1npx eslint src

Result:

Press enter or click to view image in full size

We got errors with annotations “prettier/prettier” at the right end.

Running eslint command with “ — fix” will auto-fix these “semicolon” errors also.

That is it! With 2 more small packages and a few simple configuration steps, we now have a great combo — finding error, fixing it, and formatting the code.

Before the combination

After the combination

Great! Now you should be more confident in shipping your code to production with these Linter and Formatter, but only javascript.

What if your project is using Typescript? Developers are likely using Typescript in almost all their projects nowadays, even migrating javascript in old projects to Typescript.

Will the current setup work for Typescript? No, it won’t.

I’ll take you to the final one that makes Typescript work with ESLint.

Thanks for reading! I’ll see you in Part 4.