Setting up Typescript + ESLint + Jest Project
A lot of node projects have a setup that usually includes Typescript for static type checking, eslint for static code analysis, and Jest as a test runner. In this article, we will go through some advanced configurations for these three and how one can be leveraged from the other. So let's get started:
Step 1: Setup a basic node project
Let’s start by creating a simple node project.
yarn init --yes
Once the above steps are done, the `package.json` in the project will look something similar to:
Step 2: Install the required dependencies
Let's start adding the most basic dependencies we need for our setup
yarn add -D typescript eslint jest
Once installed, add the basic script tasks in package.json to execute the commands.
Step 3: Set up Typescript
Run the command to initialize the typescript in the project.
yarn tsc --init
By default, the typescript compiler adds the configuration file
tsconfig.json in the project root directory. we need to change a few settings in the file for our setup to work as expected.
- target: This property is the language level we wish to support in the project. It means what are we compiling out to? Changing this to
ES2018would mean that the tsc output will be at ECMA 2018 level.
- outDir: By default, the typescript compiler will output in the src folder itself. But we want the output to get generated into a separate folder altogether so that if we need to remove the output, we can easily do it by
rm -rf distchanging the outDir option to
"outDir": "dist"will achieve that for us. With this
distwill be two separate folders.
- rootDir: changing outDir options will help us to create a separate folder, but it will still have a src folder inside it. We want the dist folder to have the output files directly inside the dist folder instead of inside the src. Changing
"rootDir": "src"will achieve that for us.
- include: add
"include": ["src"]outside the compiler options to tell the compiler to include all files inside the src folder.
- declaration: set
"declaration": trueto generate the type information
- types: By default, anything found in node_modules/@types is available for auto import across the app. set
"types": so that not all global scoped types are available in the src folder. e.g. you don’t want jest types to be available in src files.
After setting up the above options,
tsconfig.json file will look similar to:
Now, this is the time to add a code in the src folder and test the output.
index.jsfile and add a basic function to add two numbers.
Now, if you run
npm build, a
dist the folder will be generated with
At last, if you are building a library, set
"main": "dist/index.ts" and
"types: index.d.ts in the package.json files to tell the consumer what is the starting point of your library.
Step 4: Set up ESLint
ESLint is used for static code analysis. It has some great functionality out of the box but if your project support react, typescript, or vue, you would need to add more plugins.
To initialize the eslint, run the following code:
yarn eslint --init
it will ask a bunch of questions, and you can setup according to your project needs. Since we are setting up ESLint with typescript, make sure the option is enabled while initializing. Once the initialization is done, it will add a few typescript related ESLint plugins,
.eslintrc.json will look similar to:
ESLint recommended is a very basic set of typescript rules added by default.
@typescript-eslint/recommended adds rules specific to typescript that are very cheap to evaluate. You can opt-in additional typescript checks by adding
@typescript-eslint/recommended-requiring-type-checkingwhich require more type info and are costly to evaluate also. We can add rules specific to our project needs inside the
If we try to run
yarn lintnow, it will throw an error:
The reason for this error is that we are using typescript specific rules in eslint but have not told the ESLint compiler where to look at the configuration for it. So we need to add a typescript config file for ESLint also. You can add
typescript.eslintrc.json file with the following options:
and then tell the ESLint compiler to use this file in
parserOptions Once all of the above steps are done. the
.eslintrc.json file will look similar to:
By default, I have enabled some rules to check now. Also, make sure you add the right path for tests in the overrides for ESLint to work for tests.
We can try testing lint by executing
npm run lint now.
Step 5: Setting up Jest
Let's start this step but installing a few dependencies to make jest work with typescript:
yarn add -D jest @types/jest @babel/preset-env @babel/preset-typescript
Now, when we try to add a test for our source code, the IDE might show you the error for the jest functions.
ESLint with typescript enabled does not understand where to find these method types. So our tests also need their .tsconfig file. You can simply create one in the test folder as:
references allow us to create two disconnected sub-projects in the same repo. Make sure to add
"noEmit": true so that this sub-project does not emit any output. Also to use it, you need to set
"composite": true in the base tsconfig file.
One last thing left is to create a
.babelrc file for jest to understand how to transform the test code and consume it.
npm run testshould now execute all the tests inside the test folder.
In the end, you can use the GitHub boilerplate project to quickly start a new project with the above configuration.