What’s the difference between a code formatter and a code linter?

A Code formatter solves the stylistic part of the code organization. It’s about things like spaces, tabs, semicolons, and quotes…

For that, I choose to use one of the most popular too for Javascript formatting: Prettier.

A Linter is more about best practices for good quality software and general consistency. It’s about using let/const instead of var, ordering imports/objects keys alphabetically.

For that, I use TSLint which is a linter specialized in Typescript. They will progressively migrate to Eslint parser, but for now, it’s way more functional and easy to setup.

Why should I use a linter and a formatter?

When working as a team you want to achieve a common goal in the best and most efficient way.

For that, you’ll probably agree on some rules, for some reason. But humans can fail and might forget to apply some pattern things. Here the linter and formatter will help you stay consistent in what you defined with your team.

That way when someone of your team reads your code, it’s a bit more standardized and it helps to make reviews.

Also, it’s really cumbersome to fix issues by yourself, the machine can help you by automatically apply some rules on saving.

📦 My proposition: Aurora

A set of configs and rules for Typescript projects.

Leveraging Prettier and TSLint, we mix the best of both worlds and get a linter without conflicts with its formatter. This is possible by disabling TSLint rules that might conflict with Prettier and configure prettier to solve handle those settings.

It’s clearly opinionated, but you can extend it to fit your needs.

Currently, I shared two configurations:

One for generic Typescript projects , such as cloud functions projects or NodeJS apps.

, such as cloud functions projects or NodeJS apps. One for React-based projects, such as NextJs or react-native projects.

In order to use with VSCode its better if you have Prettier extension installed and also TSLint one.

Also, enable "editor.formatOnSave": true configuration in VScode.

⚙️ Installation

The library is accessible at this link

You’ll simply need to run npm install -D prettier tslint @screamz/aurora or yarn add -D prettier tslint @screamz/aurora

Once done, you can register prettier config by adding a prettier key in your package.json with value @screamz/aurora .

Then create a tslint-config.json file add implement the extends key with the proper config @screamz/aurora/tslint-common or @screamz/aurora/tslint-react .

{

"extends": "@screamz/aurora/tslint-react",

"linterOptions": {

"exclude": ["node_modules/**/*"]

}

}

You can also override things to match your own specificities, for that, I recommend to have a look at the documentation on Github.