TypeScript開発環境をつくる

Web開発、TypeScript開発の環境づくりの一般的、標準的なものがなんなのか
よくわからないままに、ツギハギで会社やWebで情報収集していました。
フューチャーアーキテクトさんのサイトがわかりやすくて勉強になったので
試した時のコマンドメモを残します。

future-architect.github.io

TypeScript、prettier、ESLint、Jestをセットアップ。

複数バージョンのNode.js切り替えれるようにnodenvを使う。
16.2.0を使うように指定する。

nodenv local 16.2.0

npm initする。package.jsonファイルができる。
src, __tests__フォルダを作る。

npm init
mkdir src
mkdir __tests__

変換先のdistはGitに登録しない。

vi .gitignore
dist
.DS_Store
Thumbds.db

TypeScriptをインストールする。

npm install typescript
npm uninstall typescript
npm install --save-dev typescript
npm install --save-dev ts-node

フォーマッタはprettierをインストールする。

npm install --save-dev prettier

.editorconfigに設定。

vi .editorconfig
root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

npm run lint:prettier

ESLintをインストールする。

npx eslint --init
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript
✔ Would you like to install them now with npm? · No / Yes

npm install --save-dev eslint-config-prettier

eslint-config-prettierも。

package.jsonの設定。

  "scripts": {
    "test": "jest",
    "fix": "run-s fix:prettier fix:eslint", ★
    "fix:prettier": "prettier --write src",
    "fix:eslint": "eslint src --ext .ts --fix",
    "lint": "run-p lint:prettier lint:eslint", ★
    "lint:prettier": "prettier --check src",
    "lint:eslint": "eslint src --ext .ts",
  },

修正は直列、チェックは並列実行するようにしています。
複数のタスクを並列や並行で実行するには次のコマンドをインストール。

npm install --save-dev npm-run-all

テストにはJestをインストール。
scripts/testディレクトリを作成する。

npm install --save-dev jest ts-jest @types/jest eslint-plugin-jest
mkdir -p scripts/test

VSCodeの拡張機能、Prettier、ESLintをインストールする。
esbenp.prettier-vscode
streetsidesoftware.code-spell-checker
dbaeumer.vscode-eslint

ここまで。