Sam Piggott

Posted on Dec 14, 2020 • Edited on Jan 23, 2021

Setting up TypeScript with ESLint & Prettier for Visual Studio Code

#typescript #webdev #javascript #react

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 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:

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!

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.

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):

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.

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.

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:

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.

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:

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:

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!)

{
    "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

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..

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:

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.

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:

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:

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

{
    "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).

If it looks like the image above - great! You're all set!

However, if it looks like this:

...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...

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.

touch .prettierrc

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

{
    "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...

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. 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!