【VSCode】 マルチカーソル、使ってますか？

2024/12/17 172 users マルチカーソル 命名 筆者 変数名 関数名

マルチカーソル機能の使い時 筆者がマルチカーソルを使用したくなる場面を3つ紹介します。 1. 命名を一括変更するとき 変数名や関数名を一括で変更するときに、マルチカーソル機能を使うことで、短時間で変更を行うことができます。 命名を一括変更している様子 検索バーから一括変更する方法もありますが、その場合カー... 続きを読む

Mermaid Graphical Editorを使うとVSCodeでサクサク図が書けるよ

2024/11/23 414 users

Mermaid Graphical Editor VSCodeの拡張機能です。 Mermaid記法を利用してマークダウン内部で作図しながら、Mermaidそれ自体のエディタを立ち上げることができます。 逆にMermaid Editor側で編集した内容もマークダウンにフィードバックされます。 vs Draw.io Integration 類似ツールとしてDraw.io Integrationがありま... 続きを読む

VSCodeをドキュメント作成に活用――テキストエディタ、Markdownエディタの設定と拡張機能を解説

2024/11/08 154 users テキストエディタ Markdownエディタ 用途 拡張機能

本連載では、VSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。VSCodeは、プログラミング以外の用途にも使えます。第10回では、VSCodeをドキュメント作成のためのテキストエディタ... 続きを読む

Cursorで開発効率を爆上げ：VSCode + GitHub Copilotを超える次世代AIコードエディタ

2024/11/06 14 users Cursor chatgpt GitHub Copilot

はじめに 皆さん、こんな経験はありませんか？ コードを書いていて、「これって前にも似たような実装をしたよな…」と悩む ChatGPTで質問するために、いちいちブラウザを開いて切り替えるのが面倒 GitHub Copilotの提案が的外れで、何度も書き直している そんな悩みを解決する、革新的な開発ツール「Cursor」をご紹介しま... 続きを読む

VSCodeの新機能「Copilot Edits」、GitHub Copilotが複数ファイルにわたるコード変更や生成に対応。「ダークモードとライトモードのテーマに対応して」など複雑な指示も可能に

2024/11/05 107 users GitHub Copilot Copilot Edits

VSCodeの新機能「Copilot Edits」、GitHub Copilotが複数ファイルにわたるコード変更や生成に対応。「ダークモードとライトモードのテーマに対応して」など複雑な指示も可能に マイクロソフトはVisual Studio Codeの2024年10月のアップデート版（version 1.95）を公開しました。 本バージョンでは、Copilot Chatセカンダ... 続きを読む

VSCodeでホバー時のTypeScriptの型ヒントをすべて表示する

2024/10/17 11 users TypeScript デフォルト ホバー時 型ヒント 以下

はじめに こんにちは、からころです。 今回は、VSCode でホバー時の TypeScript の型ヒントをすべて表示する方法について書いていこうと思います。 デフォルトの設定では型の情報量が増えると型が省略される VSCode では、TypeScript を利用して開発する際に、ホバーすると以下のように型ヒントを表示することができます... 続きを読む

【Python】VSCodeで関数の引数名を表示する神機能 - Qiita

2024/09/26 31 users Qiita Python 関数 引数名 神機能

結論 引数が多くて、わかりずらかったコードが ↓ このように、引数の名前が表示されることでめちゃくちゃわかりやすくなります！ 設定方法 設定方法は、設定からPython Analysis Inlay Hints: callArgumentNamesをallにするだけ。（画像の一番上の設定です） なお、この設定は、Pylanceという拡張機能のものです（ただし... 続きを読む

VSCodeのGitHub Copilotが色々便利になっていた件

2024/08/16 280 users chatgpt File chat 右クリックメニュー 要約

はじめに 知らない間にGitHub Copilotが結構進化していたので、それらの内容を紹介します。 GitHub Copilot Chatは知っていたのですが、単なるChatGPTみたいな会話機能を追加しただけだと思っていました。 要約 右クリックメニューや#fileのようなコマンドが登場し、それを入力するだけでChatに見てほしいコンテキストを... 続きを読む

AWS CloudShell上でVSCodeを動かすという発明 - Qiita

2024/08/07 13 users Qiita プロキシー 発明 仕組 パブリック

