Setting Up Express development environment (Typescript, Eslint, Prettier)
Tags: express, typescript, eslint, prettier
Published: 2024-04-25 10:27:49

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dvtuhwdnkunh4t44sgbs.png)

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.