vscode の web build を netlify にデプロイする + ファイルシステムを永続化する - mizchi's blog
年末年始の時間を使って実験していたこと。 tl;dr vscode をカスタマイズして静的サイトとしてデプロイしたい。やった。公式にない永続化層も作った。 できた。ここで試せる。 https://mizchi-vscode-playground.netlify.com/ やりたかったこと フロントエンドにまつわるものはフロントエンドで作業を完結したい。なので vscode がブラウザで動いてほしい。 vscode をカスタマイズしたものを各自が自由にデプロイできると、様々な可能性がある。インストールの手間を省いたプログラミング教育用のツールだったり、専用の開発環境だったり、その他諸々。 問題 この用途で期待していた vscode online が使いづらかった。MS のアカウントを要求されたり、Docker コンテナの Enviroment を作ったりする必要があり、面倒だった。そもそもリ
自分が欲しかったから作ったシリーズ 説明しづらいので下記の動画を見たほうが速いです。 Shift を押している間だけオーバレイが有効になり、要素名をクリックすると vscode の該当行に飛びます。 今のところ vite + react のみの対応ですが、仕組み上、あらゆる UI フレームワークに適応可能です。 何が起きているか TypeScript transformer の仕組みで *.tsx の jsx 要素に data-sj-path="vscode://file/..." を付与する TypeScript AST は sourcemap 用の情報を持っている Node の parent を探索し、直近の関数コンポーネント名を探す Shift を押している間、 マウスでホバーされた要素が data-sj-path を持っているならオーバレイを表示 オーバレイ中の要素名をクリックした
最高のマスターデータ管理手法考察 & VSCode Extension を活用した話 / developing masterdata management tool by using vscode extension
GeekGig 『スタディサプリ x Showcase Gig』 〜フロントエンドを楽しむ〜 Links: p.6 [Deep Environment Parity CDNT 2019 - Speaker Deck](https://speakerdeck.com/spring_mt/deep-environment-parity-cdnt-2019) p.13 [GraphQL を利用したアーキテクチャの勘所 / Architecture practices with GraphQL - Speaker Deck](https://speakerdeck.com/qsona/architecture-practices-with-graphql) p.13 [GraphQL と Prisma から考える次のN年を見据えた技術選定 - 森 久太郎 / qsona | JSConf JP](
保守・理解しやすいコードを書きたい！ 〜VSCode拡張機能で循環的複雑度と戦う〜 - Qiita
参考: 循環的複雑度 ちなみに githubで最もやべー関数を発掘するという記事では、循環的複雑度が高い関数が紹介されています。 ものによってはリンク切れしてしまっていますが、最も複雑度が高いのはnode（JavaScript）のjo関数で5505だそうです。想像もつかない... どのようにすれば循環的複雑度を低く抑えられるのか？ 計算方法から考えると、forやifによる分岐を減らしていくことが必要となります。 そのために、分岐の入るロジックを別関数として切り出し、１つの関数でやる事を絞り、分離することを理想として目指していきます。 とはいえ、いちいち複雑度の計算なんてしていられないですね。 そこで役に立つのが次のVSCode拡張機能です。 Code Metrics （VSCode拡張機能） この拡張機能は、TypeScriptやJavaScriptの関数・メソッドに循環的複雑度を表示して
今見ているファイル内をSearchしやすくするVSCode拡張を作りました - $shibayu36->blog;
今見ているファイル内をSearchしやすくする「Search in Current File」というVSCode拡張を作ったので紹介です。 https://github.com/shibayu36/vscode-search-in-current-file https://marketplace.visualstudio.com/items?itemName=shibayu36.search-in-current-file 背景 Emacsにはhelm-occurという拡張があって、インクリメンタルサーチからスムーズにファイル内の検索結果一覧を見れる拡張がある。これが現在のファイルを探索するのに非常に便利で愛用していた。 VSCodeでも同じようなことが出来ないかなと思ったので、勉強がてら拡張を作ることにした。 使い方 Search in Current File - Visual Stu
はじめに Microsoftの提供するVisual Studio Code（VSCode）は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり、利用の領域を拡げられたりすることも大きいでしょう。本連載では、このVSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。 対象読者 テキストエディタメインで開発してきた方 Visual Studioより軽い環境が欲しいと考えている方 Visual Sudio Codeをもっと使いこなしたい方 必要な環境 本記事の内容は、以下の環境で動作を確
こんにちは、CX事業本部の夏目です。 Golangは最近人気の言語で手を出そうとは思っていたのですが、環境構築がいまいちよくわからなくてできてませんでした。 (goenvを使ってGolangをインストールするときGOPATHはどうしたらいいとかよくわからなかったのです) 今日はVisualCodeとDockerを使って、Golangの開発環境をMac上に作成しようと思います。 環境構築 事前準備 VSCodeとDockerをインストールします。 Visual Studio Code - Code Editing. Redefined Docker Desktop for Mac and Windows | Docker Version 2.0以上 拡張機能のインストール VSCodeのExtension "Remote-Containers"を使用して開発環境を作ろうと思います。 Micr
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
Register now for a full day of community, learning, and all things Visual Studio Code vscode.dev(!) October 20, 2021 by Chris Dias, @chrisdias Back in 2019, when the .dev top-level domain opened, we picked up vscode.dev and quickly parked it, pointing at our website code.visualstudio.com (or, if you are from the Boston area like me, we "pahked it"). Like a lot of people who buy a .dev domain, we h
VSCode拡張機能『Infracost』を使って TerraformテンプレートからAWS利用費を試算してみた | DevelopersIO
VSCode拡張機能版Infracostを利用するとTerraformテンプレートを書いているだけで簡易的なAWS利用費の見積もりができます。無料で始められるのでまずはインストールしてみてください。 あしざわです。 皆さんは、これから作成するAWS環境の利用費の見積もり、どうやっていますか？ 最近アップロードされたAWS Dev Day 2023 Tokyoのアーカイブ動画を見ていたところ、『Infracost』というIaCテンプレートベースでAM利用費の見積もりができるツールの存在を知りました。 主にTerraformユーザーの方向けになりますが、誰でも無料で始められ導入も簡単かつ便利なツールなのでぜひ皆さんにも使ってほしいと思いブログを書きました。 まとめ InfracostはTerraformテンプレート(.tfファイル)からインフラコストを試算できるツール 無料のInfracost
I’m kinda shocked. Windows actually got good for web developers. Between VSCode, WSL, and Intel’s latest desktop chips, I’ve been living with a PC for over a week that runs my programming tests faster than an M3 Max, ships with an excellent window manager out-the-box, and generally feels like a completely viable alternative to macOS for working with the web. Hell, not just viable, but better in ma
Webブラウザ版VSCode、WebAssembly版PythonによるWeb上でのPythonコードの実行やデバッグが可能に
Webブラウザ版VSCode、WebAssembly版PythonによるWeb上でのPythonコードの実行やデバッグが可能に マイクロソフトは、WebAssembly版Pythonを用いることにより、Webブラウザ版のVisual Studio Code（以下VSCode）上でPythonコードの実行やデバッグを可能にする実験的な拡張機能「Python for the Web」のプレビュー公開を発表しました。 下記は実際にWebブラウザ版VSCodeに拡張機能「Python for the Web」を組み込み、Pythonコードを実行したときの画面です。 下部の「ターミナル」のペインで、実行結果の「6」が表示されているのが分かると思います。これはこのWebブラウザ上でPythonが実行された結果です。 Webブラウザ上でPython実行環境が自動的に用意される WindowsやMac、L
無料で始めるAmazon CodeWhisperer on VSCode（Github Copilotと同等の性能？） - Qiita
無料で始めるAmazon CodeWhisperer on VSCode（Github Copilotと同等の性能？）AmazoncopilotCodeWhisperer 現在の AIを一言で説明すると・・・ フミコ・フミオさんはTwitterを使っています: 「ほぼ全員がご高齢者の会社上層部からの「対話型AI とは何かその功罪について簡潔に分かりやすく出来たら一言で説明しろ」という難題にヤケクソで「ドラえもんです」と答えたら「便利だけど取扱注意ということだな」とほぼ正解な認識をしてくれたので藤子・F・不二雄先生は偉大すぎる。」 / Twitter Github Copilot と Amazon CodeWhisperer の比較 現時点では Github Copilot の方が使いやすい。 単純な機能だと同じくらいだが、 Github Copilot は、コマンドパレットがあるので、その
初めまして．社内の好きなエディタアンケートで Visual Studio Code (VSCode) に 1 票を投じた R&D チームの久保です．普段は深層学習を用いた画像解析やその周辺の研究開発を行っています． アンケートでは惜しくも Vim 勢に敗れてしまいましたが，2015 年にリリースされてからというもの，ものすごいスピードでユーザを増やしているこの VSCode を使って Rust の開発を行いたい人向けの記事を書いてみました．この記事を読むまで Rust (rls) と CodeLLDB の拡張機能を知らなかったという人がいれば今すぐインストールしましょう．私がこの 11101 文字を使って言いたいのはそれだけです． 「Rust って何？」という方はぜひ以下の過去記事にも目を通してみてください． 必修言語Rustの他己紹介 Rust カテゴリーの記事一覧 - OPTiM TE
導入経緯 当社は受注開発のIT企業である。2023年に長らくお世話になったVimの利用を辞め、VSCodeを使い始めた。 当社の実情 当社のエンジニアは2022年時点で全員がVimを使っていた。当時の案件はメインがRuby on Rails関連であったことも相まって、世に出回る便利なエディタ、IDEに関する情報感度が極めて低かった。 Rails案件ではVimを使うことに対して大きな問題はなかった。補完がある程度効けばバックエンドの実装に支障がないからである。エンジニアとしてそれでいいのかという葛藤は当然あったが、当社のエンジニアは日々の業務をこなすことに集中していた。 (設立当初から積み上げられた歴史としてのvimrc) 転機 ついにその時が来てしまった。 そう、Vue、Typescript案件が唐突に現れたのである。 当社のエンジニアは皆狼狽した。 Vimで培われた爆速タイピングは、es
「Tailscale SSH」が正式版に到達。面倒な鍵管理が不要のSSH、VSCode拡張機能でリモートファイルも編集可能
「Tailscale SSH」が正式版に到達。面倒な鍵管理が不要のSSH、VSCode拡張機能でリモートファイルも編集可能 Tailscale社は、統合的なアイデンティティ管理による鍵管理を不要にした便利なSSHを実現する「Tailscale SSH」が正式版になったことを発表しました。 Tailscale SSH is now out of beta and into general availability! Still juggling SSH keys and managing identities across remote machines? There's a better way: https://t.co/sdvnCckSYg — Tailscale (@Tailscale) March 26, 2024 TailscaleはWireGuardをベースにしたVPN Tai
「GitHub Actions extension for VS Code」パブリックベータ公開。VSCodeからワークフローの実行と監視、管理が可能に
「GitHub Actions extension for VS Code」パブリックベータ公開。VSCodeからワークフローの実行と監視、管理が可能に GitHubは、Visual Studio Codeの拡張機能としてGitHub Actionsによるワークフローの実行や監視、管理を可能にする「GitHub Actions extension for VS Code」のパブリックベータ公開を発表しました。 GitHub Actions extension for VS Codeを使うことで、VSCodeの画面上からGitHubのActionを実行し、ビルドやデプロイなどの状態を監視できるようになります。 問題が発生した場合にはログの参照も可能。
こんにちは、 ast-grepの作者Herringtonです。 正規表現でコードを検索したことがある方なら、複数行のマッチングや入れ子構造の処理、コメントの無視などに苦労したことがあるかもしれません。 そこで、ast-grep VSCodeという新しい拡張を紹介します。これは、構造的検索と置換（SSR）という技術を利用して、より正確で効率的な検索と置換を実現するツールです。 構造検索は？ テキスト検索と置換の限界 例えば、JavaScriptコードをリファクタリングして、lodash の _.filter 関数をネイティブの Array.prototype.filter メソッド に置き換えたいとします。単純なテキスト検索と置換は次のようになります: これは一部のケースではうまくいくかもしれませんが、いくつかの問題があります。 一行の式しかマッチングできません。コードが複数行にまたがってい
1. vscode-icons アイコンがついて見やすくなる。 2. GitLens とにかく強い。 「コミット単位でのファイル比較」や「最新のコミット内容とそのコミッター表示」など色々してくれる。 git blameする手間なくなる。 3. Prettier コードのフォーマットは自動でやりましょう！ 複数人のこだわりをうんたらするよりも、Prettierに委ねるのが楽。 関連のTipsはここ 4. Git History Git logが見やすい 5. Bracket Pair Colorizer カッコの対応を色付きで表示してくれる。 ものすごく読みやすくなって最高&最高！！ なおBeta版ですが、後継となるBracket Pair Colorizer 2も出ています。 6. Settings Sync どこでも同じ設定で使いたい人には便利。 ⇧ + ⌥ + U/D で設定をアップロ
「Dart 2.5」が登場。GitHubのコードから機械学習させた賢いコード補完をVSCodeなどに提供 Dart 2.5では「ML Complete」と呼ばれる、機械学習を用いてより賢いコード補完をさまざまなコードエディタへ提供する機能がプレビュー版として追加されました。 Dartをはじめとする型付き言語では、コードエディタによる補完機能が働きやすいという利点がありますが、それでもAPIの種類が増えるにつれて、多数表示される補完候補のなかから適切なものを選ぶ手間は増えていきます。 ML Completeはそうした状況を改善するために開発が進められていると説明されています。 ML Completeの学習データにはGitHub上のオープンなDartのコードが用いられ、TensorFlow Liteによってプログラマが開発中のコードに対して適切な補完のための候補が選ばれます。 下記のツイートに
主にフロントエンドを開発している、ぼくがかんがえたさいきょうのVSCodeを紹介します。 便利な設定, キーバインド集だけでも参考にしていただけると幸いです。 2023年度版 拡張機能 まずは言語問わず使えるものを紹介していきます。 Japanese Language Pack for Visual Studio Code vscodeを日本語にする。 Path Intellisense ファイル名を autocompletes します。 GitLens — Git supercharged commit単位でのファイル比較、最新のcommit内容表示 REST Client vscode上でgetやpostなどのHTTPリクエストを送信できます。 また、GraphQLにも対応しているみたいです。 Todo+ コメントにToDo: を入れるとToDoを作成することができる。 例外処理を入れ
続：Postman 使ってたけど VSCode の REST Client に乗り換えた - かずきのBlog@hatena
超適当に書いた記事に限ってブクマが伸びる件について。400超えって…。 REST Client って自分の用途的には、非常にシンプルな REST API を Visual Studio Code を使う機会が多い環境で別途ソフトウェアを立ち上げることなくテストできて、しかもテキストファイルに保存しておけるという点がポイント高い感じでした。 blog.okazuki.jp とまぁブクマがたまると何がいいって自分ならこうしてるという意見がたくさん拾える！！ということで気になったものをいくつか試してみたいと思います。 Chrome の Copy as cURL Chrome の開発者ツールの Network タブで Copy as cURL で curl コマンドがクリップボードに貼られるので、それを使うとクッキーとかも継続出来て便利！！ cURL 以外にも色々あるんですね…知らなかった。 とり
以下はjsmanifestによる記事、26 Miraculous VS Code Tools for JavaScript Developers in 2019の日本語訳です。 26 Miraculous VS Code Tools for JavaScript Developers in 2019 Visual Studio Code(一般的にはVScodeと呼ばれる)は、デスクトップ上で動作する軽量で強力なクロスプラットフォームのコードエディタです。 TypeScriptやChrome Debuggerなどの開発ツールがサポートされています。 最初は自分のプロジェクトを構築するためにVScodeを使ったのですが、すぐに惚れ込みました。 VScodeには、誰もが開発することができ、誰もが使用することができる莫大なオープンソースの拡張機能が存在します。 開発に使える便利なツールを探している
第8回は、前回の続きとして、GitHubとの連携機能、連携を強化するGit History、Git Graph、GitLensといった拡張機能を紹介し、GitHub上でワンストロークでオンライン版VSCodeを呼び出せるGitHub Codespacesについても紹介します。 はじめに Microsoftの提供するVisual Studio Code（VSCode）は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり、利用の領域を拡げたりすることも大きいでしょう。本連載では、このVSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで
vscode-rdbg(debug.gem)でのRubyデバッグが便利すぎる - $shibayu36->blog;
最近Rubyを学び直したり、アルゴリズムの基礎練をしたりしているのだが、debug.gemおよびvscode-rdbgが便利すぎるので紹介。 debug.gemやvscode-rdbgとは debug.gem( https://github.com/ruby/debug )とは最近のRubyのモダンなdebugger。これまでlib/debug.rbやbyebug、debaseなどがあったが、それらのいくつかの課題を解決したdebuggerとなっている。Ruby 3.1 の debug.gem を自慢したい - クックパッド開発者ブログ に背景や基本的な使い方が詳しく載っている。 またRubyKaigi 2022のruby/debug - The best investment for your productivity - RubyKaigi 2022でも紹介された。Scriptable
はじめに Microsoftの提供するVisual Studio Code（VSCode）は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり、利用の領域を拡げられたりすることも大きいでしょう。本連載では、このVSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。 対象読者 テキストエディタメインで開発してきた方 Visual Studioより軽い環境が欲しいと考えている方 Visual Sudio Codeをもっと使いこなしたい方 必要な環境 本記事の内容は、以下の環境で動作を確
VSCodeのFindで今マッチしている場所にボーダーを引いて見やすくする - $shibayu36->blog;
VSCodeでFindしている時に、マッチしているwordは背景色が変わって分かるのだけど、今どこにフォーカスしているかが分かりづらかった。これが特に問題が起こるのがReplaceをしようとしている時で、Replaceするたびに今どこ？とマッチ箇所を探していた。これだと時間がかかって困る。 調べてみるとTheme Color | Visual Studio Code Extension APIに書かれているように、自分のsettings.json内で自分用に色を調整し、見やすくカスタマイズ出来ることが分かった。これでFindの現在のマッチ箇所を見やすくしてみる。 Findの色のカスタマイズは editor.findMatchBackground: Color of the current search match. editor.findMatchHighlightBackground:
VSCodeを使ってHTML/CSS/JavaScriptなどを使ったWeb制作、Webコーディングを行っている人も多いのではないでしょうか。 VSCodeは様々な拡張機能が公開されていて、それらを活用するとさらにWeb制作の作業効率が向上したり、使い勝手が良くなったりします。 今回は、Web制作者、WebコーダーにおすすめのVSCode拡張機能をご紹介したいと思います。 VSCodeとは VSCodeとは、Microsoftが提供するテキストエディタ「Visual Studio Code」のことです。つい数年前までは、人によって使っているテキストエディタが違うことも多かったのですが、最近ではVSCodeを使ってコーディングやプログラミングを行っている人がかなり多くなってきました。 VSCodeは、設定や拡張機能の追加など、マウス操作で行うことができ、初めてコーディングやプログラミングをす
概要 Word や Excel でのドキュメント作成を回避し、なるべく生産性高く、かつ、OS 環境依存なく、すべて基本無料で構成できるツールで、Markdown ベースで設計書を作成することを考えてみます。 GitHub 上で閲覧できる形でドキュメントを作成することを前提に、VSCode（＋プラグイン）を用いて、テキスト文書、表（テーブル）、図（構成図など）、キャプチャ、などをスピーディに作成し、PullRequest ベースで運用していけるように、プラグインを構成および、レギュレーションを作成してみました。 GitHub の README.md や Wiki に書いて使えるかと思いますので、併せて markdown 形式および、vscode のプラグイン推奨設定ファイル形式でも載せておきます。 もし、もっとこのプラグインを使うと良い、などアイデアなどありましたら教えていただけると幸いです
はじめに こんにちは、今年の6月にエニグモに入社したサーバーサイドエンジニアの橋本です。 この記事は Enigmo Advent Calendar 2020 の6日目の記事です。 みなさんはテキストエディタは何を使っていますか？ 会社を見渡すとVimが一番多いような気がしますが、私はVSCodeを使ってます。 正直、エニグモ に入社するまではツールを入れる程度でそこまでカスタマイズしていなかったのですが、入社してからは諸先輩方の開発スピードに圧倒され、これはツールやショートカットキーを駆使して速く開発できるようにならなければ、、、という必要性に駆られ、少しずつカスタマイズを加えてきました。 この記事では初期設定でも使える便利機能やカスタマイズを加えてよかったショートカットキーやツールをピックアップして紹介していきたいと思います。 ショートカットキー まずは使ってよかったショートカットキーに
VSCodeの拡張開発に入門してみました
こんにちは。GMOアドマーケティングのK.Mです。 最近めっきりVSCode上で過ごすことが多くなりました。 というわけで、今回はVSCodeの拡張の作り方について調べてみました。 もともと便利な拡張がたくさんあるVSCodeですが、自分の作業に特化したかゆいところに手が届くものを自作できるようになることのメリットも大きそうです。 手始めに、エディタの拡張と考えると良い題材かと思われる選択範囲の文字列を見やすく整形して置き換える機能を作成してみたいと思います。 Beautify系の拡張はたくさんありますが、プロジェクト特化なログ文字列とかをサクッと整形したいようなケースで役に立つことを想定します。 プロジェクト準備 ジェネレーターが用意されているため、それを使ってプロジェクトの雛形を生成します。
環境構築 以下の手順で構築していきます． Overleaf-Workshopの拡張機能をVScodeに入れる Latex-Workshopの拡張機能をVSCodeに入れる Latex-Workshopの設定を変更 texliveをインストール +α Grammarlyの拡張機能をVSCodeに入れる Grammarlyの設定を変更 1, 3, 5はVSCodeの拡張機能で検索すれば一瞬で出てくるのでスキップ． Latex-Workshopの設定を変更 Latex-Workshopの設定を変更します．以下を設定から変えましょう．cmd+,で設定のタブが開けると思います． Latex-workshop › Latex › Recipe: Default - first + lastUsed onSaveでtexソースをビルドするときに、デフォルト設定のfirstのままだとpdflatexのビル
背景 AWSのEC2にSSH接続する際、EC2のSSHキー(pemファイル)を使用して接続することが多ですが、SSHキーの管理が面倒だったり、セキュリティ的にもSSHキーを使用するのは避けたい場合があります。 この記事ではOS別、IDE別にSSHキーを使用せずにEC2に接続する方法を紹介します。 前提条件 Session Managerが有効化されているEC2インスタンスがあること OpenSSHがインストールされていること OpenSSHのインストール方法: Windows: Get-WindowsCapability -Online | Where-Object Name -like 'OpenSSH*' 管理者権限でPowerShellを起動することが必要です。詳細はこちら Mac/Linux: brew install openssh 事前準備 - Remote拡張機能のセットアッ
VSCodeでC#開発環境を充実させる「C# Dev Kit」正式リリース、ソリューションエクスプローラーやIntelliCodeなど提供
VSCodeでC#開発環境を充実させる「C# Dev Kit」正式リリース、ソリューションエクスプローラーやIntelliCodeなど提供 C# Dev Kitは以下のような機能を主に提供します。 ソリューションエクスプローラビュー VSCodeの既存のワークスペースのビューと連動するソリューションエクスプローラビューを追加することで、プロジェクトの一元管理が容易になります。テンプレートを介して新しいプロジェクトやファイルをソリューションにすばやく追加できるようになり、ソリューションのすべてまたは一部を簡単にビルドすることもできます。 IntelliSense、シンタックスハイライト オープンソースのLSP（Language Server Protocol）ホストを搭載しており、IntelliSenseやシンタックスハイライト、リファクタリング、コードフォーマットなどの機能を提供します。
はじめに Git Graphという拡張機能を使います。 Git GraphとGitLensという拡張機能を使います。[1] また、gitから開かれるエディタをvscodeにしておきます。 コミットのまとめかた（1分未満でできるよ） ステータスバーのGit Graphのボタンをクリックして、Git Graphの画面を開きます。 まとめたいコミットの一つ前のコミット（今回だとinit）を右クリックして、「Rebase current branch on this Commit...」を選択します。 「Launch Interactive Rebase in new Terminal」にチェックを入れて「Yes, rebase」をクリックします。 こんな画面が開きます。 まとめたいコミットを上から順にpickからsquashに変更します。最後の一つはpickのままにしておきます。そして「STAR
VSCodeで長いコードや入り組んだコードを読んでいくときに、さっき読んでたあれはどこに行ったっけ、となって困っていた。ファイル名を手元のテキストファイルにメモしたりしていたけど、ところでさきほどのメモのタブはどこにいったのか…と混乱していた。 エディタ内にブックマークを作れる拡張があるに違いない、と探したらBookmarksという拡張があった。 その名の通りで、行に対してブックマークを追加できる。サイドバーのBookmarksタブからブックマーク一覧を参照できる。 ここのテストは後で直しそうだな、と思ったらとりあえずブックマークしておく、みたいに使えて便利。 marketplace.visualstudio.com 追記 コメントで偽物の拡張があると教えてもらった。たしかにインストール数が100くらいの同名の拡張がありました。どのような挙動をするかは分かっていません。GitHubのリポジ
先日、VPS上にVSCode Serverをインストールしようとしたところ動かなくなっており、詳細を調べているうちにこのスレッドにたどり着きました。 ここをみると、どうもVSCode Serverの機能はRemote Extensionに統合されたので、もはや提供されなくなったようです。（setup.shでダウンロード可能なバイナリが無くなっている） じゃあどうすればいいのか？ サーバ上でVSCodeを動かして、ブラウザでエディタを立ち上げたい、iPadで開発したいという皆さんは、引き続きVSCode本体で簡単に実現することができます。 サーバ上に普通のVSCodeをインストールして、code tunnelと打ち込むだけで、github.devのドメインでトンネルがホストされてブラウザ上でもローカルのVSCodeとも接続可能な状態になります。 daemon化して常時起動したい それも簡単で
VSCode拡張機能 Draw.io Integration導入方法 先人の方がまとめて下さってます。⇒ VSCodeでDraw.ioが使えるようになったらしい！ Draw.ioでsvg形式のファイルを作成する 拡張子を.drawio.svgまたは.dio.svgにしてファイル作成すると、Draw.ioに関連付けられ、svg形式のファイルを作画＆作成できます。 mdファイルにsvgを埋め込む mdファイルに以下のように作成した画像（.drawio.svg)を埋め込むことができます。 マークダウン構文またはimgタグで記述します。 mdファイルの編集画面からDraw.io画面を開ければ... マークダウン構文で記載した場合、画像ファイルを cmd + クリック で開くことはできますが... 残念ながら、テキストエディタが開いてsvgのソースが表示されます。 Draw.i
VSCodeがドローツールになるDraw.io Integrationがいい感じ！macOSでのワークアラウンドを紹介
Draw.ioというオンラインのドローツールがIDEのVisual Studio Code（VSCode）上で使えるようになったという報せを聞き及び、使ってみました。 具体的にはDraw.io IntegrationというExtensionがリリースされ、それをインストールするとDraw.ioがVisual Studio Code（VSCode）上で使えるようになります。 筆者は専らmacOSを使っていますので、macOS用のVisual Studio Code（VSCode）にDraw.io Integrationをインストールして使ってみたところ、Draw.io Integrationに関連づけられる.drawio、.dioといった拡張子のファイルを作成してもDraw.io Integrationが起動してこない。 ひょっとして機種依存の問題かとWindows版のVisual Stud
今年は文章校正の環境を整えられなかったことが大きな課題でした。いままで、秀丸のハイライト……はMacに乗り換えたのでお別れしたり、miを使って表記ルールを入れ込む……は用語統一を登録するので精一杯で実用的にはならなかったりといった具合で、なかなか「これ！」という校正・校閲環境に持って行けていませんでした。 そんなとき見つけたのがtextlintというもの。ATOKのような文章チェックをしてくれるものとイメージしてもらえたらよいかなと思います。 Markdown などのテキストファイルを特定のルールにしたがってチェックするツールです。 ルールは作者の azu さんを始め、多くのルールが公開されています。 （textlintとVSCodeで始める文章校正） で、textlintはVSCodeというエディタで動かせます。VSCode（Visual Studio Code）は、マイクロソフトが提供
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React で展開された HTML 要素から vscode の生成元コードに飛ぶ 方法
VSCodeをプログラミングエディタとして強化しよう！ 便利な設定や拡張機能を紹介
VSCodeとDockerでMacにGolangの開発環境を作成する | DevelopersIO
VSCodeにFigmaを組み込む「Figma for VS Code」登場。コードの自動補完にも対応
vscode.dev Visual Studio Code for the Web
VSCode + WSL makes Windows awesome for web development
Rust IDE に化ける VSCode - OPTiM TECH BLOG
Vim から VSCode に移行して分かったたった１つの真実
ast-grep VSCode: 構造検索と置換の強力なツール
VSCodeのオススメ拡張機能 24選 (とTipsを少し)
「Dart 2.5」が登場。GitHubのコードから機械学習させた賢いコード補完をVSCodeなどに提供
VSCode のおすすめ拡張機能と便利な設定、キーバインド集 2022
JavaScript開発者のための優秀なVSCodeツール26選 - Qiita
VSCodeのGit連携をさらに便利に！ 拡張機能Git History、Git Graph、GitLensを解説
VSCodeのソース管理をはじめよう！ Gitの連携機能について解説
Web制作者必見！VSCodeのおすすめ拡張機能15個まとめ | Web Design Trends
GitHub+VSCodeでのMarkdownドキュメンテーションのプロジェクトルールを考える
半年間使って便利だったVSCodeの機能紹介 - エニグモ開発者ブログ
Overleaf+VSCode+GitHub+etcな執筆環境を整える
SSHキーを使わずにVSCode/Jetbrains系IDEからEC2に接続する方法
VSCodeでGitのコミットを楽に整理して、レビュワーに「コイツできる」と思わせよう。
VSCode ExtensionのBookmarksが便利 - hitode909の日記
VSCode Serverがなくなって本体に統合されていた - Qiita
VSCode上のマークダウン とDraw.ioでドキュメントを作成する - Qiita
非エンジニアが文章校正のためにVSCodeとtextlintを導入するまでの記録