VS Code(Visual Studio Code)でTypeScriptの環境構築

f:id:ts0818:20211228154045j:plain

news.mynavi.jp

近年、汎用的な量子コンピュータを実現するための世界各国の企業がしのぎを削っている。超伝導回路を用いた手法により現在100物理量子ビット程度の量子計算が報告されているが、汎用量子コンピュータの実現には100万程度の量子ビット数が必要とされており、量子ビット数の増大が大きな課題となっている。

NTT・東大・理研、大規模な光量子コンピュータを実現する基幹技術を開発 | TECH+

この課題を解決すると期待されているのが光量子コンピュータだ。装置サイズを大きくすることなく時間軸上に量子ビットを増やすという「時間領域多重化技術」とゲート型量子操作と等価な操作ができる「手法測定誘起型量子操作」という従来とは全く異なるアプローチを用いることにより、圧倒的に大規模な汎用量子計算を可能にすると言われている。

NTT・東大・理研、大規模な光量子コンピュータを実現する基幹技術を開発 | TECH+

この光量子コンピュータにおいて、もっとも根幹となるのがスクィーズド光と呼ばれる特殊な量子状態の光。しかしこの光は生成が難しく、また光損失により容易に劣化してしまうといった課題がある。

NTT・東大・理研、大規模な光量子コンピュータを実現する基幹技術を開発 | TECH+

そして今回、3者は低損失な光ファイバー接続型量子光源モジュール(光パラメトリック増幅モジュール)を新たに開発した。NTTが培ってきた光通信バイス実装技術を用いることで、低損失な光ファイバー接続型のモジュールとして組み上げた。

NTT・東大・理研、大規模な光量子コンピュータを実現する基幹技術を開発 | TECH+

⇧「光量子コンピュータ」の課題であった「光損失」の割合を大幅に減少できたらしいですと。

「光量子コンピュータ」が「ゲームチェンジャー(game changer)」となることは間違いなさそう気はしますね。

今回は、TypeScript周りについてです。

レッツトライ~。

 

唐突に出現するtsconfig.jsonと言う名のファイル

Typescriptのドキュメントを読んでいて、

www.typescriptlang.org

⇧「tsconfig.json」なるファイルが唐突に出てくるのですが、何がすごいって、「tsconfig.json」がどうやって作られるのかの説明が一切ないというね...流石はMicrosoftさん、安定の不親切さは健在です。

で、海外でも、同様の疑問を抱いてる人はおり、

stackoverflow.com

It is supported since the release of TypeScript 1.6.

The correct command is --init not init:

$ tsc --init

Try to run in your console the following to check the version:

$ tsc -v

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

⇧ ということらしく、「tsc」コマンドでの作成をサポートしてくれるようになったみたいなのですが、ドキュメントの「Get Started」とかに載せてくれれば良いものを何故にMicrosoftは行わないのか、不思議でしょうがないのだが...

一応、

www.typescriptlang.org

⇧「tsc CLI Options」に説明はあるのだけど、ドキュメントの「Get Started」とかで「tsc --init」や「tsconfig.json」について説明があったほうが良い気がするのだけど、偉い人の考えることはよく分かりませんな...

今回は、

ts0818.hatenablog.com

⇧ 上記の記事で作成していた「TypeScript」用のプロジェクトを利用してます。

VS CodeVisual Studio Code)」で「TypeScript」用のプロジェクトとして用意していたフォルダを開き、「表示(V)」から「ターミナル」を選択し、

f:id:ts0818:20211226170632p:plain

「Command Prompt」を選択し、

f:id:ts0818:20211226170753p:plain

「tsconfig.json」を作成するコマンドを実行します。

f:id:ts0818:20211226170358p:plain

そうすると、「tsconfig.json」ファイルが作成されるのですが、「tsconfig.json」で設定できる項目については、

zenn.dev

⇧ 上記サイト様が詳しいです。

VS CodeVisual Studio Code)のextensionで追加は必要?

とりあえず、「VS CodeVisual Studio Code)」のドキュメントによると、

code.visualstudio.com

VS Code provides many features for TypeScript out of the box. In addition to what comes built-in, you can install an extension for greater functionality.

https://code.visualstudio.com/docs/languages/typescript#_typescript-extensions

⇧ ということなのですが、「TypeScript」に関する「extension(拡張機能)」について何を追加すれば良いのかサッパリですな...

pokuwagata.hatenablog.com

⇧ 上記サイト様が参考になるかと。

とりあえず、

  • ESLint
  • TypeScript Importer
  • TypeScript Import Sorter
  • Move TS
  • Prettier

の5つは追加しておいたほうが良さ気の模様、ということで「VS CodeVisual Studio Code)」で、上記の5つの「extension(拡張機能)」を追加しときました。

デバッグはどうするの?

動作確認したくなる時に、デバッグしたいことあるあるだよね?

dev.classmethod.jp

⇧ 上記サイト様が参考になるかと。

VS CodeVisual Studio Code)」の公式のドキュメントによりますと、

code.visualstudio.com

VS Code has built-in debugging support for the Node.js runtime and can debug JavaScript, TypeScript, or any other language that gets transpiled to JavaScript.

