開発覚書はてな版

個人的な開発関連の備忘録

Visual Studio Code

【VSCode】おすすめ拡張機能 - Task Explorer

概要 Visual Studio Code で普段利用している拡張機能ご紹介です。 今回は Task Explorer です。 Visual Studio Code のタスク機能を一覧化・実行管理が出来ます。既存機能であるNPMスクリプト以外も一覧化・実行管理が出来るので便利です。 marketplace.vis…

【VSCode・Deno】DenoのテストをVSCodeでデバッグする

概要 Visual Studio Code で Deno のテストをデバッグする設定を記載します。 通常のデバッグ実行の記事は以下を参照してください。 kakkoyakakko2.hatenablog.com

【VSCode】おすすめ拡張機能 - Deno

概要 Visual Studio Code でDeno向けの拡張機能のご紹介です。 複数のDeno向けの拡張機能がありますが、今回は以下の拡張機能を紹介します。 marketplace.visualstudio.com

【VSCode・Deno】DenoをVSCodeでデバッグする

概要 Visual Studio Code で Deno をデバッグする設定を記載します。 以下のページを参考に設定しています。 deno.land

【VSCode・Deno】拡張機能:Remote - Containers で Deno の開発環境を構築

概要 Visual Studio Code の拡張機能「Remote - Containers」で Deno の開発環境を構築してみました。 marketplace.visualstudio.com Remote - Containers でDockerfile使った場合の設定方法は以下の記事を参照してください。 kakkoyakakko2.hatenablog.com …

【VSCode】拡張機能:Remote - Containers で Docker Compose を使う

概要 Visual Studio Code の拡張機能「Remote - Containers」で Docker Compose を使用した場合の設定方法を記載します。 code.visualstudio.com marketplace.visualstudio.com Remote - Containers でDockerfile使った場合の設定方法は以下の記事を参照 kak…

【VSCode】拡張機能:Remote - Containers を使ってみた

概要 Visual Studio Code の拡張機能「Remote - Containers」を使ってみました。 Docker上で開発環境を構築するため、ホストPCに余計なインストール作業をせずに済むので便利です。 また、ターミナル上からコンテナ上の操作が簡単に出来るので便利です。 こ…

【VSCode】おすすめ拡張機能 - Local History

概要 Visual Studio Code で普段利用している拡張機能ご紹介です。 今回は Local History です。 ファイルの変更内容をソース管理を使用せずに履歴として管理できます。 marketplace.visualstudio.com

【VSCode】おすすめ拡張機能 - Error Lens

概要 Visual Studio Code で普段利用している拡張機能ご紹介です。 今回は Error Lens です。 Visual Studio Code上のエディタ上にエラー・警告メッセージが表示されるようになります。 marketplace.visualstudio.com

【VSCode】ESLintを使用してコードを自動フォーマットする

概要 Visual Studio Code の TSLint拡張機能と eslint-plugin-prettier を使用してソースコードを自動フォーマットすることが出来ます。 各種設定や使用ライブラリ等を記載します。 marketplace.visualstudio.com github.com TSLintの自動フォーマットについ…

【VSCode】おすすめ拡張機能 - Jest Test Explorer

概要 Visual Studio Code で普段利用している拡張機能ご紹介です。 今回は Jest Test Explorer です。 Visual Studio Code上のTest Explorer から Jest を実行できる機能です。 marketplace.visualstudio.com

【NestJS】VSCodeでデバッグ実行

概要 NestJSをVSCodeからデバッグ実行をする方法を記載。

【VSCode】Visual Studio Code v1.35 の気になる新機能

目次 目次 概要 Languages関連 Extract to type alias refactoring for TypeScript JavaScript and TypeScript suggestion sorting Source control関連 Compare merge conflicts with complete context 拡張関連 Remote Development (Preview) 概要 Visual S…

【VSCode】おすすめ拡張機能 - Swagger Viewer

概要 Visual Studio Code で普段利用している拡張機能ご紹介です。 今回はSwagger Viewerです。 Visual Studio Code上でSwagger Editorを使用できる機能です。 marketplace.visualstudio.com

【VSCode】Visual Studio Code v1.32 の気になる新機能

目次 目次 概要 Editor関連 Hover and Problems panel peek improvements Debugging関連 Font configuration for Debug Console Debug Console text wrapping 概要 Visual Studio Code v1.32がリリースされましたね。 恒例の気になる新機能をピックアップし…

【VSCode】TSLintを使用してコードを自動フォーマットする

概要 Visual Studio Code の TSLint拡張機能と tslint-plugin-prettier を使用してソースコードを自動フォーマットすることが出来ます。 各種設定や使用ライブラリ等を記載します。 marketplace.visualstudio.com github.com

【VSCode】Visual Studio Code v1.31 の気になる新機能

目次 目次 概要 Workbench関連 Improved keyboard navigation Hierarchical Select All Cut command in Explorer context menu Integrated Terminal Reflow support 概要 Visual Studio Code v1.31がリリースされましたね。 恒例の気になる新機能をピックア…

【Jest】JestをVSCodeでデバッグする

概要 Visual Studio CodeでJestをデバッグするための設定を記載します。 基本的には以下のURLの通りです。 github.com

【VSCode】Visual Studio Code v1.30 の気になる新機能

目次 目次 概要 Languages Improved display of JavaScript and TypeScript callbacks Highlighting of Markdown elements in JSDoc comments Workbench関連 Multiline search input References view 概要 Visual Studio Code v1.30がリリースされましたね。…

【VSCode】Visual Studio Code v1.29 の気になる新機能

目次 目次 概要 Search関連 Multiline search Show line numbers in search Workbench関連 Symbol order in Breadcrumbs Preview Features IntelliSense locality bonus おわりに 概要 Visual Studio Code v1.29がリリースされましたね。 気になる新機能をピ…

【VSCode】おすすめ拡張機能 - Angular Language Service

概要 Visual Studio Code で普段利用している拡張機能ご紹介です。 今回はAngular Language Serviceです。 Angular Supportと同様にHTMLからTypeScriptの定義に飛ぶことが可能です。(TypeScriptからHTMLへ飛ぶことは不可) 基本的にはHTML側の開発サポート…

【VSCode】おすすめ拡張機能 - Angular Support

概要 Visual Studio Code で普段利用している拡張機能ご紹介です。 今回はAngular Supportです。 Angular Language Serviceと重複している箇所がありますが、HTML・TypeScriptの双方から定義に飛ぶことができる拡張機能です。 marketplace.visualstudio.com

【VSCode】推奨拡張機能を共有

概要 .vscode/extensions.jsonをソース管理等で共有することで、チーム内で推奨拡張機能を共有できます。 推奨拡張機能の記載方法 .vscode/extensions.jsonに拡張機能のIDを記載することで推奨拡張機能として共有できるようになります。 拡張機能のIDの確認 …

【VSCode】ワークスペース設定を共有

概要 .vscode/settings.jsonをソース管理等で共有することで、チーム内でワークスペース設定を共有できます。 ワークスペースの設定 基本設定の設定からワークスペースの設定ができます。 用途 フォーマットをチーム内で共有する用途で使用できます。 下記の…

【VSCode】Visual Studio Code v1.28 の気になる新機能

目次 目次 概要 Workbench関連 Custom title and menu bar on Windows by default Project level snippets Copy Relative Path Problems panel - Show error codes Editor IntelliSense locality bonus おわりに 概要 Visual Studio Code v1.28がリリースさ…

【VSCode】Visual Studio Code v1.27 の気になる新機能

目次 目次 概要 Workbench関連 Settings editor Breadcrumbs improvements New Terminal menu Languages Path completion for CSS imports おわりに 概要 Visual Studio Code v1.27がリリースされましたね。 気になる新機能をピックアップして紹介します。 c…

【VSCode】Visual Studio Code v1.26 の気になる新機能

目次 目次 概要 Workbench関連 Breadcrumbs Run npm scripts from package.json View menu cleanup おわりに 概要 Visual Studio Code v1.26がリリースされましたね。 気になる新機能をピックアップして紹介します。 code.visualstudio.com

【VSCode】おすすめ拡張機能 - Bookmarks

概要 Visual Studio Code で普段利用している拡張機能ご紹介です。 今回はBookmarksです。 文字通りコード内のブックマークを保存していく機能です。 marketplace.visualstudio.com

【VSCode】おすすめ拡張機能 - GitLens

概要 Visual Studio Code で普段利用している拡張機能ご紹介です。 今回はGitLensです。Gitを利用している場合にとても便利です。 ※GitLens Version 8.5時点の情報です。 marketplace.visualstudio.com

【VSCode】ワークスペースのTypeScriptのバージョンを使用

概要 Visual Studio Codeの各ワークスペースのTypeScriptバージョンを指定して使用する。