👌

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

2022/08/05に公開約3,900字

概要

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

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

https://github.com/nsuzuki7713/typescript-mono-repo/tree/main/packages/nodeTemplate

設定ファイル

package.json

  • jestは ts-jest だと遅いので、 swc を使うようにしています。
  • eslint では、jestjsdoc のルールを追加しています。
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/recommendedplugin: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
  },
}

参照

https://qiita.com/notakaos/items/85fd2f5c549f247585b1

https://this.aereal.org/entry/2020/07/29/235650

https://miyauchi.dev/ja/posts/speeding-up-jest/

https://zenn.dev/chida/articles/bdbcd59c90e2e1

https://qiita.com/ryokkkke/items/390647a7c26933940470

Discussion

ログインするとコメントできます