使用するもの VSCode おなじみのIDEです。VSCodeには、サーバーとして起動するオプションが用意されていますので、今回はその仕組を利用します。 pinggy プライベートネットワーク内のポートを一時的にパブリック公開するプロキシーをサービスとして提供しています。無料で利用することも可能です。 手順 AWS CloudShell... 続きを読む

VisualStudioCodeで絶対にしておくべき設定ベスト20

2024/08/02 167 users VisualStudioCode フレームワーク エディタ

Visual Studio Codeで絶対にしておくべき設定ベスト20 はじめに Visual Studio Code（VSCode）は、開発者にとって非常に人気のあるエディタであり、その柔軟性と拡張性から多くのプログラミング言語やフレームワークに対応しています。VSCodeを最大限に活用するためには、適切な設定を行うことが重要です。本記事では、V... 続きを読む

Visual Studio Code の Emmet機能を使ってコードを楽に書こう - Qiita

2024/07/28 100 users Qiita Emmet エンジニア みなさま 学習

エンジニアのみなさま、日々の学習本当にお疲れ様です！ また本記事まで足を運んでいただき本当に感謝です。 約1分程度で読めるので最後まで読んでもらえると幸いです。 はじめに コードを書くのに慣れてくると、いちいちコードを書くのが煩わしくなりませんか？ そんな時 Visual Studio Code（以下、VSCode） の Emmet... 続きを読む

【index.ts】そのVSCodeタブ名、わかりづらくない？【page.tsx】

2024/07/27 157 users TSX Page.tsx index.ts ディレクトリ名

はじめに VSCodeで、index.tsやpage.tsxなど、同名のファイルを複数同時に開いてしまい、わからなくなってしまったことはありませんか？ 実はよく見ると右側にディレクトリ名が表示されているのですが、薄い文字かつ、目線移動のコストが発生するため分かりづらいです。 この記事では、VSCodeの設定を変更することで、フ... 続きを読む

【VSCode】オススメの拡張機能と設定 - Qiita

2024/07/04 296 users Qiita YAML false 拡張機能 設定

