Start simple TypeScript project with development environment and ESLint rules

TypeScript.md

Starting with TypeScript on new project

On terminal when init project:

npm init -y

npm i typescript ts-node-dev tsconfig-paths eslint eslint-plugin-simple-import-sort rimraf dotenv-cli -D

npx tsc --init --rootDir ./ --baseUrl ./ --outDir ./dist \
--strictNullChecks false --esModuleInterop --resolveJsonModule \
--lib "esnext,dom" --module commonjs --allowJs --sourceMap \
--removeComments --experimentalDecorators --emitDecoratorMetadata \
--typeRoots "./node_modules/@types,./src/@types"

npx eslint --init
# Options: style, import/export, none, yes, node, popular, standard, json

# Install prettier (optional)
npm i prettier eslint-config-prettier eslint-plugin-prettier -D

On .prettierrc:

{
  "semi": false,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 120
}

On tsconfig.json:

-    // "paths": {},
+    "paths": {
+      "@/*": ["./src/*"],
+    },

On package.json:

"scripts": {
  "dev": "ts-node-dev --inspect --exit-child --respawn --ignore-watch node_modules --no-notify --clear --quiet -r tsconfig-paths/register ./src/index.ts",
  "dev:js": "nodemon -q -x 'clear;node' ./src/index.js",
  "build": "rimraf ./dist && npx tsc",
  "start": "node ./dist/index.js",
  "test": "NODE_ENV=test dotenv -e .env.test -- node --no-warnings --experimental-vm-modules node_modules/jest/bin/jest.js --verbose",
  "test:watch": "npm run test -- --watch",
  "test:coverage": "npm run test -- --coverage",
  "lint": "eslint ./src/**/*.{ts,tsx}",
  "lint:fix": "eslint ./src/**/*.{ts,tsx} --fix",
  "style": "prettier --config .prettierrc './src/**/*.{ts,tsx}' --write"
},

Recommended configuration for .eslintrc.json file:

{
  "env": {
    "node": true,
    "es2021": true,
    "jest": true
  },
  "extends": ["standard", "plugin:prettier/recommended"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint", "simple-import-sort", "prettier"],
  "rules": {
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": ["error"],
    "simple-import-sort/exports": "error",
    "simple-import-sort/imports": "error",
    "camelcase": "off",
    "no-useless-constructor": "off",
    "comma-dangle": ["error", "always-multiline"],
    "no-undef": "off"
  }
}

Option to not show error messages on console in developer script option:

--transpile-only

On .vscode/launch.json (--inspect is needed):

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "outFiles": ["${workspaceFolder}/**/*.js"]
    }
  ]
}

On terminal install Jest (for testing):

npm i jest @types/jest ts-jest -D
# OR
npm i jest @types/jest @swc/core @swc/jest -D
# OR
npm i jest @types/jest esbuild esbuild-jest -D

npx jest --init
# Options: package yes, typescript yes, node, coverage no, v8, clear yes

On jest.config.ts (uncomment to choose between TS-Jest, SWC and ES-Build):

  forceExit: true,
  clearMocks: true,
  // globalSetup: './tests/globalSetup.ts',
  // globalTeardown: './tests/globalTeardown.ts',
  transform: {
    // '^.+\\.(t|j)sx?$': 'ts-jest',
    // '^.+\\.(t|j)sx?$': '@swc/jest',
    '^.+\\.(t|j)sx?$': 'esbuild-jest',
  },
  moduleNameMapper: { '^@/(.*)$': '<rootDir>/src/$1' },
  watchPathIgnorePatterns: ['./node_modules', './dist', './coverage'],

Using_Babel_To_Transpile.md

Installing Babel to be faster on transpile TS to JS

On terminal type:

npm i @babel/cli @babel/core @babel/node @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/preset-env @babel/preset-typescript babel-plugin-module-resolver babel-plugin-transform-typescript-metadata -D

On babel.config.js:

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' }, loose: true }],
    '@babel/preset-typescript',
  ],
  plugins: [
    [
      'module-resolver',
      {
        alias: {
          // .tsconfig.json paths (pay attention, the format is different!):
          '@': './src',
        },
      },
    ],
    'babel-plugin-transform-typescript-metadata',
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    ['@babel/plugin-proposal-class-properties', { loose: true }],
  ],
}

On package.json:

"scripts": {
  "build:babel": "rimraf ./dist && babel ./src --extensions .js,.ts --out-dir ./dist/src --copy-files",
},