Zenn
📝

TypeScriptの開発環境の構築メモ

2023/07/01に公開
TypeScript
ESLint
Prettier
tech

業務で普段触らないTypeScriptとExpressを触ることになったので、0から開発環境の構築をしていく。目標としては、Expressでバックエンドの開発を快適にできるくらいになること。

Node.jsバージョン管理ツール

選定

とりあえずnvmにした。

TypeScriptをあまり触ったことがないこともあって、以下の理由で選定した。
流行っているツールはVoltaとかがあったが、まずは取っつきやすそうなものにしてみた。

  1. 信頼性（Githubのスター数や参考資料から）
  2. 人気（Githubのスター数）

参考：

インストール

初回のnvmの適用手順は以下の通り。

git clone https://github.com/nvm-sh/nvm.git .nvm
cd ~/.nvm & git checkout v0.39.3
. ./nvm.sh

これ以降はシェルを起動した際に自動的にソースされるようにするために、.zshrcに以下を追加。

# nvm
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

あとはプロジェクトのルートに.nvmrcを置いてそこにnode.jsのバージョンを書いておく。（nvimとnvmってめっちゃ誤爆するからバージョン管理ツール変えたくなってきたｗ）

パッケージ管理システム

選定

npmにした。

Node.jsのパッケージ管理システムはnpmとyarnの二強らしいが、yarnはnpmにインストール速度とセキュリティを追加したようなもののようでそれらを気にしないのであればnpmでもよさそう（特にインストール速度に関しては最近のアップデートでnpmも並列化によってあまり変わらないらしい）

参考：

インストール

npmはNode.jsのインストール時に自動で入ってくるのでインストールは不要。

TypeScript

インストール

npm init
npm install typescript
実行後のフォルダ構成
.
├── node_modules
│   └── typescript
├── package-lock.json
└── package.json
実行後のpackage.json
{
  "name": "ts_sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "typescript": "^5.1.6"
  }
}

tsconfig.json

設定

以下のコマンドでtsconfig.jsonのひな型を作る。
（npxはパッケージの一時的なインストールをするコマンドらしく、こういった初期化用のスクリプトとかにつかうっぽい）

npx tsc --init

これを実行すると大量の設定がコメントアウトされたファイルが生成される。それぞれの設定に説明が書いてあるのでこれを見てアクティブにするか決める感じかな。（設定長くて全部見るのしんどそうｗ）

この設定はプロジェクトごとに異なるので今回はスキップ。
設定するときはここが参考になりそう。
https://typescriptbook.jp/reference/tsconfig/tsconfig.json-settings

Linter

選定

ESLintでTypeScriptのプラグインが入ったものを選択。

ESLintはJavaScriptのLinterで200以上の種類のルールが存在する。これをTypeScriptで使うためにはそれに加えてTypeScript特有のルールを追加するプラグイン（typescript-eslint/pluginなど）を入れる必要がある。それによって100程度のルールが更に追加される。

インストール

以下のコマンドでESLintおよびTypeScript用のパッケージをインストールする。

npm install eslint
npm install @typescript-eslint/parser
npm install @typescript-eslint/eslint-plugin

設定

TypeScript ESLintには二つの設定ファイルが存在する。

  • tsconfig.eslint.json
  • .eslintrc.js

上のtsconfig.eslint.jsonは型情報を利用するためにTypeScriptのコンパイルを行うようで、そのコンパイルの設定を各ファイルとなっている。これはtsconfig.jsonを参照するように設定もできるし、そのうえで一部設定を上書きすることもできる。

tsconfig.eslint.jsonの設定例
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "allowJs": true
  },
  "include": ["src", ".*.js"]
}

下の.eslintrc.jsはESLint自体の設定ファイルで、どのパーサやプラグインを使うか、どのコンパイルの設定を参照するかなどを指定する。

.eslintrc.jsの設定例
module.exports = {
  root: true,
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
  env: {
    browser: true,
    es2021: true,
  },
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    project: "./tsconfig.eslint.json",
    tsconfigRootDir: __dirname,
  },
  ignorePatterns: ["dist"],
  extends: [
    "airbnb-base",
    "airbnb-typescript/base",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
  ],
  rules: {
    "import/prefer-default-export": "off",
    "@typescript-eslint/quotes": ["error", "double"],
  },
};

参考：

Formatter

選定

Prettierにした。

Rust製の高速なFormatterのRomeというものもあるらしいが、Prettierの方が広く使われていそうなのと、そのPrettierと完全互換性はないようなので念のためPrettierにした。

参考：

インストール

npm install prettier eslint-config-prettier

eslint-config-prettierはPretteirとコンフリクトするようなESLintのルールを無向化するパッケージらしい（具体的にどのルールかは見てないが、おそらく自動整形した後の形はルールに違反しないようにしていると思われる。）

設定

.prettierrcに設定を書ける。これもプロジェクトごとに違いそうなため、例だけ見てみる。

{
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

あと、Linter、Formatterはエディタの拡張機能として使えるようにしておく必要がある。主に使っているエディタはneovimなので、masonやtrouble、nvim-lspなどのプラグインでそれらを使えるように設定しておく。

https://github.com/williamboman/mason.nvim
https://github.com/folke/trouble.nvim

Discussion