Setting up TypeScript with ESLint & Prettier for Visual Studio Code
Tags: typescript, webdev, javascript, react
Published: 2020-12-14 08:42:24

Okay, if you've stumbled on this article, chances are you probably want this information as quick and easy as possible. 

I'll keep things as short as I can, but we will be walking through everything step-by-step.

Here's a quick introduction on what everything is that we'll be setting up today:

- **TypeScript 4** is an evolution of JavaScript which brings strict typing (and much more!) to the JavaScript language. I've got a whole article introducing TypeScript [right here](https://dev.to/sam_piggott/getting-started-with-typescript-as-a-javascript-developer-4b3l) if you're interested in learning more.
- **ESLint** is a tool which scans your code for errors in your codebase, and offers fixes as you go (also known as "linting").
- **Prettier** is a code formatter which formats your code to make it look prettier (hence the name!)

## Prefer video?

Before we get started - I've recorded a video available with all of the following steps in it:

{% youtube q5rA2cNqm-8 %}

The video is part of a completely free **16 part series** available to watch **for free** over on my YouTube channel. [Click here to get the full course!](https://www.youtube.com/watch?v=vugSEGpPsEo&list=PL7siRj7spTbBfiNQ1kBVuytL8-I8DZWZq)

## Hold up - why is this guide so long?!

There are other ways to get up and running with these tools quickly (such as running an `npx` command, pre-installing everything). 

Here's why I think you should follow this (longer) guide instead:

- Full transparency as to what you're installing, step-by-step (no unwanted libraries or bloat)
- Installing everything step-by-step (with explanations) makes it easier to debug particular bugs if any of these tools fail
- A greater understanding of the individual tools will make it easier to extend or change any of the tools' behaviour later!

## Just want the code?

With all of that said - if you'd rather just get up and running quickly, I've written a git repo with everything described in this guide. It's available [right here.](https://github.com/Sarghm/typescript-eslint-prettier-template) 

If it's useful, I'd appreciate a star! ✨

Still here? Alright! On with the show!

## Installing TypeScript

**Step 1:** We'll start by creating a new folder to use as a root for our project. In your command line, enter the following command (replacing `my-new-project` with your project's name):

```bash
mkdir my-new-project
```

**Step 2:** Next, we need to get our project set up using **Yarn**. To do this, we'll need to enter the folder we've just created and initialise our project.

```bash
cd my-new-project
yarn init
```

This should give us an interactive series of steps where we can enter all the relevant information for our project in.

Enter values for all of these if you have anything specific, or just press Enter to use the defaults for each (shown in parentheses after each question).

The only one to pay attention to is the **entry point** - make sure you enter `./build/index.js` rather than just `index.js`. I'll highlight why later in the article.

