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:
- 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!)
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!
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!
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!
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):
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
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:
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
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!)
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.
yarn tsc -p ./tsconfig.json
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:
. 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:
.eslintrc is open, update it so that it looks like the following:
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!
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
Step 2: Next, let's open up our
.eslintrc file and add those new libraries to the
extends array in our configuration...
(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!
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.
Thanks so much for reading!