Setup TypeScript project with art

4 min readAug 11, 2020

So far, so good, you’re working on different projects but you always meet a breaking point where there are issues with the indentation of the code, the imports are messing up between project and node_module.
In any way, the structure feels wrong and I’ll show you the path I took to make them better and consistent across my projects 😎

You will find the entire example in this repo https://github.com/vschoener/setup-ts-project-with-art

Create an empty project with the dependencies !

To start, we are going to install the packages we need and I’ll go through each one to explain why I use them (and do not be scared by the list, I promise they don’t bite).

npm init && npm install --save-dev eslint eslint-config-prettier eslint-import-resolver-typescript eslint-plugin-import @typescript-eslint/eslint-plugin eslint-plugin-prettier prettier typescript @types/node @typescript-eslint/parser

eslint is well known to lint your code and fix javascript error according to the rules you set in the config file. It’s widely used with the base Airbnb config file but I’m gonna use this as I feel it’s too restricted.
eslint-config-prettier and eslint-plugin-prettier are both used to work well with prettier. You can specify some config and having prettier report under eslint.
eslint-import-resolver-typescript and eslint-plugin-import work both together to set rules with the imports.
prettier is one of my favorite tool allowing to format your code.
@typescript-eslint/eslint-plugin and @typescript-eslint/parser requirements for eslint to lint TypeScript files.

Now I’ve explained a bit each package, we can create their dedicated configs.

TypeScript config

The first config you should have is of course the tsconfig.json to transpile your code first.

Here nothing really fancy, but if you need to learn more about it, you can go back to my article where I explained it.

Prettier Config

This file is really small in my case as default value fits what I need.

Eslint Config

Here comes the big guy, this one is really huge and you can add a lot of settings, so I’ll do my best to explain each setting we care for this article.
Keep in mind the big part of this config is the import that uses a plugin and needs to be custom.

extends
The first interesting part is the extends.This is where we want to load predefined and default configs from prettier, eslint, and plugins you might add, compatible with TypeScript.
Then, by default, the import plugin is off, so to enable it, we need to add the 3 import lines.
settings
In our case, it contains the import/parsers to be used with TypeScript
parser
This must be changed to allow the parsing of eslint with TypeScript
parserOption
Those extra settings also need to be set to tell eslint to parse TypeScript file and take advantage of the TypeScript configuration
plugins
Enable the usage of eslint with typescript and the import plugin
rules
Finally! Yes this is the section where you provide your custom rules to raise alerts and warnings 😍

Rules

This last part of the config contains a few settings I would like to quickly underline with you.
First, we enable the usage of Prettier to raise an error if the formatting is wrong.
Then, we set a few restrictions I like to see in my project at this moment but you can tune them up as you or your team wish.
And finally, the import settings contain a few likeimport/order that can be well detailed and fit your need. In my case, I wanted to separate node module import from my project with an empty line and having them ordered by name

Of course, if you follow the link I set at the beginning of the article, you will have a lot of details to tune the module.

Example

Now let’s take a look at this example below, main.ts from the example repo. As you may have noticed, the first 2 line import from the project itself and then we have thefs import from Node (global one)

If we take a look at our linter, it will complain a lot:

To fix this, you can enable in VS code or your Intellij IDE the on save feature to autoformat and fix the error or you can run the command from the package.json here:

// Add those lines in the scripts section of your package.json
"eslint": "eslint . --ext .ts",
"lint:fix": "npm run eslint -- --fix"

And run npm run lint:fix

You should have your file properly formatted with an error about the fs not used 😎

This command could be used during your test and CI/CD to block your new code badly formatted.

Bonus

Little bonus, add a .editorconfig file in your project. This is a little plus with prettier as together, they work pretty well and IDE already recognized them! 👌🏻