https://code.visualstudio.com/docs/editor/debugging

For debugging other languages and runtimes (including PHPRubyGoC#PythonC++PowerShell and many others), look for Debuggers extensions in the VS Code Marketplace or select Install Additional Debuggers in the top-level Run menu.

https://code.visualstudio.com/docs/editor/debugging

⇧「TypeScript」や「JavaScript」については、デフォルトで「デバッグ」のサポートをしてるけど、他の言語の場合は「extension(拡張機能)」として追加しないと「デバッグ」できないよ、ということらしい。

まぁ、今回は「TypeScript」を使っていく感じなので、デフォルトで「デバッグ」が使えるということらしい。

更にドキュメントを読み進めていくと、

Launch configurations

To run or debug a simple app in VS Code, select Run and Debug on the Debug start view or press F5 and VS Code will try to run your currently active file.

https://code.visualstudio.com/docs/editor/debugging

However, for most debugging scenarios, creating a launch configuration file is beneficial because it allows you to configure and save debugging setup details. VS Code keeps debugging configuration information in a launch.json file located in a .vscode folder in your workspace (project root folder) or in your user settings or workspace settings.

https://code.visualstudio.com/docs/editor/debugging

⇧「launch.json」ファイルを作るのをオススメと言っていて、「.vscode」フォルダも必要とのこと。

「.vscode」フォルダは何なのかと言うと、

code.visualstudio.com

VS Code provides two different scopes for settings:

  • User Settings - Settings that apply globally to any instance of VS Code you open.
  • Workspace Settings - Settings stored inside your workspace and only apply when the workspace is opened.

https://code.visualstudio.com/docs/getstarted/settings

Workspace settings override user settings. Workspace settings are specific to a project and can be shared across developers on a project.

Note: A VS Code "workspace" is usually just your project root folder. Workspace settings as well as debugging and task configurations are stored at the root in a .vscode folder. You can also have more than one root folder in a VS Code workspace through a feature called Multi-root workspaces. You can learn more in the What is a VS Code "workspace"? article.

https://code.visualstudio.com/docs/getstarted/settings

⇧とあるように、「VS codeVisual Studio Code)」自体の「設定」に、

  • User Settings
  • Workspace Settings

の2種類あるらしく、そのうちの「Workspace Settings」は、「.vscode」フォルダに保存される「debugging」や「task」の設定ということらしいですと。

VS codeVisual Studio Code)」で、「TypeScript」以外の言語も使うような場合は、「Workspace Settings」を利用しておけば、各プログラミング言語毎の「設定」を独立させておけるってことですかね。

イメージ的には、

f:id:ts0818:20211227223451p:plain

⇧ 上図のような感じで、プロジェクト毎に「設定」を変えたいような場合は「Workspace Settings」にしたほうが良いと思われるので、「.vscode」フォルダを作っておく感じになるんですかね?

なんか、

atmarkit.itmedia.co.jp

f:id:ts0818:20211228131822p:plain

ユーザー設定とワークスペース設定
マルチルートワークスペースVS Codeで開いた場合には、個々のフォルダに対して行ったワークスペース設定は基本的には適用されず、マルチルートワークスペースに対して行った設定が適用される。

Visual Studio Codeの設定「虎の巻」:IDE編:特集:Visual Studio Codeを使いこなそう!(1/3 ページ) - @IT

⇧「Multi-root Workspace」を利用している場合は、「Multi-root Workspace」の「設定」が一番優先されて読み込まれるらしい。

「User Settings」には、本当に共通で使う「設定」だけを記述しておくような感じになるんかな。

今回は、「Workspace Settings」を使っていくことに。「VS CodeVisual Studio Code)」で「ファイル(F)」>「ユーザー設定」>「設定」を選択。

f:id:ts0818:20211227230936p:plain

ワークスペース」タブを選択し、カーソルを合わせると「設定(JSON)を開く」と表示されるアイコンをクリック。

f:id:ts0818:20211227231058p:plain

「.vscode」フォルダと「settings.json」ファイルが作成されました。

f:id:ts0818:20211227231233p:plain

⇧「settings.json」ファイルに「設定」を追加していく感じなんですね。

なんというか、「settings.json」とかも中身が空で作成されるなら、コマンドで「.vscodeディレクトリと「settings.json」ファイルを作成でも良かったかもしれないですね。

ドキュメントを見た感じでは、

code.visualstudio.com

By default VS Code shows the Settings editor, but you can still edit the underlying settings.json file by using the Open Settings (JSON) command or by changing your default settings editor with the workbench.settings.editor setting.

https://code.visualstudio.com/docs/getstarted/settings

Depending on your platform, the user settings file is located here:

  • Windows %APPDATA%\Code\User\settings.json
  • macOS $HOME/Library/Application Support/Code/User/settings.json
  • Linux $HOME/.config/Code/User/settings.json

The workspace settings file is located under the .vscode folder in your root folder.

Note: In case of a Multi-root Workspace, workspace settings are located inside the workspace configuration file.

https://code.visualstudio.com/docs/getstarted/settings

