👌

バックエンドのTypeScriptプロジェクトのテンプレート

2022/08/06に公開

TypeScript

Node.js

tech

概要

バックエンドのTypeScriptプロジェクトを作成する際、毎回1から設定していたのでテンプレートを作成しました。TypeScrip、ESLint、Prettier、Jestの設定内容を書いておきます。

テンプレートはGitHubに反映しています。

設定ファイル

package.json

jestは ts-jest だと遅いので、 swc を使うようにしています。
eslint では、jest と jsdoc のルールを追加しています。

package.json

{
  "scripts": {
    "build": "tsc",
    "lint": "eslint --ext .ts",
    "lint:fix": "eslint --fix  --ext .ts",
    "test": "jest"
  },
  "devDependencies": {
    "@swc/core": "^1.2.223",
    "@swc/jest": "^0.2.22",
    "@types/jest": "^28.1.6",
    "@types/node": "^18.6.4",
    "@typescript-eslint/eslint-plugin": "^5.32.0",
    "@typescript-eslint/parser": "^5.32.0",
    "eslint": "^8.21.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-jest": "^26.7.0",
    "eslint-plugin-jsdoc": "^39.3.4",
    "jest": "^28.1.3",
    "prettier": "^2.7.1",
    "ts-jest": "^28.0.7",
    "ts-node": "^10.9.1",
    "typescript": "^4.7.4"
  }
}

.eslintrc.json

ESLintの設定ファイル

eslintは eslint:recommended を使用する。
テスト書く際のルールとして、 plugin:jest/recommended と plugin:jest/style を追加
ドキュメントのルールとして、 plugin:jsdoc/recommended を追加
prettier の設定も追加

.eslintrc.json

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:jest/recommended",
    "plugin:jest/style",
    "plugin:jsdoc/recommended",
    "prettier"
  ],
  "plugins": ["@typescript-eslint", "jest", "jsdoc"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "sourceType": "module"
  },
  "env": { "node": true, "es6": true },
  "rules": {
    "jsdoc/require-jsdoc": [
      "error",
      {
        // エクスポートされたもだけを有効にする
        "publicOnly": true,
        "require": {
          "ArrowFunctionExpression": true,
          "ClassDeclaration": true,
          "MethodDefinition": true
        },
        // Constructor のコメントはオフにする
        "checkConstructors": false
      }
    ],
    // TypeScript なので引数の型の説明はオフにする
    "jsdoc/require-param-type": "off",
    // TypeScript なので返り値の型の説明オフにする
    "jsdoc/require-returns-type": "off"
  }
}

.prettierrc.js

prettierの設定ファイル

.prettierrc.js

// https://prettier.io/docs/en/options.html
module.exports = {
  tabWidth: 2, //インデントのスペース数
  singleQuote: true, //シングルクォートに統一
  trailingComma: "es5", //末尾のカンマをどうするか: es5に準拠させる。
  printWidth: 120,
};

jest.config.js

jestの設定ファイル

ts-jestは実行速度が遅いので、 transform で '@swc/jest' を指定する。

jest.config.js

/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  roots: ['<rootDir>/tests/'],
  transform: {
    '^.+\\.tsx?$': ['@swc/jest'],
  },
};

tsconfig.json

TypeScriptの設定ファイル

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "commonjs",
    "strict": true,
    // ファイルの文字列の大文字小文字を区別する
    "forceConsistentCasingInFileNames": true,
    // インデックス型や配列で宣言されたオブジェクトが持つプロパティへのアクセスを厳密に評価する
    "noUncheckedIndexedAccess": true,
    // スーパークラスのメソッドをオーバーライドする時、overrideを必須にする
    "noImplicitOverride": true,
    // witch文で、caseをbreakやreturnで終了する
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "sourceMap": true
  },
  "include": ["src/**/*"]
}

settings.json

VSCodeで自動フォーマットさせるために設定する。

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}

バックエンドのTypeScriptプロジェクトのテンプレート

概要

設定ファイル

package.json

.eslintrc.json

.prettierrc.js

jest.config.js

tsconfig.json

settings.json

参照

Discussion