DEV Community

Cover image for Setting Up Express development environment (Typescript, Eslint, Prettier)

Posted on

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.

    Change Use Flat Config

  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 } },
        plugins: {
          prettier: pluginPrettier,
        rules: {
          'prettier/prettier': 'error',

That's all. Thanks to read the article.

Top comments (0)