VS Codeの新機能がすごく便利！ ツリービューのスティッキースクロール機能をオンにすると格段に使いやすくなります

2024/02/15 197 users ツリービュー エディタ 格段 おん 新機能

先日アップデートされた、VS Code v1.86で、スティッキースクロールがツリービューでも使用できるようになったので、紹介します。 エディタのスティッキースクロール（紹介記事）ができるようになった時もその便利さに喜び...記事の続きを読む 続きを読む

【VS Code】tasks.jsonで決まった作業を自動化する | DevelopersIO

2023/11/10 243 users Git DevelopersIO デプロイ コーディング 手動

はじめに VS Codeでコーディングをするとき、Gitの操作やビルド、デプロイなど、決まった処理を手動で実行するのが面倒だなと思ったことがあるのではないでしょうか。tasks.jsonというファイルを使えば、そういった面倒な手順を自動化し、開発効率を上げることができます。 この記事でやること この記事では、作業ブラン... 続きを読む

VS Codeをフォーク | AI時代の最強コードエディタCursorの使い方を紹介｜ChatGPT研究所

2023/09/03 181 users ChatGPT研究所 時代 使い方 紹介

初めにCursorというAIファーストのすごいテキストエディタのご紹介です。もちろんChatGPT内蔵です。このエディタは、Visual Studio Code をフォークして作られているため、VSCode からのスムーズな移行ができます。そのため、Github Copilot も併用できます。 できること、基本的な機能や特長AI編集機能Command KはAIと... 続きを読む

Figma for VS Codeを使ってCSS実装する時のおすすめポイント - Goodpatch Tech Blog

2023/09/01 153 users CSS実装 Goodpatch Tech Blog 池澤

Goodpatchエンジニアの池澤です。デザインツール「Figma」のスタイルや値を、テキストエディタ「VS Code」上で閲覧できる「Figma for VS Code」機能拡張が2023年6月よりFigma公式から提供されています。 この記事ではその「Figma for VS Code」について、実際に試して感じたことをまとめてみました。 ※ Figma Dev Modeや... 続きを読む

知識0の状態からたった2時間でVSCodeの拡張機能を作った話 - Qiita

2023/07/10 249 users KEN エディター Qiita vscode 休日

はじめに こんにちはkenです。エディターはVS Codeを使ってます。 突然ですがみなさん、普段開発をしていて 「VS Code にこんな拡張機能、あったらいいのにな〜」 と思うことありませんか？ 私はあります。しょっちゅうあります。 そこで先日、予定がない休日を利用して拡張機能の開発に挑戦してみることにしました。 最... 続きを読む

VBA基礎５：VS CODEでVBAを編集（ariawase）｜KIYO

2023/06/17 207 users VBE VBA GitHub Copilot Excel 編集

１．概要　普段業務効率化のためにExcelのVBAを使用することが多いですが①VBEが使いにくい、②GitHub Copilotを購入しているため有効活用したい　という理由でVS CODEを使用したいと思っております。 下記記事を参考にしながら、VS CODEでもVBAを編集できるようにしたいと思います。 なお別手法もあるため、そちらは別途... 続きを読む

君はVS Codeのデバッグの知られざる機能について知っているか - Qiita

2023/05/09 693 users KEN Qiita デバッグ ＧＷ 公式ドキュメント

はじめに こんにちは、kenです。 GWに「暇だな～～、こんな日はVS Codeの公式ドキュメントを読むか！w」と思って何気なく読んでたらデバッグに関して知らない機能がいくつかあったので、今回はそれをご紹介したいと思います。 おそらく今から紹介する機能はあまり知られてないと思います。もし全部知ってたらVS Code完全... 続きを読む

VS Codeでコードがさらに見やすくなる！ 行の折りたたみをより使いやすくする機能拡張 -Better Folding

2023/04/05 158 users 矢印 箇所 機能拡張 標準機能 コード

VS Codeには標準機能として、行の折りたたみができます。すこし使い勝手が悪かったのであまり使用していなかったのですが、折りたたみをより使いやすくする機能拡張をインストールしてみたら、便利だったので紹介します。 折りたたみ機能は、VS Codeで行エリアをホバーすると折りたたみ可能な箇所に下向きの矢印が表示さ... 続きを読む

VS Codeでコードがさらに見やすくなる！ ネストされたブロックを強調表示するVS Codeの機能拡張「Blockman」

2023/02/27 369 users ネスト CSS ボーダー PHP HTML

