iPad で Visual Studio Code を使う方法 - Qiita
iPadでVisual Studio Codeを使いたい 普段 iPadをよく利用していますが、何かプログラムを開発したりメンテナンスするときにiPadアプリで一般的なPCと同じ環境を求めようとしても使いやすいアプリがなく、やっぱり使いにくいなぁ・・・という感想を持っていました。ところが、下記の方法ならどうやらiPadでもVS Codeが使えるようで、これなら普段のPCの環境と同じようにコードを書くことができるので、ちょっと出先でコード編集したいなと思っても対応できそうです。 そんなニッチな悩みをお持ちの方のために、iPad で VS Code を使うための4つの方法を比較し、「iPad で Visual Studio Code (VS Code) を使いたいけど、どれを選べばいいの？」とならないように、それぞれの特徴やメリット・デメリット、料金などをわかりやすく解説します。 iPad で
[VS Code]タブのカスタムラベル設定でpage.tsx、layout.tsxなどのファイルを見やすくする | DevelopersIO
[VS Code]タブのカスタムラベル設定でpage.tsx、layout.tsxなどのファイルを見やすくする どうも！オペレーション部の西村祐二です。 最近、Next.jsなどでフロントエンドの実装も行うことが増えてきました。 実装を進めていくと、page.tsx,layout.tsx,index.tsx,route.tsなど同名のファイルが増えてきて、どのファイルを開いているか分かりづらいなと思う場面がありました。 VS Codeのv1.88で開いているファイルタブのラベルをカスタマイズできるようになったので、その設定方法を紹介したいと思います。 Visual Studio Code March 2024 結論 最初に結論として、settings.jsonに下記設定をすることでディレクトリ名も表示されるようになりタブを見やすくすることができます。 { "workbench.editor
![[VS Code]タブのカスタムラベル設定でpage.tsx、layout.tsxなどのファイルを見やすくする | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/611914e4c074abe947efa5c820fc1646e6c60a0a/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2020%2F06%2Fvscode-2020-eyecatch-1200x630-1.png)
【index.ts】そのVSCodeタブ名、わかりづらくない？【page.tsx】
はじめに VSCodeで、index.tsやpage.tsxなど、同名のファイルを複数同時に開いてしまい、わからなくなってしまったことはありませんか？ 実はよく見ると同一名称のファイルを開いているときには右側にディレクトリ名も表示されているのですが、薄い文字かつ、目線移動が必要で分かりづらいです。 この記事では、VSCodeの設定を変更することで、タブ表示名にディレクトリ名を含めて表示する方法を紹介します。 設定方法 VSCodeの設定ファイルsettings.jsonに以下の設定を追加します。 "workbench.editor.customLabels.patterns": { "**/index.*": "${dirname} .../${dirname(1)}", "**/{page,layout,template,route,actions,hooks,components,ut
［速報］GitHub Copilot extensions発表。CopilotがDockerやAzureなどサードパーティの専門家へ拡張、プログラマの質問に答えてくれる
マイクロソフトは、日本時間5月22日未明から開催中のイベント「Microsoft Build 2024」で、GitHub Copilotの新機能「GitHub Copilot extensions」を発表しました。 GitHub Copilot extensionsは専門知識を持つCopilot GitHub Copilotは、プログラマはVisual Studio Codeなどのコードエディタ上やチャット欄でAIと対話し、プログラミングに関する質問への回答やコードの生成などをAIが行ってくれる機能です。 GitHub Copilot extensionsは、このCopilotの能力をサードパーティなどがそれぞれのソフトウェアやサービスの専門家へと拡張できるようにし、プラグインとしてCopilotに組み込み可能にしたものです。 拡張されたCopilotの例として、マイクロソフトが提供する「
VSCodeでペットを飼う - Qiita
はじめに こんにちは。エンジニアの皆さん。 日々の業務にお疲れではないでしょうか？ 消えないエラー、動かないプログラム、迫る締切、etc... 数あるストレスで限界になっていませんか？ ... ...!!! そんな時はペットを飼いましょう！！！！！！！！！！ ...というわけで、VSCode上でペットを飼うことができる拡張機能を紹介します。 その名も、vscode-pets.......!!!!!!!!!! これです。vscode-petsで検索しましょう。 導入 インストールしたらコマンドからPet Coding: Start pet coding sessionを実行します。 Pet Coding:Spawn additional petから好きなペットを選んで... ほわああああああああ！！！！！！！ 殺伐としたVSCodeに一輪の花が爆誕しました。かわいいですねー。 あそびかた す
VSCodeでGitのコミットを楽に整理して、レビュワーに「コイツできる」と思わせよう。
はじめに 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
GitHub Copilotが便利になったのでターミナルもVSCodeで良いのでは？という話 - Qiita
この記事はラクスアドベントカレンダー2の17日目です。 先日のVSCodeのアップデートで、GitHub Copilotを使うとターミナル操作が便利になりました。 これにより、別途ターミナルのアプリを使わずにすべてVSCode上で操作した方が便利なのでは？となりました。 アップデート前までどうしてたか MacのiTerm2上で、GitHub CopilotのCLI版（パブリックベータ）で入力補完やコマンドの意味を調べたりしていました。 それ自体は便利でしたが、いくつかの不便な点もありました。 使い方がちょっと煩雑だった 例えばコマンドをサジェストして欲しい場合、gh copilot suggest 'gitで1つ前のコミットを取り消したい'のようにタイプする文字数も多くなり、またそれが一般的なコマンド or ghコマンド or gitコマンドかの３択に答えないといけなくて面倒でした。 ss
VSCodeの拡張機能【Gist】が便利すぎて開発効率がかなり上がった話 - Qiita
はじめに 突然ですが、よく使うコードはどのように管理していますか？ 私はGitHubで管理していたのですが、今回VSCodeの拡張機能Gistを使って見たところ、サクッと参照ができて、かなり使い心地が良かったのでまとめておきます。 Gistとは VSCode上でGitHub Gistを連携させることができ、手軽にファイルの作成、編集、削除が可能になる拡張機能です。 導入手順 GitHub Gistの登録 GitHub上でアクセストークンの取得 拡張機能のインストール アクセストークンの設定 1. GitHub Gistの登録 2. GitHub上でアクセストークンの取得 ExpirationをNo expirationに設定します。 scopeのgistを許可して作成です。 トークンが発行されるので控えておきましょう。 3. 拡張機能のインストール VSCode上で【Gist】と検索すると
PlaywrightのVSCode拡張を使って効率的にテストを書く
この記事では、Playwright の VSCode 拡張を使って GUI 操作のみでテストの記録や実行する方法について紹介します。 Playwright の VSCode 拡張とは？ Playwright の VSCode 拡張は、Playwright の作成元である Microsoft が公式に提供している拡張機能で、VSCode 内で直接ブラウザテストの記録や実行を支援するための便利なツールです。 GUI 操作を中心に、テストの記録や実行を手軽に行うことが可能となります。 VSCode 拡張のインストールは、以下のリンクから行うことができます。 VSCode 拡張を活用してテストを書く 本記事では、シンプルな ToDo アプリを例にテストの作成方法を説明します。Playwright のインストール方法は、公式ドキュメントをご参照ください。その後、VSCode に Playwright
VSCode の新機能「built-in port forwarding」を使いローカルサーバーにインターネット側からアクセス - Qiita
VSCode の新機能「built-in port forwarding」を使いローカルサーバーにインターネット側からアクセスHTMLJavaScriptNode.jsVSCode はじめに この記事は、以下の公式ポストや、VSCode のアップデート後のリリースノートにも出ていた「built-in port forwarding」を試してみた話です。 この機能を使うと、ローカルにあるサーバにインターネットからアクセスできるようになります。 同様のことを実現するものには、有名どころの 1つに「ngrok（エングロック）」があったり、その他にもたくさんの類似サービスがあります。 実際に VSCode の built-in port forwarding を試してみる それでは、VSCode の built-in port forwarding を試してみます。 自分が試す際に参考にした情報は
GitHub Copilot Chat ベータ版がすべての組織で利用可能に
今年初めにGitHub Copilot Xを発表した際、GitHub上の開発者エクスペリエンス全体にわたり、生成AIとGPT-4のパワーをもたらすことを目的とした、テクニカルプレビューを数多くご紹介しました。本日、GitHub Copilot Xをあらゆる組織に提供するための第一歩として、Visual StudioとVS CodeのすべてのGitHub Copilot for Businessのユーザーを対象するGitHub Copilot Chatの限定パブリックベータ版をリリースしました。 この新たな進歩により、GitHub Copilotはコンテキストを理解した会話アシスタントとしてIDE内で機能するようになり、その結果として開発者は最も複雑なタスクの一部を簡単なプロンプトで実行できるようになります。職歴の長短に関わらず、チームのすべての開発者がアプリケーション全体の開発や膨大なコー
GitHub Copilot Labsを使ってみた - Qiita
GitHub Copilot Labsとは？ VSCodeの拡張機能として、GitHub Copilot Labs をインストールすれば、コードの解説をしてくれたり、リファクタリングしてくれたり、バグを修正してくれたりと便利な機能がたくさんあります。 以前に筆者が書いた以下のようなChatGTPの拡張機能のようなものです。 公式ページより抜粋 GitHub Copilotの実験的なアプリケーションのためのVS Code拡張機能。 GitHub Copilotは、開発者向けの画期的なAIペアプログラマですが、私たちはコーディングの未来を探求し始めたばかりです。テクニカルプレビューの期間中、Copilotチームは提案の質を向上させ、安全機能を追加しました。しかし、Copilotがコード提案以外にも提供できる潜在的な助けを見るのは難しいことではありません。 本日、GitHub Copilot L
「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を実行し、ビルドやデプロイなどの状態を監視できるようになります。 問題が発生した場合にはログの参照も可能。
vscodeでvimのj,k,l,hなどの長押しを機能させる方法
vscodeでvimを使う場合に、デフォルトの設定だとh,j,k,lを長押しすると、 holdされて通常のvimのように動作しません。 そこで、長押した際にholdされずにスムーズに動かす際には、 以下のように設定を変えて、visual studio codeを再起動する必要があります。 defaults write com.microsoft.VSCode ApplePressAndHoldEnabled -bool false defaults delete -g ApplePressAndHoldEnabled # If necessary, reset global default これで設定は完了です。 how 参考: How do I press and hold a key and have it repeat in VSCode?
Webpackのresolve.aliasとVSCodeのjsconfig.jsonを使ってimportを快適にする - Qiita
import { someConstant } from './../../config/constants' import MyComponent from './../../../components/MyComponent' import { myActionCreator } from './../../../ducks/someReducer' いちいちターゲットのファイルとインポート先のファイルの相対パスを確認する必要があってめちゃくちゃ面倒ですよね。そこで今回はwebpackのresolve.aliasとjsconfig.jsonを使って↑のコードを import { someConstant } from '@config/constants' import MyComponent from '@components/MyComponent' import { myActi
「VS Code」の拡張機能「Remote SSH」にてSSH接続中、接続先のCPUを占有する件の対策【rg】
Visual Studio Code + Remote-SSHアドオン（拡張機能）を使用してlinux上で開発しているのだが、とにかく重い。 複数人で作業しているため、周りに迷惑をかけてしまうのでどうも使いづらくなっている。 環境 接続元PC : Windows 10 接続先PC : Ubuntu-Server 18.04 調査 Ubuntuでtopコマンドして状況確認。 なんじゃあこりゃあ。 見た事ないCPU使用率。100%どころの騒ぎではない。 どうやらというか、見たまんま「rg」とやらがCPUを喰っている様子。 psコマンドで調べたところVS Codeの関連プロセスっぽい。 「ripgrep」コマンドらしく、grepの高速版とのこと。 （nodeやcpptoolsなど他の関連プロセスも重いが、これは原因がまぁわかっているのでとりあえず保留） これを何とかする。 対策 ググってもset
Visual Studio Code June 2022
Register now for a full day of community, learning, and all things Visual Studio Code June 2022 (version 1.69) Update 1.69.1: The update addresses these issues. Update 1.69.2: The update addresses these issues. Downloads: Windows: x64 Arm64 | Mac: Universal Intel silicon | Linux: deb rpm tarball Arm snap Welcome to the June 2022 release of Visual Studio Code. There are many updates in this version
Visual Studio Code Server
Register now for a full day of community, learning, and all things Visual Studio Code The Visual Studio Code Server is a service you can run on a remote development machine, like your desktop PC or a virtual machine (VM). It allows you to securely connect to that remote machine from anywhere through a local VS Code client, without the requirement of SSH. What is the VS Code Server? In VS Code, we
サクッとAPIを叩く方法 (VS CodeでHTTPリクエストが送れちゃう拡張機能) - Qiita
概要 開発中のAPIを試したり、サードパーティのAPIをサクッと叩いてみたいといった時に皆さんどのようにしますか？ 私は、curlコマンドやPostmanをよく使っています。 ただ、もっと楽にHTTPリクエストを投げ、かつその時使用した情報を残すことができる方法を以前のチームメンバーに教えていただいたので、記事にしました。 REST Client 今回、紹介するのはVS CodeのエクステンションにあるREST Clientというものになります。 このREST ClientというのはVS Code上でHTTPリクエストを送信し、レスポンスを確認できる拡張機能となっています。 使用方法 使用方法はすごく簡単で、拡張子が「.http」か「.rest」というファイルで決められた構文に従いHTTPリクエストを記述するだけです。 下記にcrudの例を載せていきたいと思います。 また今回はREST A
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VScodeの設定（settings.json）まとめ【2023年4月更新】
