知識0の状態からたった2時間でVSCodeの拡張機能を作った話 - Qiita
はじめに こんにちはkenです。エディターはVS Codeを使ってます。 突然ですがみなさん、普段開発をしていて 「VS Code にこんな拡張機能、あったらいいのにな〜」 と思うことありませんか？ 私はあります。しょっちゅうあります。 そこで先日、予定がない休日を利用して拡張機能の開発に挑戦してみることにしました。 最初は拡張機能の開発をどのように進めていけばよいのか全くわからず、そもそも拡張機能でどこまでのことを実現できるのかすらわかりませんでした。ましてや実装についての知識なんて皆無です。 「これは完成まで1日くらい、いや下手すると3日くらいかかるかな」と考えていたのですが、いざやってみるとたった2時間で作れてしまったので今回はその経験についてお話ししたいと思います。 この記事を読んで、 「こんなにお手軽なら自分にも作れそうだ！」 と感じてくれたら幸いです。 本題 作りたかったものと
VSCodeで最強のMarkdownノートエディタを作ろう
昨日の自分「今作ってる曲まじで良すぎる。天才かもしれん」 今日の自分「ﾅﾆｺﾚ。曲作り下手すぎか～～」 この記事は新歓ブログリレー23日目の記事です。 こんにちは、カシワデと言います。サウンド班に所属していてパソコンで音楽を作っています。 皆さん、DTMってしってますか？ DTMとはDeskTop Musicという和製英語の略で、パソコンで音楽を作ることを広く指します。パソコンで音楽を作ると言っても昨今の曲は大体パソコンを用いて作られているので、DTMというと特に"打ち込み"のニュアンスが出るような気がします。 でも、『パソコンで音楽を作る～』とか『打ち込み』っ… 🎉入学おめでとう🎉まずは新入生の皆さん、ご入学おめでとうございます！！！これから始まる大学生活は非常に短いですし、世間で言われる程時間に余裕があるわけでは無いので、後悔の無い充実した生活を送ってください！
VSCode から Neovim に挫折せず移行する - freee Developers Hub
freee Developers Advent Calendar 2022 １日目の記事です！ ついに今年も始まりました freee Developers Advent Calendar、一日目は会計チームの hachi (@hachiblog) からお送りします。 エディタはソフトウェアエンジニアにとって毎日使う道具です。あなたはどんなエディタを使っていますか？そのエディタに満足していますか？ 自分は３年ぐらい VSCode を使っていて大方満足はしていたのですが、細かいところで不満が出てきていました。 そのため思い切って Neovim にエディタを移行しました。 移行して、超快適！という状態ではまだないのですが、VSCode と同等ぐらいまでには使いこなせるようになりました。 自分は今まで何度か VSCode から Vim/Neovim に移行しようとして何度か挫折していて今回始めて成
Markdown（マークダウン）をVSCodeの拡張機能とスニペットで効率良く書く - Qiita
Markdownをはやく効率よく書くために 前提として、マークダウンを編集するエディタはVSCodeを使います。 Markdownファイルを使って記事を管理している場合、マークダウンを効率良く書けるかどうかは生産性に直結します。 VSCodeの拡張機能と基本設定（スニペット）を使ってマークダウンを速やかに編集する方法について書いていきます。 よく使う機能にフォーカスしてその操作をイメージできる一般的なショートカットキーを使う（覚える）のがポイントです。 拡張機能があるならそれを使う Markdown All in One ショートカットや便利なコマンドが有効になる拡張機能です。たくさんの機能がありますが、利用頻度が高いものだけ使います。 太字にするショートカット テキストを選択した状態で、Macなら ⌘ + B 、Windowsなら Ctrl + B で太字になります。多くのエディタで採用
React で展開された HTML 要素から vscode の生成元コードに飛ぶ 方法
自分が欲しかったから作ったシリーズ 説明しづらいので下記の動画を見たほうが速いです。 Shift を押している間だけオーバレイが有効になり、要素名をクリックすると vscode の該当行に飛びます。 今のところ vite + react のみの対応ですが、仕組み上、あらゆる UI フレームワークに適応可能です。 何が起きているか TypeScript transformer の仕組みで *.tsx の jsx 要素に data-sj-path="vscode://file/..." を付与する TypeScript AST は sourcemap 用の情報を持っている Node の parent を探索し、直近の関数コンポーネント名を探す Shift を押している間、 マウスでホバーされた要素が data-sj-path を持っているならオーバレイを表示 オーバレイ中の要素名をクリックした
VSCodeでDraw.ioが使えるようになったらしい！ - Qiita
追記 versionによっては設定を変えないとエクスポートができないようです。 エクスポートできない方はこちらの記事をご参考に設定いただくとエクスポートできるかもしれません。 現状バージョン0.4ではこちらの設定が必要となります。 VSCodeでDraw.io Integration使用時にエクスポートできないことがある問題への対処 2020/10/18追記 現在のバージョン0.7ではdrawio拡張子のエクスポートがうまくいかないようです。 その場合はオフラインモードに移行変更していただくか、drawio.pngやdrawio.svg拡張子でファイルを作成してもらうことで直接編集もできた上で、エクスポートとせず末尾の拡張子ファイルとして利用することができます。 はじめに VSCodeで簡単にDraw.ioで描画できるようになったみたいなので、 導入方法と使い方を備忘として残していきます。
「Docker for Visual Studio Code」が正式版に、Visual Studio Codeの拡張機能。WSL 2環境のDockerコンテナに対応
マイクロソフトは、Visual Studio Codeに対応したDocker拡張機能である「Docker for Visual Studio Code」がバージョン1.0となり正式版に到達したことを明らかにしました。 Docker for Visual Studio Codeを利用することで、Visual Studio Codeの画面からDockerコンテナイメージのビルド、コンテナ内アプリケーションのデバッグ、Dockerコンテナに対するスタート、ストップ、インスペクト、リムーブなどのアクションの実行が容易になります。 バージョン1.0ではPythonで書かれたコードに対するデバッグ機能を強化。DjangoとFlaskフレームワークにも対応します。DjangoやFlaskを利用する際のDockerファイルを作成するためのScaffoldにも対応。 複数のコンテナを選択し、まとめてスタート
VSCodeのマルチカーソル練習帳 - Qiita
VSCodeを使いこなしている人がカーソルを複数置いて手早く作業してて、カッコいいなと思ったことありませんか？こんな感じで。 私はマルチカーソル使います(キャー素敵！)。冗談はさておき、VSCode使ってる人全員がマルチカーソル使ってるわけではなさそうだと最近知ったので、基本をまとめてみました。 なお記事では、以下のテキストをサンプルとして使用しています。お手元にVSCodeを用意できる方は、サンプルを使って同じ操作を試しながら覚えてみてください！ { "id" : "12345678-1234-1234-1234-123456789012", "title" : "myTitle", "content" : "myContent", "createdAt" : "2019-09-01 00:00:00", "createdUser" : "12345678-1234-1234-1234-
Visual Studio CodeのJava環境が強化。Call Hierarchyで呼び出し元を次々にドリルダウン、変数が特定の値になると自動停止するデバッガ新機能など
Visual Studio CodeのJava環境が強化。Call Hierarchyで呼び出し元を次々にドリルダウン、変数が特定の値になると自動停止するデバッガ新機能など マイクロソフトが開発している無償のコードエディタ「Visual Studio Code」におけるJava開発環境の機能強化が発表されました。 Happy New Year and welcome back to our first update of #Java on VS @code in 2020! “Call Hierarchy” and compact folder view will help Java developers a lot. Debugger and Test Runner updates along with performance improvements are also worth ch
vscode の web build を netlify にデプロイする + ファイルシステムを永続化する - mizchi's blog
年末年始の時間を使って実験していたこと。 tl;dr vscode をカスタマイズして静的サイトとしてデプロイしたい。やった。公式にない永続化層も作った。 できた。ここで試せる。 https://mizchi-vscode-playground.netlify.com/ やりたかったこと フロントエンドにまつわるものはフロントエンドで作業を完結したい。なので vscode がブラウザで動いてほしい。 vscode をカスタマイズしたものを各自が自由にデプロイできると、様々な可能性がある。インストールの手間を省いたプログラミング教育用のツールだったり、専用の開発環境だったり、その他諸々。 問題 この用途で期待していた vscode online が使いづらかった。MS のアカウントを要求されたり、Docker コンテナの Enviroment を作ったりする必要があり、面倒だった。そもそもリ
【2020年1月】令和だし本格的にVSCodeのRemote Containerで、爆速の"開発コンテナ"始めよう - Qiita
【2020年1月】令和だし本格的にVSCodeのRemote Containerで、爆速の"開発コンテナ"始めようJavaPythonPHPJavaScriptGo VSCode の Remote Conainer で"開発環境+プロジェクト全部入りのコンテナ"からスタートダッシュをキメるッ！？ 開発でVS Code の Remote Conainer使っていますか？単に既存のコンテナに入るだけなら Remote SSH でも構いませんが、"ローカル開発環境の一部"として、いやむしろローカルの開発環境＝Remote Containerとして、ビンビンにRemote Container使っていきましょう。令和だし！(すでに２年だけどね・・・？) 特にMacを使っていると最初からPythonやらPHPやらRubyやらが入ってしまっているので開発環境があるのですが、これらは割とmacOSのエコシ
VS Code ネタ詰め合わせ - Qiita
👻 ぷぇ 🍾🍾🍾 メリークリスマス！！！ 🎉🎉🎉 今年も残り僅かですが、皆様の今年の進捗はどうだったでしょうか？ 進捗ダメでしたか？ 私はと言うと今年も幸い GitHub で evergreen を達成できそうです。( 業務でこの GitHub アカウントは使用していないので、個人での Contributions のみです。 ) Visual Studio Code Advent Calendar 2019 の最後の記事ともなりますし、普段、特に Qiita ではあんまり記事を書かないのもあるので、 VS Code に関するいろいろなネタの詰め合わせをお送りします。 自分的に VS Code の二大拡張 ※ステマ注意 VS Code Tips 来年(2020年)の VS Code 余談: アイコン騒動、再び！！ 自分的に VS Code の二大拡張 ※ステマ注意 「もしも V
VSCodeのガントチャート拡張を作った - No Regrets in Bathing
去年に引き続きクリスマスイブになんか作ったシリーズです。 下記のような感じで、ガントチャートを雑に作れるVSCodeの拡張機能を作りました。 テキストを編集してもいいし、プレビューを操作してもいいというのがこのツールの売りです。 変更内容は相互に同期します。 VSCodeなので、当然ながらコピペやマルチカーソル、置換なんかも普通に使えます。 VSCodeの編集機能で、GUI部分の貧弱さを補おうというコンセプトです。 実用性や自由度は低めですが、文法や操作方法を覚える必要も最低限になっているんじゃないかなと思います。 あと、ただのテキストなんで、Git管理もできますね。 ２週間程度の短期予定を立てる用途を想定しています（自分はその程度の予定しか立てません）。 要望に答える可能性は低いですが、プルリクを頂ければ割と軽率にマージすると思います。 かんたんな導入方法 まずVSCodeを開き、おもむ
2年半VSCodeを使ってきて意外と知らなかったこと
VS Code Meetup #1（https://vscode.connpass.com/event/155068/ ）での発表資料です。
2023年時点で僕のVSCode(Visual Studio Code）に入ってるプラグインや設定を紹介します - Shibajuku
こんにちは、実は久しぶりの投稿の、どうもしばおです。 さて、僕(フロントエンドよりのWebデザイナー)は普段からメインのテキストエディターにVSCodeを使っているのですが、今日は僕のVSCodeに入っている、プラグインや設定を公開したいと思います。 （2023年7月3日更新） 僕のオンラインサロンでも、VSCodeを結構使ってて、サロンメンバーには、僕が使ってるおすすめのプラグインや、僕なりの最強設定を共有しています。 そもそも、VSCode（Visual Studio Code）って？ VSCode（Visual Studio Code）はMicrosoft社が開発したオープンソースのテキストエディタです。 最近様々な高機能テキストエディタが登場していますが、その中でもこのVS Codeはかなり便利な機能がデフォルトで付いていて、かつ軽量なので、インストールするだけでも結構使えます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VSCodeの便利なショートカットが、短時間で身につく魔法のチートシート -VSCheatsheet
「Visual Studio Code API」を現役エンジニアから学ぶ！ 拡張機能開発の入門書が発売／シンタックスハイライトやスニペット作成の壁を経験をもとに解説【Book Watch/ニュース】
3日間限定「Visual Studio Code完全入門」が全文無料公開されています！ Web制作とプログラミングに特化された解説書
『Visual Studio Code完全入門』重版出来記念、全文無料公開キャンペーン - インプレスブックス
GitHub - hediet/vscode-drawio: This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.