![Yarn Init interactive steps](https://i.imgur.com/euJIg30.png)

**Step 3:** Okay, now that we've initialised our project, let's go ahead and install TypeScript into our project. 

Using the same command line (still navigated to the `my-new-project` directory), enter the following command:

```bash
yarn add typescript --dev
```

This will add TypeScript to our `devDependencies`. For more information on the difference between `dependencies` and `devDependencies`, there's an article you can check out [right here](https://medium.com/@dylanavery720/npmmmm-1-dev-dependencies-dependencies-8931c2583b0c#:~:text=The%20difference%20between%20these%20two,an%20npm%20install%20%2D%2Dsave.). 

**Step 4:** After that's installed, we'll need to create ourselves a configuration file for TypeScript to use. 

To create that, enter the following command:

```bash
touch ./tsconfig.json
```

**Step 5:** Next, we'll create a folder to store our TypeScript files in, and create an `index.ts` file to get started. Back in your command line, enter the following:

```bash
mkdir ./src
touch ./src/index.ts
```

Great - now we've created a folder in our project's directory called `src`, and created a single file called `index.ts` inside.

**Step 6:** Next, you'll want to open up the `tsconfig.json` file that we just created, using VSCode. 

We're going to set our TypeScript's configuration up with the simplest settings possible, with the idea being that you can add to and extend this. Feel free to copy and paste the following configuration (feel free to remove the comments - they're not required, more just to let you know what each line does!)

```ts
{
    "compilerOptions": {
        "rootDir": "./src", // The entry point for all of our TypeScript files (make sure all .ts files are stored in a subdirectory of this!)
        "outDir": "./build", // The directory which we'll be exporting our compiled JavaScript files to
        "lib": ["ESNext", "DOM"], // The libraries we wish to use in TS (ESNext being the latest version of JavaScript, and DOM being JavaScript DOM libraries - like console.log)
        "strict": true // Stipulating we want strict mode on. I personally would recommend this to get the most out of TS - another great article on this here: https://dev.to/briwa/how-strict-is-typescript-s-strict-mode-311a
    }
}
```

**Note:** If you're planning on setting this project up with React later down the line, there's a React-specific barebones `tsconfig.json` you can refer to [here](https://gist.github.com/Sarghm/07140fcb4f835571af51b6f977a5e410)

For more information on `tsconfig.json` and all of the possible parameters you can use during setup, there's more information on the [official TypeScript handbook.](https://www.typescriptlang.org/tsconfig).

**Step 7:** Finally, open up the **root folder** (not just a single file!) - in VSCode.

You should now be able to write TypeScript inside of your `index.ts` file! Just make sure you create all your `.ts` files inside of the `src` folder (or a sub-directory inside `src`) to ensure the compiler catches everything.

To build your TypeScript into JavaScript files, simply run the following command from the root directory:

```bash
yarn tsc -p ./tsconfig.json
```

## ESLint

Alright, let's get our codebase linted with ESLint!

**Step 1:** First, we'll want to install the relevant ESLint plugin for VSCode. Simply search for **ESLint** in the Extensions bar on the left side of the screen, then hit **Install** to install it.

![Installing ESLint in Visual Studio Code](https://i.imgur.com/cBc3Dvc.png)

**Step 2:** Open up your command line once again, and navigate to your project's root directory. From there, we want to install all the required libraries to get ESLint up and running.

To do so, enter the following command:

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

This will install:

- **eslint** - The ESLint core package
- **@typescript-eslint/eslint-plugin** - A plugin for ESLint to support TypeScript specifically
- **@typescript-eslint/parser** - Further support for ESLint to lint TypeScript source files

**Step 3:** Next, whilst we're still in the command line, we'll need to set up our configuration file for ESLint.

To do so, enter the following command:

```bash
touch .eslintrc
```

(Note the `.` at the beginning of the `eslintrc`. That's really important - make sure you don't miss it!)

**Step 4:** To finish up the setup, we'll need to make some changes to the `.eslintrc` file that we've just created. If you already have VSCode open, you should now be able to navigate to `.eslintrc` in your project tree. 

Here's what that looks like on Visual Studio Code:

![Opening .eslintrc file up from the project tree in Visual Studio Code](https://i.imgur.com/yfitNxH.png)

Now that `.eslintrc` is open, update it so that it looks like the following:

```json
{
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 2021
    },
    "extends": [
        "plugin:@typescript-eslint/recommended",
    ]
}
```

This configuration applies all of the libraries that we've just installed.

**Step 5:** Restart VSCode!

**Step 6:** You should now be able to observe an `ESLint` marker in the status bar (bottom right corner of the screen).

![Positive state for ESLint](https://i.imgur.com/Iw5jfzL.png)

If it looks like the image above - great! You're all set!
 
However, if it looks like this:

![Error state for ESLint](https://i.imgur.com/8T2rTYm.png)

...you'll need to click it, and then grant the workspace the necessary permissions to use ESLint. After that, one last IDE restart should get you up and running!

## Prettier

Almost there! Let's get our environment configured to use Prettier...

**Step 1:** Once again, open up your command line, and navigate to your project's root directory. We'll be installing a few new packages to add support for Prettier...

```bash
yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev
```

Whilst we're in here, let's create a configuration file. No need to edit it - it just needs to exist.

```bash
touch .prettierrc
```

**Step 2:** Next, let's open up our `.eslintrc` file and add those new libraries to the `extends` array in our configuration...

```json
{
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 2021
    },
    "extends": [
        "plugin:@typescript-eslint/recommended",
        "prettier/@typescript-eslint",
        "plugin:prettier/recommended"
    ]
}
```

(**Note:** The order in which the content of the `extends` array is very important to ensure you don't have any trouble later on down the line!)

**Step 3:** Finally - restart VSCode one last time.

And that's it - feel free to breathe a sigh of relief. You've done it! You've set up a project with **TypeScript**, **ESLint** and **Prettier!**

## Summary

It feels like a hell of a lot to do _just_ to get your environment ready, but I honestly believe that once you've gone through this process once and have an understanding as to how all the separate components come together, it really makes things a lot more straightforward in the event that any of these tools fail. Now that you've braved the storm, you should also be in a great position to customise ESLint and Prettier to your heart's content.

## One last thing...

![CodeSnap promo image](https://i.imgur.com/TlmEDgZ.png)

I've made a **16-part** TypeScript course, written specifically for JavaScript developers - and it's totally free. If you're interested, it's available to view on my [website right here](https://codesnap.io/course/introduction-to-typescript). You can also support this content by subscribing to me, or just following me on here for more TypeScript content.

Thanks so much for reading!