Setting Up Express development environment (Typescript, Eslint, Prettier)

#express #typescript #eslint #prettier

I wanted to set up an Express development environment with latest version of NPM packages. But I came across some challenges. I solved all problems after long searches on the Internet. So I decided to write a short text to explain it to someone who needs it.

initialize a node project.
```
npm init
```

install dependencies and dev dependencies

npm i express
npm i -D nodemon ts-node typescript @types/express @types/node

create tsconfig.json file
I want to use ESM modules in this project. So that set target ESNext and module NodeNext

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "NodeNext",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "dist",
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules", "dist", "src/**/*.spec.ts"],
}

lets add scripts to package.json
Working with ESM modules with ts-node is a bit tricky. To solve this problem I created a register.js file.

import { register } from "module";
import { pathToFileURL } from "url";

register("ts-node/esm", pathToFileURL("./"));

Then imported to node this register.js file. Also you can see .env files passed to node.

  "scripts": {
    "dev": "nodemon --exec node --import=./register.js --env-file=.env.development src/index.ts",
    "build": "tsc --project .",
    "start": "node --env-file=.env.production dist/index.js"
  }

Add ESLint to project

npx @eslint/create-config@latest

These are my choices from wizard.

√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · none
√ Does your project use TypeScript? · typescript
√ Where does your code run? · node
The config that you've selected requires the following dependencies:

eslint, globals, @eslint/js, typescript-eslint
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · npm

This wizard created a eslint.config.js file. This file is new form of config file called flat config file.

In VS Code, ESLint extension doesn't work with new flat config file. In Preferences you should change experimental flag true.

Lastly add Prettier

npm i -D prettier eslint eslint-plugin-prettier

Then create .prettierrc file.

{
    "printWidth": 120,
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "all",
    "bracketSpacing": true,
    "endOfLine": "auto"
}

Some changes are required in the eslint.config.js file.

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

export default [
  { languageOptions: { globals: globals.node } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  {
    plugins: {
      prettier: pluginPrettier,
    },
    rules: {
      'prettier/prettier': 'error',
    },
  },
];

That's all. Thanks to read the article.