Setting up a TypeScript NodeJS Application with Prettier and ESLint

#typescript #eslint #prettier #boilerplate

Boilerplate can be found here.

TypeScript can seem complicated to setup, but you can do it in under 5 minutes with these simple setup steps. After this tutorial, you'll have a TypeScript ready app that can automatically restart once files are edited with ESLint and Prettier configured.

With this setup, it'll be easier for you to write cleaner, most consistent code.

Prettier
Prettier is an opinionated code formatted. It can work together with ESLint to catch errors and enforce a consistent code style throughout the project. As in the name, Prettier makes you code look prettier. Combined with ESLint, the two are powerful tools for writing good code.

Project Setup

Create a new folder typescript-nodejs and run npm init -y to set the project up as node/npm project.

Setup the main code file

Create a new folder src in your root directory, and a file called index.ts in the src folder.

TypeScript

Lets setup TypeScript:

npm i -D typescript # Typescript compiles to plain JS  
npm i -D ts-node # ts-node to run typescript code without compiling to JS  
npm i -D nodemon # Automatically restarts the application whenever file changes are detected

Setting up TSConfig

Now lets setup the Typescript config file. Create a new file tsconfig.json and add the following code:

{  
  "compilerOptions": {  
  "target": "es6",  
    "module": "commonjs",  
    "rootDir": "src",  
    "outDir": "dist",  
    "sourceMap": true,  
    "resolveJsonModule": true,  
    "lib": ["es6", "dom"],  
    "esModuleInterop": true  
  },  
  "include": [  
    "src/**/*.ts"  
  ],  
  "exclude": [  
    "node_modules"  
  ]  
}

We won't go into depth about what all these options do, but you can read the typescript documentation to learn more.

Adding a Start Script

Now, lets add some scripts to make it easier to run our code. Add the following to the package.json file.


{  
  ...  
 "scripts": {  
    "start": "tsc && node dist/index.js",  
    "dev": "nodemon --watch 'src/**/*.ts' --exec 'ts-node' src/index.ts",
    "lint": "eslint .",  
    "lint:fix": "eslint . --fix"
  },  
 ...  
}

The start script compiles and runs our code, while the dev script will run the code and then rerun it every time you change it.

Setting up ESLint and Prettier

ESLint

First, let's install ESLint:

npm install eslint --save-dev  
npm install @typescript-eslint/parser --save-dev  
npm i @typescript-eslint/eslint-plugin --save-dev

Create a .eslintrc.yaml configuration file in your root folder to setup rules and parsing for the project:

env:  
    node: true  
parser: '@typescript-eslint/parser'  
parserOptions:  
    ecmaVersion: 9
    project: ./tsconfig.json  
plugins:  
- '@typescript-eslint'

Prettier

Next, let's setup prettier.

npm install prettier --save-dev  
npm install eslint-config-prettier --save-dev  
npm install eslint-plugin-prettier --save-dev

Create a .prettierrc.yml file in your project directory.

tabWidth: 2  
singleQuote: true

To integrate Prettier with ESLint, in the .eslintrc.yaml

env:  
  node: true  
extends:  
  - plugin:@typescript-eslint/recommended  
  - prettier/@typescript-eslint  
  - plugin:prettier/recommended  
parser: '@typescript-eslint/parser'  
parserOptions:  
  ecmaVersion: 9  
  project: ./tsconfig.json  
plugins:  
 - '@typescript-eslint'

Test It

Run echo "console.log('TypeScript Eslint Prettier Starter Template!')" >> src/index.ts then run npm run lint, and you should see an error popup since the above console statement has no semicolon. Run npm run lint:fix and the problem should fix itself. Then run npm run dev and you should see "TypeScript Eslint Prettier Starter Template" print to the console.

Wrap Up

That's it!

In most modern IDE's, you can setup ESLint to run on file save to automatically format your code. For example, you can change VSCode settings as shown below:

"editor.formatOnSave": true,  
"[javascript]": {  
    "editor.formatOnSave": false  
},  
"prettier.disableLanguages": ["js"],  
"eslint.autoFixOnSave": true,  
"eslint.alwaysShowStatus": true,  
"files.autoSave": "onFocusChange",