VSCodeで"kawaii"開発環境を作ろう - Qiita
はじめに みなさんは普段どのような開発環境でコーディングしていますか? VSCodeやIntelliJシリーズ、Vimなど様々な環境があると思います。ですが、ただコードと真正面に向き合っても目が疲れたり動かないコードに苛立ちを覚えたりすることがあると思います。 そこで、"kawaii"開発環境を作って目を癒しながらコーディングをする最高の開発環境を作ってみましょう! 本日の主役 "kawaii"開発環境として使っていくのは、「Visual Studio Code(以下VSCode)」です。 VSCodeにはWebベースの技術が使われており、Electronというフレームワークを用いてWindows・Mac・Linux上で動作するクロスプラットフォームなデスクトップアプリとしてかなり有名なソフトウェアです。 Webベースということはお察しがよい方はわかるでしょう。そうですCSSが使用できます
VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~ - Qiita
VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~初心者umlVSCode新人プログラマ応援mermaid はじめに Mermaid Graphical EditorというVSCodeの拡張機能にとても感動したので一筆書きました こんな方におすすめ シーケンス図/クラス図/フローチャートをサクッと書きたいけどmermaidとか難しそう 😢 できること VSCode上でポチポチしながらシーケンス図/クラス図/フローチャートを描けるようになる mermaid記法のコードも自動生成されるよ 個人的メリット mermaidの学習コスト0 紙で書くよりも修正しながら書きやすい 導入手順 （簡単7steps） (1) VSCode上で「Mermaid Graphical Editor」という拡張機能をインストールする (2)
HackGen フォントを VSCode に適用してみた（Windows 11対応） | DevelopersIO
こんにちは！よしななです。 今回は、プログラミング用のフォントとしてオススメな HackGen フォントを VSCode にインストールし、反映させるまでの手順について備忘録として残します。 これから Windows 11 で開発環境を構築する方のための手助けになればと思います！ 目次 対象環境 対象読者 HackGen フォントとは？ セットアップ手順 インストール VSCode に反映させる やりたいこと イメージとしては、以下の画像の通り HackGen フォントを VSCode にインストールし、VSCode に反映させるところまでのセットアップ手順を示します。 対象環境 OS Windows 11 VSCode version 1.86 をインストール済みであること https://code.visualstudio.com/download 日本語化拡張機能導入済み環境で実行し
iTermをやめてVSCodeのターミナルに寄せる - yasuhisa's blog
背景 担保したいこと 1: ホットキーで一撃で呼び出せる 2: ウィンドウを透過させてターミナルと他のウィンドウを同時に眺められること 調査したこと & 解決方法 ホットキーで呼び出せるか => hammerspoonで割り当てで対応 ターミナルの透過 => 無理そうなので、代替手段で対応 メモ: ターミナル関係のキーバインド tmuxっぽくしたい その他キーバインド 背景 iTermをずいぶん長く使ってきたけど*1、VSCodeのターミナルが急速に進化しているので、乗り換えを検討した。 VSCodeが色々便利になってきた 自分が使っている範囲だと、vimキーバインドも特に問題ない*2 普段のコーディングはVSCode、コマンド操作くらいしかiTermは使っていない 特にCopilot系の進化は目覚ましい、長い物には巻かれろというか長期的にはエコシステムに乗っておきたい エディタだけでなく
VSCode上でCodeWhispererとCopilotを両方使うと、捗る (AIが脆弱性診断→AIが解説)
Qiita Advent Calendar 2023 「Visual Studio Code」 24日目の記事です。 言いたいこと VSCode上でAmazon CodeWhispererに脆弱性診断をさせてGitHub Copilot Chatにその解説をさせると、とても捗るよ。 もう少し細かい説明 GitHub CopilotやAmazon CodeWhispererって何？ GitHub Copilotは、IDE上でAIがコーディングの補完をしてくれるGitHub提供のサービスです。 Amazon CodeWhispererは、IDE上でAIがコーディングの補完をしてくれるAWS提供のサービスです。 つまり競合しています。比較用に両方を使ったことがある人はいても、日常的に同時使用している人は少ないのではないでしょうか。 ですが、メイン機能であるコーディング補完は一旦おいておいて、Co
GASの開発環境をローカルで作成する方法（2023年7月版） | DevelopersIO
Google Apps Scriptの環境構築をVSCode上で行う方法について詳しく解説していきます。clasp,asideを使って構築するので、爆速で構築できます。 ことのはじまり 私は最近Google Apps Script(GAS)の学習を始めました。 GASの学習を始めると、まずはAppsScript公式のIDEでスクリプトを書いていくことになると思います。 しかし、普段VSCodeを使い慣れている身からすると、VSCodeの便利機能が使いたくて仕方なくなります。 それじゃあ、使い慣れたVSCodeを使おうじゃないか！！ AppsScript公式のIDEだとGitに差分を残していくこともできないぞ！！（できます） というわけで、GASをVSCodeを使って開発する為の環境構築の手順を書いていきたいと思います。 前提条件 VSCodeがインストールされている Node.jsがインス
GitHub Copilotとチームでモブプロしたいときにハマったこと（VSCode & LiveShare） - Qiita
はじめに GitHub Copilotをチーム全員で使ってモブプロしたい！と思った時にハマりポイントがあったので、その内容と解消法です。 前提 チーム全員でVSCode & GitHub Copilot Extentionを利用。 GitHub Copilot for Businessを利用。 リモートで繋いで開発するチームのためLiveShareでコードを共有してモブプロ。 結論 LiveShareのゲスト側（URLを払い出してもらった側）はWorkspaceのTrustをしよう！ ハマったこと LiveShareのゲスト側（URLを払い出してもらった側）でなぜかVSCodeにCopilotアイコンが表示されない&コードがサジェストされない、、 ホスト側（LiveShareのURLを払い出した側）からはCopilotのアイコンが見えていて、コードのサジェストが動くぞ、、 原因 LiveS
VSCodeをメインのエディタにして半年たったので入れてある拡張機能を紹介します - 海波パソコン
VSCodeの画面編集という仕事柄、テキストエディタは毎日触る大事な仕事道具です。仕事の内容にあわせて設定などを変えると非常に捗ります。しかし、日本語を書きながら同時にはてな記法やらMarkdownやらCSSやらを書くという環境のため、なかなかテキストエディタのデフォルトの設定では痛し痒しといったところで、それなりにカスタマイズをしないといい感じになりません。 半年前に、それまでかなり長いこと使ってきた秀丸エディタからVSCodeに乗り換えてみたら、案外日本語をあれこれ書いたり編集したりするのにいい案配にすることができました。そこでなんとなくなじんだ今のカスタマイズ方法を書き残しておこうと思い立ちました。たぶんもっともっと拡張機能で便利にできるはずなので、ドラクエでいう「ひのきのぼうからこんぼうにそうびを変えた」くらいの気持ちで見ていただけるとうれしいです。 テーマ アイキャッチにしたのは
【日々更新】Visual Studio Codeの便利なプラグインまとめ（コーダー・マークアップ・フロントエンドエンジニア視点）
Visual Studio Code（VsCode）本体のインストール まだインストールされていない方は、以下からVsCode本体をダウンロードしてください。 VsCodeのおすすめプラグイン（コーダー・マークアップ・フロントエンドエンジニア視点） 私が導入しているVsCodeのプラグインを紹介します。 フロントエンドエンジニアとして働いている自分の普段の業務ではHTML CSS Sass(Scss) EJS Pug JavaScript TypeScript React Next.js PHP WordPress Markdownファイル等を触ることが多いので、それらに関連したプラグインが多くなっています。 共通 プラグイン名 機能
【分野別】VSCodeのおすすめ拡張機能まとめ - Qiita
はじめに 今回はVSCodeでおすすめの拡張機能を分野別に紹介していきます。 拡張機能は下記の分野に分けて紹介していきます。 VSCodeを使う全員向け Web制作関連 HTML&CSS関連 WordPress関連 フロント向け JavaScript React Vue サーバーサイド向け PHP Ruby その他 拡張機能を利用することで開発の生産性を上げることができるので、ぜひ参考にしていただければなと思います。 この記事の対象者 プログラミング初心者の人 分野別におすすめの拡張機能を知りたい人 開発の生産性をより上げたい人 VSCodeを使う人全員向け まずはじめにVSCodeで開発をしている人、全員におすすめをしたい拡張機能を紹介しておきます。 自分自身が使った拡張機能の中で「とりあえず入れて損はない」というものを厳選しています。 それでは紹介していきます。 Japanese La
vscode-drawio/README.md at master · hediet/vscode-drawio
Edit .drawio, .dio, .drawio.svg or .drawio.png files in the Draw.io editor. To create a new diagram, simply create an empty *.drawio, *.drawio.svg or *.drawio.png file and open it. .drawio.svg are valid .svg files that can be embedded in Github readme files! No export needed. .drawio.png are valid .png files! No export needed. You should use .svg though whenever possible - they look much better! T
Vim やめます - Qiita
はじめに この度、長年連れ沿ったVimとお別れをすることにしました。移行先はVSCodeです。 正直に言うと、かなり前からVSCodeへの移行は検討していました。実際過去に何度もVSCodeへの完全移行は試しており、その度に挫折してきていました。 今回は挫折していた理由も含めてお話ししていこうと思います。 なぜ移行しなかったのか まず第一に、Vimをあまり普段使いしていないひとは驚くかもしれませんが、VSCodeに備わっている機能のうち、Vimではまったく出来ていなかったことというのは多くありません。Vimのlanguage serverとの連携は強固であり、定義ジャンプや補完・自動フォーマットといった動作もVSCodeとかわらず実現できます。Vimの中からGit関連の操作をすることも、ファイル操作も、デバッガを動かすことも、スニペット機能もmarkdownのプレビューも出来ていました。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - hediet/vscode-debug-visualizer: An extension for VS Code that visualizes data during debugging.
GitHub - marp-team/marp-vscode: Marp for VS Code: Create slide deck written in Marp Markdown on VS Code