Setting Up Express development environment (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.

1. initialize a node project.
   

   npm init
   

2. install dependencies and dev dependencies
   

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

3. 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"],
   }
   

4. 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"
     }
   

5. 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.

   

6. 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.