Simple Guide to Start a Project with Node.js and TypeScript

Guide available in Spanish

Table of Contents

• Configuration
• Features
• Usage
  • ESlint
  • Prettier
  • Run the project
• Example
• To Do (only in this readme)

Features

• pnpm to manage dependencies
• TypeScript
• ESlint for syntax errors
• Prettier to format the code

Configuration

1. Create a directory for the project

mkdir node_project
cd node_project

2. Initialize the project with pnpm

pnpm init

Copy the following and paste it into package.json.

{
    "name": "getting-started-node-typescript",
    "repository": {
        "type": "git",
        "url": "https://github.com/rapax00/getting-started-node-typescript"
    },
    "keywords": [],
    "author": "Rapax",
    "license": "MIT",
    "homepage": "https://github.com/rapax00/getting-started-node-typescript#readme",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "start": "tsc && node dist/index.js",
        "lint": "eslint .",
        "format": "exec prettier . --write",
        "format-spec": "prettier --write",
        "check": "prettier . --check",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "devDependencies": {
        "@eslint/js": "^9.9.1",
        "eslint": "^9.9.1",
        "globals": "^15.9.0",
        "prettier": "3.3.3",
        "typescript": "^5.5.4",
        "typescript-eslint": "^8.3.0"
    }
}

3. Establish the node version

Create a file .nvmrc

touch .nvmrc

Copy the following and paste it into .nvmrc. ( or use the version you want )

v20.13

4. Create a file to ignore the files that are not necessary

touch .gitignore

Copy the following and paste it into .gitignore.

node_modules
dist

5. Create a configuration file for TypeScript

touch tsconfig.json

Copy the following and paste it into tsconfig.json.

{
    "compilerOptions": {
        "module": "commonjs",
        "esModuleInterop": true,
        "target": "es6",
        "moduleResolution": "node",
        "sourceMap": true,
        "outDir": "dist",
        "strict": true,
        "noImplicitAny": true,
        "skipLibCheck": true
    },
    "lib": ["es2015"],
    "include": ["**/*"],
    "exclude": ["node_modules", "dist"]
}

6. Install the dependencies

pnpm i

7. Configure ESLint

Create a configuration file

pnpm eslint --init

Select the following options:

1. How would you like to use ESLint?
   • To check syntax and find problems
2. What type of modules does your project use?
   • JavaScript modules (import/export)
3. Which framework does your project use?
   • None of these
4. Does your project use TypeScript?
   • Yes
5. Where does your code run?
   • Node
6. Would you like to install them now?
   • Yes
7. Which package manager do you want to use?
   • pnpm

Copy the following and paste it into eslint.config.mjs.

import globals from 'globals';
import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';

export default [
    { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
    { ignores: ['node_modules', 'dist'] },
    { languageOptions: { globals: globals.node } },
    pluginJs.configs.recommended,
    ...tseslint.configs.recommended,
];

8. Configure Prettier

Create a configuration file

touch .prettierrc

Copy the following and paste it into .prettierrc.

{
    "printWidth": 80,
    "tabWidth": 4,
    "useTabs": false,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "es5",
    "bracketSpacing": true,
    "jsxBracketSameLine": false,
    "arrowParens": "always"
}

Create an ignore file for Prettier

touch .prettierignore

Copy the following and paste it into .prettierignore.

node_modules
dist

Prettier will also follow rules specified in .gitignore if it exists in the same directory from which it is executed.

Usage

ESLint

Check if there are syntax errors

pnpm lint

Prettier

Format the code

pnpm format

Format the specific folder or file

pnpm format-spec <path>

Format the specific test file

pnpm format-spec <ruta/**/*.test.js>

Check if the code is formatted correctly

pnpm check

Example

This is a simple example to test the project

1. Create directory

mkdir src

Move to the directory

cd src

Create a file index.ts

touch index.ts

Copy the following and paste it into

console.log('Congratulations, you are ready to start coding! 🎉');

2. Run the project and enjoy it

See your console

pnpm start

Compiles the project and runs the file dist/index.js

To Do

• Guide for fork the project

---

Made with 👐 by Rapax

Tips are welcome through Lightning Zap to ⚡rapax@lawallet.ar.