⇧「User Settings」を使うにしろ「Workspace Settings」を使うにしろ、「設定」は「settings.json」ファイルに追加していく感じですかね、「settings.json」ファイルの配置場所が異なってはいるけれど。

一応、「User Settings」の「settings.json」ファイルの例は、

code.visualstudio.com

Default Settings

Below are the Visual Studio Code default settings and their values. You can also view the default values in the Settings editor.

https://code.visualstudio.com/docs/getstarted/settings

⇧ 載せてくれてはいるのだけど。

して、「TypeScript」プロジェクトにおける「settings.json」には、どんな「設定」を追加すれば良いのか?

「extension(拡張機能)」と「settings.json

どうやら、追加する「extension(拡張機能)」によっては、「settings.json」側で「設定」の追加が必要になってくる模様。

zenn.dev

  • フォーマットはprettierに任せよう(eslint-config-prettierを使用)
  • VSCodeの設定はeditor.codeActionsOnSaveとeditor.defaultFormatterを設定しよう

prettier,eslintを導入する際にハマったこと2021新年

⇧ 上記サイト様によりますと、「VS CodeVisual Studio Code)」の「extension(拡張機能)」として「ESLint」「Prettier」ってものを導入してる場合は、「settings.json」に設定しておいたほうが良い項目があるらしいですと。

zenn.dev

eslint-config-prettierv8.0.0からextendsの書き方が簡単になりました。

eslint-config-prettierのv8.0.0からextendsの書き方が楽になっていた

⇧ ということらしいのですが、そもそも、「eslint-config-prettier」が何なのか?

github.com

Turns off all rules that are unnecessary or might conflict with Prettier.

https://github.com/prettier/eslint-config-prettier

⇧ なんか「ESLint」と「Prettier」でバッティングしちゃう部分を回避してくれるのが、「eslint-config-prettier」というものらしく、「npm」でインストールが必要みたい。

f:id:ts0818:20211228140658p:plain

f:id:ts0818:20211228140722p:plain

⇧ とりあえず、最新のものをインストールしてみようかと。

f:id:ts0818:20211228141036p:plain

⇧ インストールできたようです。

そしたらば、「.eslintrc.*」ってファイルを作成します。「拡張子」が「ワイルドカード」になっているのだけど、ネットの情報を見た限りだと「.js」としてる情報が多いので、「.js」にしときました。

f:id:ts0818:20211228141321p:plain

で、「eslint-config-prettier」のバージョンが8以上だと、「.eslintrc.*」ファイルの中身は、以下のような記述で良いようです。

module.exports = exports = {
  env: {
    es2020: true,
    node: true,
  },
  parser: "@typescript-eslint/parser",
  parserOptions: {
    sourceType: "module",
    ecmaVersion: 2020,
    tsconfigRootDir: __dirname,
    project: ["./tsconfig.eslint.json"],
  },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
  ],
};

⇧ 上記で読み込んでいる「tsconfig.eslint.json」ファイルを作成で。

f:id:ts0818:20211228142920p:plain

ファイルを以下のように編集。

{
  "extends": "./tsconfig.json",
  "include": [
    "src/**/*.ts",
    ".eslintrc.js"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

そしたらば、「settings.json」も編集で。

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      },
      "eslint.format.enable": false,
      "editor.formatOnSave": true,
      "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
      },
      "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
      },
      "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
      },
      "editor.lineNumbers": "on",
      "editor.rulers": [80],
      "editor.wordWrap": "on",
      "eslint.packageManager": "yarn",
      "files.insertFinalNewline": true,
      "files.trimTrailingWhitespace": true,
      "npm.packageManager": "yarn",
      "typescript.enablePromptUseWorkspaceTsdk": true
}

⇧ 上記のように編集で保存。

「npm」の「モジュール」と「package.json

そして、「typesync」なる「モジュール」もインストールしておくと良いらしいという話が...

う~む、次から次へと新たな情報が出てきて、環境構築が終わらんではないか...

qiita.com

tech.motoki-watanabe.net

zenn.dev

⇧ 上記サイト様を参考にインストールしておきますか。

バージョンは、0.8.0が最新ということらしい。

f:id:ts0818:20211228145232p:plain

では、インスト~ル。

f:id:ts0818:20211228145422p:plain

そしたら、「package.json」に、「scripts」を追加しておくのが良いらしいので追加しておきます。

{
  "dependencies": {
    "typescript": "^4.5.4"
  },
  "devDependencies": {
    "eslint-config-prettier": "^8.3.0",
    "typesync": "^0.8.0"
  },
  "scripts": {
    "preinstall": "typesync || :"
  }
}

⇧ で保存。

利用する「npm」の「モジュール」や「VS CodeVisual Studio Code)」の「拡張機能」にもよるとは思いますが、

f:id:ts0818:20211228151125p:plain

⇧ 上記のファイルが揃ってれば、OKってことなんですかね?

まぁ、必須ではないファイルとかもあると思うけど。

とりあえず、「VS CodeVisual Studio Code)」で「TypeScript」の環境構築が整ったということにしておきますか。

毎度モヤモヤ感が半端ない...

今回はこのへんで。