タグ vscode
人気順 10 users 50 users 100 users 500 users 1000 usersなぜVimmerの僕はマルチカーソルを必要としないか
はじめに VSCode などのテキストエディタには、マルチカーソルという機能があります。 これは、エディタ上に複数のカーソルを出現させ、一度に複数の場所に同じ操作を行うことができる機能です。 VSCode上でのマルチカーソル 自分はVSCodeをメインとしていた時にはこの機能を多用していたのですが、Neovimに移行してから... 続きを読む
JavaScript/TypeScriptプログラマのIDEは半数以上がVSCode、32%がテストを書かない。JetBrainsによるアンケート調査
JavaScript/TypeScriptプログラマのIDEは半数以上がVSCode、32%がテストを書かない。JetBrainsによるアンケート調査 Kotlin言語やIntelliJ IDEAなどの開発ツールを開発提供しているJetBrainsは、 JavaScriptとTypeScriptに関する調査結果「2024 年の JavaScript と TypeScript のトレンド: 開発者エコシステムアンケー... 続きを読む
なぜコーディングにVSCodeを使うのか。 私がVSCodeを選んだ理由
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 コーディングを始めたい、コーディングにVSCodeというものを使うということはわかってるけど、なぜこれを使うんだろう。... 続きを読む
VSCodeで日本語の音声入力が可能に、Copilotがコードに合った変数名を提案など新機能。2024年2月のアップデート
VSCodeで日本語の音声入力が可能に、Copilotがコードに合った変数名を提案など新機能。2024年2月のアップデート コードエディタのVisual Studio Code(以下、VSCode)は2024年2月のアップデートで、音声入力やCopilotによる変数名の提案などの新機能が追加されました。 More developer goodness in the February update ... 続きを読む
ast-grep VSCode: 構造検索と置換の強力なツール
こんにちは、 ast-grepの作者Herringtonです。 正規表現でコードを検索したことがある方なら、複数行のマッチングや入れ子構造の処理、コメントの無視などに苦労したことがあるかもしれません。 そこで、ast-grep VSCodeという新しい拡張を紹介します。これは、構造的検索と置換(SSR)という技術を利用して、より正確で... 続きを読む
VSCode + WSL makes Windows awesome for web development
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 c... 続きを読む
Web版VSCodeがDockerコンテナをWASM環境で起動、Webブラウザ内ローカルマシンとして利用可能に。拡張機能「vscode-container-wasm」登場
Web版VSCodeがDockerコンテナをWASM環境で起動、Webブラウザ内ローカルマシンとして利用可能に。拡張機能「vscode-container-wasm」登場 WindowsやMacなどのデスクトップPCでVisual Studio Code(以下VSCode)を利用して開発をする場合、同じローカルマシン上でDockerコンテナのLinux環境を起動し、VSCodeのターミナルで... 続きを読む
Code Tour を使ってじっくり確実にコードを読む
日々のタスクに忙殺されていると、ついつい既存コードを流し読みして、ざっと動くコードを書いてしまいたくなります。 一発でうまく動けば短期的にはいいのですが、長期的にはコードの理解が追いつかなったり、一発でうまく動かなかった場合にかえって時間がかかってしまいます。 VSCode の拡張機能である Code Tour を... 続きを読む
VSCodeへ「Hey Code!」と呼びかけ、Copilot Chatが起動する新機能。2024年1月のアップデート
VSCodeへ「Hey Code!」と呼びかけ、Copilot Chatが起動する新機能。2024年1月のアップデート コードエディタのVisual Studio Code(以下、VSCode)は2024年1月のアップデートで、「Hey Code!」と音声で呼びかけると、Copilot Chatが起動する新機能が追加されたことが明らかになりました。 The January release of @code ... 続きを読む
VSCode のターミナル内で画像を表示できるようになったので試してみた
VSCode の更新情報で Preview features に「Images in the terminal」という項目がありました。 There is now experimental support for images in the terminal. Images in a terminal typically work by encoding the image pixel data as text, which is written to the terminal via a special escape sequence. The... 続きを読む
2023年、Web制作・デザインに役立つ記事の総まとめ
2023年、当サイトで公開した記事の中からPocketにたくさん保存された記事やXにポストされた記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。 Web制作全般 UI/UX関連 デザインのテクニック・インスピレーション Photoshop, XD, Figma, VSCodeなどツール フォント・タイポグラ... 続きを読む
VSCodeでプロジェクトを開くとき、ついでにいろいろやる方法
この記事は GMOアドマーケティング Advent Calendar 2023 16日目の記事です。 こんにちは。GMOアドマーケティングのK.Mです。 VSCodeでプロジェクト(ワークスペース)を開くとき、その開発をするために必要となるいろんなこと(サーバー起動やらログtailやらブランチ整備やら…)をついでに自動でやれたら良いなと思いま... 続きを読む
GitHub Copilotが便利になったのでターミナルもVSCodeで良いのでは?という話 - Qiita
この記事はラクスアドベントカレンダー2の17日目です。 先日のVSCodeのアップデートで、GitHub Copilotを使うとターミナル操作が便利になりました。 これにより、別途ターミナルのアプリを使わずにすべてVSCode上で操作した方が便利なのでは?となりました。 アップデート前までどうしてたか MacのiTerm2上で、GitHub Co... 続きを読む
Google、AIによるコード補完やコード生成を実現する「Duet AI for Developers」正式リリース。数週間以内にGeminiを採用へ
Googleは、AIによるコード補完やコード生成などを実現する新サービス「Duet AI for Developers」の正式リリースを発表しました。 Duet for Developersは有償で提供されるサービスですが、2024年2月1日まで無償で提供すると説明しています。 20以上の言語をサポート、VSCodeなどで利用可能 Duet AI for DevelopersはVisua... 続きを読む
VSCodeのGit連携をさらに便利に! 拡張機能Git History、Git Graph、GitLensを解説
GitHub Codespaces 最後に、GitHub Codespacesを紹介します。GitHub Codespacesは、GitHubが提供する開発環境です。Webブラウザ、VSCode、JetBrains IDE、GitHub CLIから利用できます。特にWebブラウザから利用すると、場所やデバイスを選ばずにリポジトリでの編集作業を全て完結できるので非常に便利です。Codespacesは... 続きを読む
Amazon QをVSCodeでつかってみた - NRIネットコムBlog
はじめに Amazon Qとは VSCodeでAmazon QにChatする セットアップ 質問してみる 余談:Chatでエラー発生 Javaコードのバージョンアップ(未検証) まとめ はじめに こんにちは、高橋です。 先日AWS re:Invent2023に行ってきました。 Keynoteで発表されたAmazon Qについて、VSCodeで使ってみた感想を簡単にまとめようと思... 続きを読む
VSCodeのGit連携をさらに便利に! 拡張機能Git History、Git Graph、GitLensを解説
第8回は、前回の続きとして、GitHubとの連携機能、連携を強化するGit History、Git Graph、GitLensといった拡張機能を紹介し、GitHub上でワンストロークでオンライン版VSCodeを呼び出せるGitHub Codespacesについても紹介します。 はじめに Microsoftの提供するVisual Studio Code(VSCode)は、2015年の最初のリリース... 続きを読む
VScodeだけでGit操作を完結させるのだ~~ッ!!
VScodeだけでGit操作を完結させる方法について書くのだ。 👀その前に! この記事は、以下の2つの拡張機能がインストールされている前提で進めるのだ。 Git Graph - Visual Studio Marketplace GitLens — Git supercharged - Visual Studio Marketplace インストールしておいてほしいのだ。 ✅ステージング(git add ◯) ... 続きを読む
VSCode のおすすめ拡張機能 2023年度版
株式会社ゆめみの 23 卒 Advent Calendar 2023の4日目の内容です。 2022年のはじめに自分の開発環境を紹介する記事を投稿したのですが、思いのほか読んでいただいているので2023年度版を作成しました。 今回は拡張機能編です。キーバインドなどは後日公開します。 今年1年間で JetBrains 製品や、neovim を使ってみたり... 続きを読む
【VScode今までありがとう】新時代のコードエディタ、Cursorのメリット・できることを網羅的に解説した
上記のようにコードエディタを開くコマンドを分けるために、既にcodeコマンドをVScodeで使っている方はcursorダウンロードの際にcursorコマンドのみインストールするようにしてください。codeの方もインストールすると、codeコマンドでVScodeとCursorどちらも開いてしまうようです。 Cursor主要機能紹介 cmd + Shift + L... 続きを読む
VSCodeのソース管理をはじめよう! Gitの連携機能について解説
はじめに Microsoftの提供するVisual Studio Code(VSCode)は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり、利用の領域... 続きを読む
VSCodeの拡張機能【Gist】が便利すぎて開発効率がかなり上がった話 - Qiita
はじめに 突然ですが、よく使うコードはどのように管理していますか? 私はGitHubで管理していたのですが、今回VSCodeの拡張機能Gistを使って見たところ、サクッと参照ができて、かなり使い心地が良かったのでまとめておきます。 Gistとは VSCode上でGitHub Gistを連携させることができ、手軽にファイルの作成、編集、削... 続きを読む
Markdownで技術同人誌のPDFが生成できるOSSを公開しました - Qiita
こんにちは、以前 FlightBooksというサービスを立ち上げていたのですが、2年ほどメンテしていなかったため、ローカル動作するOSS版として公開することにしました。 OSS版を作るにあたり、エディタ部分はVSCodeなりお好きなエディタを使ってもらうとして、 MarkdownからHTMLを生成する部分 HTMLからPDFを生成する部分 を... 続きを読む
新卒向け「テストコード」の研修資料 Sansanが無料公開 Python上でのテスト方法を解説
Sansanは10月25日、テストコードについての研修資料を無料公開した。4月に実施した新卒の技術研修で使った資料の一部で、入社2年目の社員が作成。Pythonのテストフレームワーク「pytest」でのテストコードの書き方や、VSCodeでのテスト方法などを解説している。 同社はテストコードの便利な点として「実行確認しやすい」... 続きを読む
VScode 上で今開いているファイルを Vite でプレビューする拡張を作ったら便利
// props を持たないファイル名と同名のコンポーネント export default function Sub(props: {name: string}) { return <h1 className="flex"> <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> Click {props.name} </button> </h1> } // ここが render される export const... 続きを読む