TypeScriptの型を展開してホバー表示してくれるVSCode拡張「Prettify TypeScript」が便利
TypeScriptは強力な型システムが魅力です。 しかし、複雑な型定義は理解が難しいです。特にライブラリの型定義などはジェネリクスや交差型などがネストしていることも多く、すぐに把握するのが難しい場合があります。 Visual Studio Code（以下VSCode）でTypeScriptの開発をしている際、型にカーソルをホバーすると型情報が表示されます。 しかし、深いネストや複雑な型の場合、展開される情報が不十分で、定義を追う必要があります。 そんな時に役立つVSCodeの拡張機能がないかな〜と探していたら「Prettify TypeScript」というぴったりの拡張機能を発見しました！この拡張機能を使うと、ホバーした時に型が展開された状態で表示されるため、型情報を把握しやすくなります。 Prettify TypeScriptの概要 Prettify TypeScriptを使用すること
VS Codeでファイルを比較し、差分（diff）を表示するには
VS Codeでファイルを比較し、差分（diff）を表示するには：Visual Studio Code TIPS VS Codeが持つファイルの差分（diff）を表示してくれる機能を使って、ファイル間またはファイルとクリップボードの差分を表示する方法を解説。
VSCodeで一部のファイルだけをバイナリエディタ開く
VSCodeで一部のファイルだけをバイナリエディタ開く 開発をしていると画像データなどをバイナリとして確認したいときがたまにあります。 そういった場合に自分はVSCodeの拡張機能であるHex Editorを利用しています。 Hex Editorとは Hex EditorはMicrosoftが開発しているVSCodeの拡張機能です。 主に画像などのバイナリファイルを扱うためのエディタを追加することができます。 ファイルの開き方 コマンドパレットから開く場合 画像データを通常の方法で開く タブがアクティブな状態でコマンドパレットを開く > Hex Editor: Open Active File in Hex Editorを入力 コンテキストメニューから開く場合 画像データを通常の方法で開く タブがアクティブな状態でタブのコンテキストメニューを開く 「エディターを再度開くアプリケーションの選
Web版VSCodeがDockerコンテナをWASM環境で起動、Webブラウザ内ローカルマシンとして利用可能に。拡張機能「vscode-container-wasm」登場
Web版VSCodeがDockerコンテナをWASM環境で起動、Webブラウザ内ローカルマシンとして利用可能に。拡張機能「vscode-container-wasm」登場 WindowsやMacなどのデスクトップPCでVisual Studio Code（以下VSCode）を利用して開発をする場合、同じローカルマシン上でDockerコンテナのLinux環境を起動し、VSCodeのターミナルで接続して操作することは、開発環境としてよくあることだと思います。 これと同じことをWebブラウザ版のVSCodeでも実現する、すなわちWeb版VSCodeが同一Webブラウザ上にWebAssembly化したDockerコンテナを起動し、Web版VSCodeからローカルマシンとして接続し利用できる、実験的実装を実現したVSCodeの拡張機能「vscode-container-wasm」が登場しました。 V
VSCodeのデフォルトターミナルを変更する方法
VSCodeのデフォルトターミナルを変えるには Windows環境で使用しているVSCodeのデフォルトターミナルがPowerShellになっており、起動時に毎回git-bashへ切り替えるのが煩雑だったため設定変更することにしました。 プロファイル設定を変更 VSCodeでターミナルビューを開き、右上の「∨」アイコンをクリックし「Select Default Profile」を選択。 使用できるターミナル一覧から好みのシェルを選択。 既存ターミナルをkillして再起動すると、プロファイルに指定したシェルがデフォルトで開くようになります。 コマンドパレットでも設定可能 ちなみに ctrl + shift + P で開くコマンドパレットからも同様の設定にたどり着けます。 terminal: select default profile と入力し シェルを選択。 VSCode登場当初と違ってs
Amazon QをVSCodeでつかってみた - NRIネットコムBlog
はじめに Amazon Qとは VSCodeでAmazon QにChatする セットアップ 質問してみる 余談：Chatでエラー発生 Javaコードのバージョンアップ（未検証） まとめ はじめに こんにちは、高橋です。 先日AWS re:Invent2023に行ってきました。 Keynoteで発表されたAmazon Qについて、VSCodeで使ってみた感想を簡単にまとめようと思います。 Amazon Qとは Amazon QはAmazonによって開発された生成型AIアシスタントです。このツールは、特にAWS（Amazon Web Services）のエコシステム内で開発者やIT専門家を支援するよう設計されています。Amazon Qは自然言語処理を用いて、ユーザーが提出する質問や要求に応じて迅速かつ効果的な解決策を提供します。 Amazon Qには以下の種類がありますが、今回はAmazon
VSCodeのGit連携をさらに便利に！ 拡張機能Git History、Git Graph、GitLensを解説
第8回は、前回の続きとして、GitHubとの連携機能、連携を強化するGit History、Git Graph、GitLensといった拡張機能を紹介し、GitHub上でワンストロークでオンライン版VSCodeを呼び出せるGitHub Codespacesについても紹介します。 はじめに Microsoftの提供するVisual Studio Code（VSCode）は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり、利用の領域を拡げたりすることも大きいでしょう。本連載では、このVSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで
VSCodeにFigmaを組み込む「Figma for VS Code」登場。コードの自動補完にも対応
VSCodeにFigmaを組み込む「Figma for VS Code」登場。コードの自動補完にも対応 昨年（2022年）、Adobeによる買収が発表され話題となったWebデザインツールを提供するFigmaは6月23日と24日の2日間、イベント「Config 2023」をサンフランシスコで開催しました。 その基調講演で、VSCodeのコードエディタ画面にFigmaの機能を組み込む「Figma for VS Code」が発表されました。 Bring Figma to VS Code Our new extension for VS Code eliminates context switching and helps you move faster with code suggestions based on your designs. Install to... → Inspect Fig
WindowsにPHPを導入してVSCodeで開発を始めるまでの手順 - Qiita
はじめに Windows上に最新版のPHPをインストールして使い始めるまでに必要な最低現の手順を、備忘録としてメモしてみました。 このドキュメントはローカル開発環境の構築をターゲットにしていて、Webサーバ環境は目的としていませんのでご注意ください。 事前準備 再頒布可能パッケージのインストール PHPバイナリの実行に「Visual Studio 2015 の Visual C++ 再頒布可能パッケージ」が必要な為、以下よりダウンロード・インストールしておく。 https://www.microsoft.com/ja-jp/download/details.aspx?id=48145 インストール手順 PHPのインストール 以下の手順でPHP For Windowsをインストールする。 PHP For Window をダウンロードする http://windows.php.net/down
チーム開発でVSCodeの拡張機能やフォーマット設定などを統一したい時に便利な設定ファイルについて | DevelopersIO
ただし、settings.jsonとかkeybindings.jsonをいじり始めると平気で1日溶けます。私はよく現実逃避で始めたキーボード設定で時間を溶かします。 こんにちは。AWS事業本部コンサルティング部に所属している今泉（@bun76235104）です。 みなさんはエディターは何を利用していますか？（火種） 私はnvimやVSCodeを使い分けています。チームで開発する時やペアプロをする時はVSCodeに便利な仕組みが揃っているからです。 今日はチーム開発の際にさっと導入できるわりに、不要な手間を省いてくれる.vscode/settings.jsonと.vscode/extensions.jsonについてお話しします。 何がうれしいのか .vscode/settings.jsonでは以下のようにファイル保存時のフォーマッタ適用や適用するフォーマッタの指定が可能です。 .vscode
君はVS Codeのデバッグの知られざる機能について知っているか - Qiita
はじめに こんにちは、kenです。 GWに「暇だな～～、こんな日はVS Codeの公式ドキュメントを読むか！w」と思って何気なく読んでたらデバッグに関して知らない機能がいくつかあったので、今回はそれをご紹介したいと思います。 おそらく今から紹介する機能はあまり知られてないと思います。もし全部知ってたらVS Code完全理解者なので誇ってください。（！？） 以下に記載する内容はVS Codeの公式ドキュメントのDebuggingという章を参考にしています。 注意 これから紹介する機能は言語によって使えたり、使えなかったりします。 今から紹介する機能のデモはすべてPythonで行おうかと思ったのですが、上記の理由からPythonではサポートされていない機能についてはJavaScriptやC++で代用しました。 デバッグで使える便利な機能 ログポイント機能 行を指定しログポイントを追加すると、そ
【全人類へ】お前らはスペルミスが多すぎるッッ！！絶対に入れて欲しい拡張機能！【VisualStudioCode】 - Qiita
【全人類へ】お前らはスペルミスが多すぎるッッ！！絶対に入れて欲しい拡張機能！【VisualStudioCode】HTMLJavaScriptフロントエンドVSCodeVisualStudioCode みなさん、おはようございます！ @f0lstです！ さてさて、いきなりですが。 よく聞くんだ… お前らはスペルミスが多すぎるッッ！！！！！ スペルミスしすぎじゃないかッッ!?!?!?!? と言っておりますが、僕自身もスペルミスとっても多いです そんな我らに救世主を 我は救世主 「Code Spell Checker」 だ... これこそが、全人類に使ってほしいVSCodeのExtention、「Code Spell Checker」です！ これを使えば、タイポの悩みから解放されます それぞれの世界線を見てみよう まず、Code Spell Checkerがない世界線 「さてさて、いつも通りコー
【VSCode・Mermaid.js】ER図もVSCodeとgitで管理がしたい！
前置き ER図に変更があったらしいけどどこが変わったのかパッと見分からない！ ER図を変更したいけど変更点をまとめたりするのがめんどくさい！ ちょっと前の変更とその前の変更の差分が見たい！ あるあると思った方は今すぐ高評価と→のサポートをお願いします！ ...という冗談はさておき。 こちらの記事はそんな思いで何か良い解決方法は無いかと色々とGoogle検索をして色々と試した結果の備忘録となります。 全部の作業に2時間程度しか使っていないのでその程度の深みでしかない事を予めご了承ください。 気が向いたら更に調査を進めて見ようと思います。 結論 Mermaid.jsをうまいことVSCodeで使ってgitで管理してみたら素晴らしい体験だった 使用例 erDiagram user ||--o{ post : owns post ||--o{ updoot : has user }|--o{ upd
まじか！VS Codeでできることがまた増えた、エディタで画像から背景を1クリックで切り抜けるようになったぞ
Visual Studio Codeでついに、画像から背景を切り抜けるようになりました！ remove.bgをVS Codeで利用できる機能拡張がリリースされ、.jpg, .pngの写真画像を1クリックするだけで簡単に背景を切り抜くことができます。エディタとしても高機能なのに、画像編集までできるようになるとは！ VS Codeで、いつものぱくたそ画像から背景を1クリックで切り抜けます VS Codeで画像から背景だけを切り抜く VS Codeにremove.bgをインストールする手順 VS Codeで画像から背景だけを切り抜く VS Codeで画像から背景だけを切り抜くのは、1クリックで完了します。 まずは、ぱくたそ画像を用意し、VS Codeで開きます。
VS Code の使い始めに入れておくと便利な拡張機能 10 選
はじめに この記事では、IT エンジニアである/ないに関係なく、Visual Studio Code (以下、VS Code) をこれから初めて使い始める人が、最初に入れておくと後々便利になるだろうと思われる拡張機能を紹介しています。 拡張機能 (Extension) とは、サードパーティー製の追加機能のようなものであり、誰でも自由に開発・公開することができるようになっているものです。VS Code は無償で提供されているテキストエディタですが、それだけでは不便というユーザーの悩みを解消してくれるものです。 (という立ち位置で存在していた当初でしたが、最近は標準機能のみでも最早テキストエディタという範疇を超えている気がしなくもないです) まだ拡張機能を使い始められていない/使いこなせていないという方は、是非この記事を参考に、VS Code の拡張機能を使い始めるきっかけにしてもらえれば幸い
mermaidを使ったmarkdown資料作りメモ(VS Codeの場合) - Qiita
Introduction 最近、VS codeでメモやドキュメントを残すことが増えて、Markdownで書く機会が増えました。 *2022/2/22 GithubやNotionでも、mermaid記法をサポートしてきており、注目度も上がってきてますね。 いろいろと試しているなかで、Mermaidを使ってガントチャートやシーケンス図も作れる便利さを知り、せっかくなので書き方をnoteしておきます。 VS codeをmarkdown editorとして使用するということ自体は、多くの方がやっています。 特に、VS code + Markdown Preview Enhanced の拡張機能 という構成で使用する人が多く、私もその構成で使っています。 余談ですが、もともとAtmoでかなり支持されていた拡張機能（パッケージ）のようです。 私もAtomを使うには使いますが、VS codeのほうがサク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Visual Studio Code」でのリモート開発が手軽に ～リモートトンネル機能が提供開始／「SSH」は不要。「VS Code Server」で簡単セットアップ
ソフト開発だけじゃない、日常業務に役立つVSCode活用術
【Visual Studio Code】JSONを整形する方法 - Qiita
VS CodeでMarkdownをプレビューするには？
