DEV Community


Posted on

Setting up a Typescript Node App

Setting up a Node project feels like a daunting task? Well, fear not! Our friend Matt Pocock has got you covered with a fantastic article that walks you through the process.

Matt's article is incredibly straightforward, making it a great starting point. However, you might feel that it lacks some essential features like code formatting, linting, and unit testing. Don't worry; we've got you covered! Let's dive in and add these crucial components to your Node project.


Before we dive into the nitty-gritty details, let's set some prerequisites in place. First up, let's add a git-hook to catch those pesky commit errors. We'll be using Husky for this purpose. Follow these simple steps to get started:

npm install --save-dev husky lint-staged
npx husky install
npm pkg set scripts.prepare="husky install"
npx husky add .husky/pre-commit "npx lint-staged"
Enter fullscreen mode Exit fullscreen mode

In a nutshell, these commands set up Husky and lint-staged for your project, ensuring that your code stays in tip-top shape.


Now, let's tackle code formatting. We've chosen prettier as the default option, although dprint is also a viable alternative. Add the following lines to your package.json:

  "scripts": {
    "format": "prettier . --write--ignore-unknown"
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
Enter fullscreen mode Exit fullscreen mode

If you wish to configure Prettier further, you can create a .prettierrc.js file with your desired settings, and don't forget to add a .prettierignore file to exclude specific directories like node_modules.

  • .prettierrc.js
/** @type {import("prettier").Config} */
const config = {
    trailingComma: 'es5',
    tabWidth: 4,
    semi: false,
    singleQuote: true,
export default config
Enter fullscreen mode Exit fullscreen mode
  • .prettierignore
Enter fullscreen mode Exit fullscreen mode


Let's move on to setting up ESlint for your project. With ESLint, you have the flexibility to customize your linting rules according to your preferences. We recommend installing the following packages:

Here's how to configure ESLint in your package.json:

  "scripts": {
    "lint": "eslint ./src --fix --max-warnings 0"
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown",
    "**/*.ts": "eslint ./src --fix --max-warnings 0"
Enter fullscreen mode Exit fullscreen mode

To complete the setup, add .eslintignoreand .eslintrc.cjs files. These files ensure that ESLint doesn't interfere with your project's essential directories and that it follows the rules you've defined.

  • .eslintignore
Enter fullscreen mode Exit fullscreen mode
  • .eslintrc.cjs
/* eslint-env node */
module.exports = {
    extends: [
    parser: '@typescript-eslint/parser',
    plugins: ['@typescript-eslint'],
    rules: {
        '@typescript-eslint/no-import-type-side-effects': 'error',
        '@typescript-eslint/consistent-type-imports': [
                fixStyle: 'inline-type-imports',
    root: true,
Enter fullscreen mode Exit fullscreen mode

A special rule, that I have added is to handle the import type (more information on my previous post)

Unit testing

Last but not least, let's talk about unit testing. Our recommended choice is vitest, which has become increasingly popular lately. To integrate vitest into your project, simply run:

You can simply add the package

npm install -D vitest
Enter fullscreen mode Exit fullscreen mode

Then create a simple configuration file vitest.config.ts

/// <reference types="vitest" />
import { defineConfig } from 'vitest/config'

export default defineConfig({
    test: {
        coverage: {
            all: true,
            include: ['src'],
            reporter: ['html', 'json'],
            provider: 'v8',
Enter fullscreen mode Exit fullscreen mode

Visual Studio Code Integration

Do you love the convenience of IDE integration, where your code automatically gets polished as soon as you save your work? If you're using Visual Studio Code (VSCode), we've got some handy settings to supercharge your development experience. Just add the following lines to your .vscode/settings.json file:

    "editor.codeActionsOnSave": {
        "source.fixAll": true,
        "source.sortMembers": true,
        "source.fixAll.eslint": true,
        "source.organizeImports": true
    "editor.bracketPairColorization.enabled": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.guides.bracketPairs": true,
    "typescript.tsdk": "node_modules/typescript/lib",
    "typescript.preferences.importModuleSpecifier": "relative",
    "workbench.tree.indent": 15,
    "workbench.tree.renderIndentGuides": "always",
    "workbench.colorCustomizations": {
        "tree.indentGuidesStroke": "#fc03ad"

Enter fullscreen mode Exit fullscreen mode

With this configuration in place, you're in for a treat:

  • Eslint and code formatting will automatically work their magic as you save your files, ensuring that your code remains clean and error-free.
  • Your imports will be sorted and organized neatly, making your codebase more maintainable. VSCode will use the TypeScript version installed in your project's node_modules directory, eliminating version conflicts and ensuring consistency.
  • The Bracket Pair Colorizeration will add a splash of color to your code by highlighting matching brackets. You can customize the colors to your heart's content.
  • With workbench you can add grouping for your folders/files tree Image description

These settings are designed to enhance your coding experience and keep your project in tip-top shape. So, unleash the full power of VSCode and watch your development workflow become even more efficient.

And that's it! With these steps, your Node project is equipped with essential tools for code formatting, linting, and unit testing. Enjoy the benefits of a well-structured and robust codebase. Happy coding! 🚀

Top comments (0)