Setup a Typescript project with ESLint, Prettier and VS Code

Life feels better when developing in the right environment right ? (Source)

Typescript is nowadays one of the most loved languages out there thanks to the power and robustness of its typing system.

Setting an appropriate environment to develop in Typescript is crucial to benefit most of all the features it has to offer.

In this article, I will show you how to setup a clean and simple development environment based on:

• VS Code: a powerful editor that you can turn into an IDE to your liking.
• ESLint: a customizable linter to check your code for problems and bad practice.
• Prettier: a customizable code formatter to ensure you and your team follow the same code styling guidelines.
• Yarn: a package manager, preferable to the default npm as it is way faster.

TL;DR

You can find the final project setup in this GitHub repository and clone it:

git clone https://github.com/Myreage/typescript-starter
yarn install

After that, simply install the ESLint VS Code extension and the Prettier VS Code extension.

You’re good to go !

1. Project setup

Initialize a new repository:

mkdir typescript-starter && cd typescript-starter && npm init

Install Typescript:

yarn add typescript --dev

Add a purposely badly formatted sample file in src/index.ts :

type Book={
  title:string
  author: string
}
const book:Book ={
  title: 'Cool Book',
  author:"John Doe"
}

2. ESLint configuration

(Source)

Install ESLint, its Typescript plugin and the related parser:

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

Add a basic ESLint for Typescript configuration in a new file .eslintrc.json :

{
  “env”: {
    “browser”: true,
    “es2021”: true
  },
  “extends”: [
    “eslint:recommended”,
    “plugin:@typescript-eslint/recommended”
  ],
  “parser”: “@typescript-eslint/parser”,
  “parserOptions”: {
    “ecmaVersion”: “latest”,
    “sourceType”: “module”
  },
  “plugins”: [
    “@typescript-eslint”
  ]
}

Install the ESLint VS Code extension.

Finally, create a new .vscode folder at the root of your project. You can now edit a workspace settings configuration file .vscode/settings.json to have ESLint auto-fix your fixable problems on save:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}

3. Prettier configuration

(Source)

Install Prettier:

yarn add prettier eslint-config-prettier --dev

eslint-config-prettier ensures there will be no conflicts between ESLint and Prettier, by disabling ESLint rules that might be conflicting.

Edit your ESLint configuration so the "extends” value looks like this:

“extends”: [
  “eslint:recommended”,
  “plugin:@typescript-eslint/recommended”,
  “prettier”
],

Install the Prettier VS Code extension and edit your .vscode/settings.json to enable auto-formatting on save:

“editor.defaultFormatter”: “esbenp.prettier-vscode”,
“editor.formatOnSave”: true

Add a basic Prettier configuration of your choice in .prettierrc.json :

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true
}

4. Let the magic operate

Go back to your index.ts file, and re-save it.

If everything went well, your file should have been formatted on save, and ESLint should have auto-fixed everything it could ! You’re left with an error on const book:

‘book’ is assigned a value but never used.eslint@typescript-eslint/no-unused-vars

You’re ready to spend hours re-typing the world !

However, if you’re in the mood for some more magic, you could:

• Customize your ESLint/Prettier rules, or even create your own !
• Look for some awesome plugins in the VS Code Marketplace
• Add custom VS Code snippets

In Your Face is a VS Code extension that shows you Doom ‘Ouch Faces’ that correlate to the number of errors in your code (Source)