HTML, CSS, JavaScript, PHPなどさまざまな言語に対応、コードのネストされたブロックを枠で囲って強調表示するVS Codeの機能拡張を紹介します。 さっそくインストールして使用してみましたが、これは見やすくなりますね！ 枠のボーダーや背景、ネストの深さを自由に変更もできるので、自分が見やすいようにカスタマイズ... 続きを読む

書籍を書きました。 そう、VS Codeで。

2023/02/01 152 users 書籍

TechFeed Experts Night#12 〜 【VSCode, Vim, Emacs】エンジニア向けエディタ最新動向！にて発表した資料です。 https://techfeed.io/events/techfeed-experts-night-12 https://www.youtube.com/watch?v=WQgLRvuB8_o 続きを読む

VS Codeの新機能がすごく便利！ JavaScriptやCSSの関数やクラスなどを上部に固定させる「スティッキー スクロール」

2022/08/08 248 users スティッキー エディタ CSS スクロール 関数

8/5にアップデートされた、VS Code v1.70で「スティッキー スクロール」を使用できるようになったので、紹介します。 JavaScriptやCSSで作業しているときに、関数やクラスなどが自動でスティッキーされ、エディタの上部にくっつきます。行数のある長いコードに便利ですね。 VS Codeの新機能「スティッキー スクロール」 ... 続きを読む

このダークテーマは目に優しく、コードも見やすい！ VS Codeのエレガントなモノクロームのテーマファイル -Sequoia

2022/07/05 171 users 夜空 濃淡 色合い テキスト 背景

ダークテーマは好きだけど、#000のブラックだったり、テキストが派手なカラーだったりすると、目が疲れませんか？ 背景のブラックはほんの少しだけブルーがかった夜空のように落ち着いた色合いで、グレーの濃淡だけのMonochr...記事の続きを読む 続きを読む

サクッとAPIを叩く方法 (VS CodeでHTTPリクエストが送れちゃう拡張機能) - Qiita

2022/06/20 244 users Qiita Postman HTTPリクエスト API 概要

概要 開発中のAPIを試したり、サードパーティのAPIをサクッと叩いてみたいといった時に皆さんどのようにしますか？ 私は、curlコマンドやPostmanをよく使っています。 ただ、もっと楽にHTTPリクエストを投げ、かつその時使用した情報を残すことができる方法を以前のチームメンバーに教えていただいたので、記事にしまし... 続きを読む

VS Codeをなぜ、使い続けているのか？

2022/05/27 237 users 前書き エディタ エンジニア 限界 詳しい

前書き この記事を読んでいるエンジニアの皆さんは、それぞれ異なるエディタを使用しているかと思います。私よりご自身で使用しているエディタについては詳しいと考えているため、他のエディタとの比較をしても、限界があります。また、VS Code と他のエディタを正確に機能や快適さを比較できません。 そこで、私が毎日... 続きを読む

「Visual Studio Code」で執筆するSF作家　藤井太洋氏が作る物書きのための拡張機能

2021/12/20 850 users 物書き 年次カンファレンス SF作家 登壇 藤井太洋氏

「VS Code Meetup」は、強力かつ軽量なオープンソースのコードエディター「Visual Studio Code」のミートアップです。今年もVS Code Meetup 主催の年次カンファレンス、「VS Code Conference Japan 2021」が開催されました。招待講演では、SF作家の藤井太洋氏が登壇。VS Codeで執筆を支援する機能拡張「novel-writer」の... 続きを読む

Macで使うVS CodeとRemote Containerの性能を大幅改善 - Sweet Escape

2021/09/15 157 users Named Volume Sweet Escape Mac

はじめに なぜ遅いのか 何をやるのか 計測 名前付きボリュームを使ってない場合 Named Volumeを使う場合 Macからどう見えているか 結論とまとめ はじめに 以前からいろんなところで話していますが、僕は普段、手元のMacには言語系のランタイムとかは入れておらずVS CodeとDocker for Macだけ入れてRemote Containersの環... 続きを読む

これは便利、VS Codeの設定を変更しよう！v.1.60のアップデートで、ブラケットのカラー化にネイティブ対応 | コリス

2021/09/08 127 users コリス Augu ブラケット ネイティブ 朗報

VS Codeがどんどん便利になっていきますね。 先日のv.1.60のアップデートで、ブラケットのカラー化に対応しました！ VS Codeの設定を変更するだけで、開始と終了のブラケットをセットで同じカラーにします。今までは機能拡張を入れないとできなかったことが、ネイティブ対応したのは朗報です。 Visual Studio Code: Augu... 続きを読む