{ "editor.formatOnSave": false, "editor.formatOnPaste": false, "editor.formatOnType": false, } この記事で紹介している拡張機能のIDは、記事の最後にまとめています。また、設定の方法については設定のやり方に記述しています。 以下は、この記事で紹介する拡張機能のカテゴリ一覧です。 設定ファイル関連(Yaml, J... 続きを読む

Google I/O 2024で発表されたFirebase Data ConnectをVSCodeのエミュレーターで試してみた

2024/06/29 14 users エミュレーター idx Google I 執筆時点 日本語

Google I/O 2024で発表されたFirebase Data ConnectをVSCodeのエミュレーターで試してみた 執筆時点でIDXを使った記事は見かけるものの、VSCodeを使ってローカルで試している日本語記事は自分はまだ見かけていないので、おそらく日本語では初の記事なんじゃないかと思います。 Firebase Data Connectとは Google I/O 202... 続きを読む

VSCodeで生産性を上げる

2024/06/16 281 users ユーザーフレンドリー エディター パンくず 執筆 拡張機能

はじめに こんなツイートを見て執筆をしようと思いました。 実際に、VSCodeは機能の追加や拡張機能の開発が活発に行われており、かつUIもユーザーフレンドリーであるため人気のエディターだと思います。VSCodeを使いこなせるのとそうでないのではエンジニアリングの生産性に大きな差が出てしまうと思います。 パンくずの... 続きを読む

VSCodeの偽拡張機能を作ったらダウンロードされまくり＆悪意あるコードを簡単に仕込めるVSCode拡張機能システムの欠陥も明らかになったという報告

2024/06/11 37 users 欠陥 マシン 外観 Visual Studio Code 結果

Microsoft製テキストエディタ「Visual Studio Code(VSCode)」は拡張機能を導入することで機能を追加したり外観をカスタムしたりできます。セキュリティ研究者らが「人気拡張機能にコードを挿入した偽拡張機能」を公開した結果、短期間で大企業やセキュリティ企業を含む多くのユーザーのマシンにインストールされたとのこ... 続きを読む

【VSCode】覚えておきたいキーボードショートカット一覧 - Qiita

2024/06/10 24 users Qiita 備忘録 Windows マウス操作 バージョン

00.はじめに そろそろマウス操作から脱却したいなぁ...ということで、Visual Studio Code（以下、VSCode）で個人的に重宝していたり、覚えたいけど中々定着しないキーボードショートカットを備忘録も兼ねて一覧にまとめました。 本記事ではWindowsでのショートカットキーを記載しています。 VSCodeのバージョンによって... 続きを読む

Python + VSCode の環境構築 20240604

2024/06/04 351 users TypeScript Python 速習 無理 ツール

作業メモ。モダン Python 速習。 AI 周りのツールを動かしていたら TypeScript だけでやるには無理が出てきたので、久しぶりに Python の環境構築をする。 具体的には TestGen LLM を動かしたい。 Python はたまに触るけど、基本 2.x 時代の知識しかない。 基本的にこの記事を読みながら、細かいアレンジをしている。 基... 続きを読む

[Playwright]VScodeの拡張機能でらくらくブラウザ操作

2024/05/29 13 users Selenium playwright Python 新卒

はじめに こんにちは。スペースマーケットでWebエンジニアしてます、新卒のdumbled0reです。 4月に入社してから早2ヶ月経って、入社式が昨日のように感じています。時の流れは早い。 日頃、ブラウザ操作する時はPythonのライブラリであるSeleniumを使用していましたが、vscodeにあるPlaywrightの拡張機能を使用すれば非... 続きを読む

VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~ - Qiita

2024/05/02 253 users Qiita 一筆 シーケンス図 VSCode上 フローチャート

VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~初心者umlVSCode新人プログラマ応援mermaid はじめに Mermaid Graphical EditorというVSCodeの拡張機能にとても感動したので一筆書きました こんな方におすすめ シーケンス図/クラス図/フローチャートをサクッと書きたいけ... 続きを読む

Dockerのコンテナイメージを1/10以上軽量化してみた - Qiita

2024/05/17 58 users Qiita Docker Poetry コンテナイメージ 開発

はじめに VSCode + Python + Poetry + Docker(docker-compose)でdev-containerを作成して開発を行っていました。 Dockerを勉強し、イメージの軽量化に関する記事を読んでいると、自分が使っているコンテナイメージのサイズが気になりました。 docker images > REPOSITORY TAG IMAGE ID CREATED SIZE > dev-container lat... 続きを読む

【vscode】TypeScriptで不要なimport文を自動削除＆自動で並べ替え - Qiita

2024/05/09 14 users Qiita TypeScript plu import文 学習

はじめに こんにちは！@nyakako13 です。 少し前からtypescript,reactの学習を進めています。 pythonでの開発時はblack formatterとiSortの拡張機能でimport文の自動並べ替えをしていました。 今回、typescriptの開発でも同じように自動でimport文の整理ができないかな？と思い調べてみました。 eslintやprettierでもplu... 続きを読む

なぜVimmerの僕はマルチカーソルを必要としないか

2024/04/18 114 users Vimmer Neovim マルチカーソル テキストエディタ

はじめに VSCode などのテキストエディタには、マルチカーソルという機能があります。 これは、エディタ上に複数のカーソルを出現させ、一度に複数の場所に同じ操作を行うことができる機能です。 VSCode上でのマルチカーソル 自分はVSCodeをメインとしていた時にはこの機能を多用していたのですが、Neovimに移行してから... 続きを読む

JavaScript/TypeScriptプログラマのIDEは半数以上がVSCode、32％がテストを書かない。JetBrainsによるアンケート調査

2024/03/13 10 users JetBrains TypeScript IDE トレンド

JavaScript/TypeScriptプログラマのIDEは半数以上がVSCode、32％がテストを書かない。JetBrainsによるアンケート調査 Kotlin言語やIntelliJ IDEAなどの開発ツールを開発提供しているJetBrainsは、 JavaScriptとTypeScriptに関する調査結果「2024 年の JavaScript と TypeScript のトレンド: 開発者エコシステムアンケー... 続きを読む

なぜコーディングにVSCodeを使うのか。 私がVSCodeを選んだ理由

2024/03/13 33 users コーディング Webコーディングスクール EMIさん 基礎

この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 コーディングを始めたい、コーディングにVSCodeというものを使うということはわかってるけど、なぜこれを使うんだろう。... 続きを読む