VSCode で TypeScript を書くための環境構築。 React などを使うと設定ファイルなども自動生成されるので TypeScript を試したい人向けに、必要な設定ファイルや npm パッケージ、拡張機能などのインストール手順です。
まずは、必要な npm パッケージをインストールするために package.json を作成する。
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
.
.
.
以下、長々と書いていますが、リンター、フォーマッター、TypeScript のインストールとその実行方法です。
目次
ESLint
ESLint は、リント(静的解析)ツールで構文エラーなんかを教えてくれる。 以下 ESLint の npm パッケージと拡張機能のインストールと設定。
npm コマンドで ESLint パッケージをインストール
コマンドを実行すると色々聞かれるけど TypeScript のところ意外はデフォルトで問題ない。 その後、必要なパッケージをダウンロードしてくれて eslint.config.mjs を自動で作成してくれる。
$ npm init @eslint/config@latest
? How would you like to use ESLint? …
To check syntax only
▸ To check syntax and find problems
? What type of modules does your project use? …
▸ JavaScript modules (import/export)
CommonJS (require/exports)
None of these
? Which framework does your project use? …
React
Vue.js
▸ None of these
? Does your project use TypeScript? …
No
▸ Yes
? Where does your code run? … (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
Node
The config that you've selected requires the following dependencies:
eslint, globals, @eslint/js, typescript-eslint
? Would you like to install them now? ‣ No / Yes
? Which package manager do you want to use? …
▸ npm
yarn
pnpm
bun
package.json
"devDependencies": {
"@eslint/js": "^9.9.0",
"eslint": "^9.9.0",
"globals": "^15.9.0",
"typescript-eslint": "^8.2.0"
}VSCode で ESLint の拡張機能をインストール
VSCode のショートカットキー Ctrl+p でコマンドパレットを開いて ESLint Extension をインストールする。 または、VSCode の左 Extensions から dbaeumer.vscode-eslint を検索してインストールする。
以下コマンドパレットでのインストール。
ext install dbaeumer.vscode-eslint
Prettier
Prettier は、コードをフォーマット(整形)する開発ツール。 以下 Prettier の npm パッケージと拡張機能のインストールと設定。
npm コマンドで Prettier パッケージをインストール
$ npm install --save-dev prettier
package.json
"devDependencies": {
"@eslint/js": "^9.9.0",
"eslint": "^9.9.0",
"globals": "^15.9.0",
"prettier": "^3.3.3",
"typescript-eslint": "^8.2.0"
}Prettier の設定ファイル
.prettierrc ファイルを作成して Pretteier Options を見ながら必要な設定を記述する。 設定ファイルを作らなくてもデフォルト設定でフォーマットしてくれるけど、複数人で作業する場合にする場合に統一できるのであった方がいい。
.prettierrc の例
{
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"bracketSpacing": false
}
VSCode で Prettier の拡張機能をインストール
VSCode のコマンドパレットで以下を実行して Prettier Extension をインストールする。
ext install esbenp.prettier-vscode
VSCode のフォーマッターの設定
VSCode のコマンドパレットから Preferences: Open User Settings (JSON) を検索して JSON を編集するか、 現在のディレクトリに .vscode/settings.json を作成して以下を設定する。
{
"editor.formatOnSave": true,
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
}
Prettier と ESLint の代替ツール Biome
Prettier と ESLint の代わりとして使える新興開発ツールで、フォーマットとリントがこれ１つで出来る。 Biome については別の記事 【Biome(バイオーム)】JavaScript/TypeScript などをフォーマット/リントできる開発ツール biomejs を使ってみた に書きました。
TypeScript
TypeScript のインストール。
$ npm install --save-dev typescript
TypeScript の設定ファイル tsconfig.json を作成。
$ npx tsc --init
TypeScript を書いて JavaScript に変換
ディレクトリとファイルの作成。
$ mkdir -p src/ts
$ touch src/ts/index.ts
ここまでのディレクトリ構成。
$ tree
.
├── eslint.config.mjs
├── node_modules
├── package-lock.json
├── package.json
├── .prettierrc
├── src
│ └── ts
│ └── index.ts
└── tsconfig.json
適当に index.ts を編集する。
$ cat src/ts/index.ts
const hello = () => {
return 'Hello World';
};
const message = hello();
console.log(message);
現在のディレクトリに JavaScript に変換したファイルを生成して中身を確認する
$ tsc --outDir .
$ cat ./index.js
"use strict";
const hello = () => {
return 'Hello World';
};
const message = hello();
console.log(message);
変換したファイルの実行。
$ node index.js
Hello World
ts-node を使って JavaScript に変換/書き出しせずに実行
TypeScript のトランスパイルと実行を package.json の scripts に書いておけば一発で実行できるけど、 npm パッケージの ts-node を使えば、tsc で js ファイルとして書き出さずに実行ができる。
ts-node のインストール
$ npm install --save-dev ts-node
エンドポイントとなるファイルを指定して実行。
$ npx ts-node src/ts/index.ts
Hello World
コメント
コメントを投稿