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

We’re almost there! the final piece to make a great combo upgrading the code standard of your projects. I assure you will make it better😁 after we go through this final part with Typescript.

Before we get straight to the point, I just want to leave links of Part 1, Part 2, and Part 3 here for someone who has missed those three. Thanks.

First, let’s change some code and ESLint config to see how it lints typescript file:

eslint.config.msj: update as below

Press enter or click to view image in full size

Create a new file “index.ts”

1
2const calculateTotal = (x) => {
3  return "100" + x
4}
5
6const a:any  = 2

Run command and check result:

1npx eslint src

Press enter or click to view image in full size

Result

Alright, it throws an error, but not as expected. It doesn’t understand the “: number” here.

That’s why typescript-eslint was created to make ESLint understand that. What typescript-eslint does is parsing the typescript files into a structure that ESLint can understand. That’s its main job.

Let’s install the typescript-eslint and help ESLint understand TS file

1yarn add --dev typescript-eslint typescript

Add new config to eslint.config.mjs

1import globals from "globals";
2import pluginJs from "@eslint/js";
3import tseslint from 'typescript-eslint'
4import prettierPluginRecommended from 'eslint-plugin-prettier/recommended'
5
6
7export default tseslint.config(
8  { files: ["src/**/*.{js,ts}"], languageOptions: { sourceType: "commonjs" } },
9  { languageOptions: { globals: globals.browser } },
10  pluginJs.configs.recommended,
11  prettierPluginRecommended,
12  ...tseslint.configs.recommended,
13);

Actually, we can remove the function tseslint.config(). tseslint.configs.recomended is all we need.

tseslint.config() is just a helper function, it has JSDoc to help you understand ESLint config and support IntelliSense in VSCode:

Press enter or click to view image in full size

You can try removing tseslint.config function and you’ll see it won’t show JSDoc anymore.

Looks good now, run the eslint command again:

1npx eslint src

Result!

Press enter or click to view image in full size

woohoo! typescript-eslint did a good job!

Beside being a “translator” between Typescript and ESlint, typescript-eslint also has many built-in best practice rules for typescript, check it out here.

Some of you who already has experience with Typescript may ask “why does it not throw type-checking error like tsc does?”

Press enter or click to view image in full size

Well, tsc is the Typescript compiler, they are different:

typescript-eslint: helps eslint to understand typescript, and then you can use eslint rules to lint typescript. It can’t fully function as tsc.

tsc: on the other hand, is a Typescript compiler. It compiles your typescript code into javascript. While compiling, it also does type-checking and other stuff of typescript rules to make sure you’ll get a good result.

Check the below diagram to have a better overview.

Press enter or click to view image in full size

So now you can apply those tools to upgrade your project code quality and ship your code to production with more confident. Also you will less worry about setting code standard when working with a team.

Good luck!

Thanks for reading!