VS Code の画面を共有するときはキー入力が見える「スクリーンキャストモード」を有効にしてみよう | DevelopersIO

2021/05/29 252 users DevelopersIO 百聞 マウス 一見 キー

VS Code の「スクリーンキャストモード」使ってますか？ スクリーンキャストモードとは 百聞は一見に如かず。 お分かりでしょうか。どのキーを入力したのかが一目瞭然です。マウスもクリック時には赤丸が表示されるのでどこをクリックしたかが分かりやすくなっています。（マウス押下時の黄色はスクリーンキャプチャソフ... 続きを読む

WSL2とDockerとVSCodeのRemote Containersで最高の開発環境をつくる｜はやぶさの技術ノート

2021/05/23 215 users vscode containers はやぶさ Remote

こんにちは。現役エンジニアの”はやぶさ”@Cpp_Learningです。 WSL2 + Docker + VS Code の Remote – Containers のPython開発環境が最高だったので、構築方法と実践チュートリアルを紹介します。 いままでのPython開発環境 WSL + VS Code のPython開発環境については下記で紹介しました。 https://cpp-learning.com/wsl_... 続きを読む

まじか！VS Codeでできることがまた増えた、エディタで画像から背景を1クリックで切り抜けるようになったぞ | コリス

2021/04/16 356 users PNG jpg remove.bg コリス シカ

Visual Studio Codeでついに、画像から背景を切り抜けるようになりました！ remove.bgをVS Codeで利用できる機能拡張がリリースされ、.jpg, .pngの写真画像を1クリックするだけで簡単に背景を切り抜くことができます。エディタとしても高機能なのに、画像編集までできるようになるとは！ VS Codeで、いつものぱくたそ画... 続きを読む

VS Code の使い始めに入れておくと便利な拡張機能 10 選

2021/04/05 578 users 拡張機能 Extension 後々 エンジニア 最初

はじめに この記事では、IT エンジニアである/ないに関係なく、Visual Studio Code (以下、VS Code) をこれから初めて使い始める人が、最初に入れておくと後々便利になるだろうと思われる拡張機能を紹介しています。 拡張機能 (Extension) とは、サードパーティー製の追加機能のようなものであり、誰でも自由に開発・公... 続きを読む

2021年、HTMLやCSSやJavaScriptなどのコードを書く時に便利なVS Codeの機能拡張のまとめ | コリス

2021/03/04 524 users コリス デベロッパー CSS HTML コミュニティ

Visual Studio Code（以下、VS Code）が素晴らしいエディタである理由の一つは、デベロッパーの生産性を向上させるコミュニティによって作成された機能拡張の巨大なライブララリがあることです。 その中から、...記事の続きを読む 続きを読む

ESLint, Prettier, VS Code, npm scripts の設定: 2021春

2021/02/18 252 users eslint Prettier エディタ 重い腰 作業メモ

eslint-plugin-prettier 時代の設定をずっと使っていたので、重い腰を上げてアップデートした作業メモ。 背景 Prettier 公式ドキュメントによれば、現在 eslint-plugin-prettier は以下の問題があるとして推奨していない。 エディタが真っ赤になる（人間が気にする必要のない問題なのに！） 直接実行するより遅い（同様... 続きを読む

WSL2でWeb開発環境の構築メモ (zsh, node, dockerなど)

2020/12/09 385 users Mac WSL2 zsh Windows Terminal

はじめに Web開発といえばUNIXターミナルが使えるMacが便利だったが、ついに今年WSL2が正式リリースされた。これでようやくWindowsでまともなWeb開発環境を構築することが可能になって喜びもひとしお。 それどころか、WSL2, Windows Terminal, VS Codeと便利なツールがどんどんリリースされていてMacよりも便利といえる... 続きを読む

WSL2、Docker、VSCodeで劇的に改善されるWindows開発環境

2020/11/04 657 users Docker Transcript WSL2 WSL 序章

Transcript © SIOS Technology, Inc. All rights Reserved. WSL2、Docker、VS Codeで 劇的に改善される Windows開発環境 武井 宜⾏ サイオステクノロジー株式会社 2020年11⽉4⽇ © SIOS Technology, Inc. All rights Reserved. ⽬次 2 序章︓ Windowsによる開発の歴史 第２章︓WSL1＆2のしくみ 第３章︓ WSL2、Windows T... 続きを読む