Setting up Node.js project in 2023

Published on December 25, 2022

This post is more of a note to self. I will keep editing to add clarity.

Node.js with TypeScript

This is a really helpful guide: https://www.youtube.com/watch?v=H91aqUHn8sE

Here is the gist of the video:

Start a JS project with either npm or yarn.

mkdir shiny-new-project-which-you-will-abandon-really-soon
cd shiny-new-project-which-you-will-abandon-really-soon
yarn init -y

With new versions of Node.js, we can start with native ESM support. To do that, add the type property in package.json.

{
  ...
  "type": "module"
  ...
}

Then install TypeScript:

yarn add -D typescript

To resolve type error related to Node stuff:

yarn add -D @types/node

Use following tsconfig.json.

{
  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "target": "ES2020",
    "sourceMap": true,
    "outDir": "dist"
  },
  "include": ["src/**/*"]
}

module and modueResolution values are something new here: More info here: https://stackoverflow.com/questions/71463698/why-we-need-nodenext-typescript-compiler-option-when-we-have-esnext#answer-71473145

Now after following along with the video, we may want a few other things.

Yarn 3 with PnP Eslint and Prettier

Use yarn 3

yarn set version stable

Install eslint, prettier and their standard configs.

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-import prettier

Add a.eslintrc.cjs file.

module.exports = {
  extends: [
    // By extending from a plugin config, we can get recommended rules without having to add them manually.
    'eslint:recommended',
    'plugin:import/recommended',
    'plugin:@typescript-eslint/recommended',
    // This disables the formatting rules in ESLint that Prettier is going to be responsible for handling.
    // Make sure it's always the last config, so it gets the chance to override other configs.
    'prettier',
  ],
  settings: {
    // Tells eslint how to resolve imports
    'import/resolver': {
      node: {
        paths: ['src'],
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    },
  },
  env: {
    node: true,
  },
  rules: {
    'import/no-unresolved': 'off', // To avoid false positive with NodeNext and local .js imports
  },
}

Add aprettier.cjs file.

module.exports = {
  trailingComma: 'es5',
  bracketSpacing: true,
  tabWidth: 2,
  semi: false,
  singleQuote: true,
  arrowParens: 'always',
  endOfLine: 'lf',
}

Optionally, add ignore files for prettier (.prettierignore) and eslint (.eslintignore).

node_modules/
dist/
.yarn/
.pnp.*

With PnP, it is important to install yarn's editor SDK, to allow plugins like eslint and prettier to use ZipFS. For VSCode:

yarn dlx @yarnpkg/sdks vscode

Install these VSCode extensions: Add file .vscode/extensions.json and reload the VSCode, when prompted to install the recommended extension, do it.

{
  "recommendations": [
    "arcanis.vscode-zipfs",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ]
}

What else?

Install the typescript yarn plugin. Adds @types/new-dep-you-added dependency when you add a new dependency automatically.

yarn plugin import typescript

Use Volta instead of nvm to set node version per project. Also, more accessible to collaborate when Volta makes sure all team members are going to use the same dependency. https://volta.sh/
.gitignore

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

# Yarn 3
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions