開発覚書はてな版

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

Visual Studio Code

【VSCode】エディターで制御文字を表示

概要 Visual Studio Code のエディターで制御文字を表示する方法を記載する。

【VSCode】おすすめ拡張機能 - REST Client

概要 Visual Studio Code で普段利用している拡張機能ご紹介です。 今回は REST Client です。 以下のページの説明通りにテキストを書くだけで簡単にURLへのアクセスが出来ます。 marketplace.visualstudio.com

【Nuxt.js/Vue.js/Jest】テストコード上で.vueファイルの型情報を使う

概要 Nuxt.js/Vue.jsでJest使用時に.vueファイルの型情報を使用する方法を記載します。 ※非公式

【VSCode】拡張機能: GitLens - チケットURLの設定変更

概要 GitLensのオートリンク機能のチケットURLの向き先を変更する方法を記載します。 ※GitLens Version 11.6時点の情報です。 marketplace.visualstudio.com 設定方法 公式サイト GitLens拡張機能の説明でAutolink Settingsに設定方法の記載があります。 set…

【TypeScript】TypeScript 4.0 で気になった箇所

概要 TypeScript 4.0 のバージョンアップ内容で気になった箇所をピックアップしていきたいと思います。 devblogs.microsoft.com

【VSCode】おすすめ拡張機能 - open in browser

概要 Visual Studio Code で普段利用している拡張機能ご紹介です。 今回は open in browser です。 エクスプローラーからファイルを選択して、そのファイルをWEBブラウザで表示することが出来ます。 marketplace.visualstudio.com

【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をソース管理等で共有することで、チーム内でワークスペース設定を共有できます。 ワークスペースの設定 基本設定の設定からワークスペースの設定ができます。 用途 フォーマットをチーム内で共有する用途で使用できます。 下記の…