[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に下記設定をすることでディレクトリ名も表示されるようになりタブを見やすくすることができます。 .vscode/settings.js
![[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)
Next.Nav
NEXT.NAV Navigate and Create routes easily in your Next.js application User friendly VSCode extension(10k+ downloads) Install the extension from VS Code StoreOpen a Next.js project that is using the App Router in VSCodeLaunch Next.Nav by clicking the icon on the status bar (have to have Next.Nav enabled on status bar icons)Alternatively, Launch Next.Nav by opening the command palette using (Ctrl+S
Terraform、生成AIによるモジュールテストの自動生成を搭載、VSCodeでインフラコードの自動エラー検出機能も。HashiConf 2023
Terraform、生成AIによるモジュールテストの自動生成を搭載、VSCodeでインフラコードの自動エラー検出機能も。HashiConf 2023 HashiCorpは米サンフランシスコにおいて現地時間10月11日と12日の2日間、年次イベント「HashiConf 2023」を開催しました。 1日目の基調講演で、インフラ構成ツールであるTerraformの新機能として、生成AIによるモジュールテストの自動生成機能や、同じく生成AIによって構成ファイルのエラーの検出などを可能にするバリデーション機能をStudico Code上で実現する機能などが発表されました。
GitHub Copilot in VS Code で、作業内容からコミットメッセージを生成可能になりました | DevelopersIO
GitHub Copilot in VS Code で、作業内容からコミットメッセージを生成可能になりました こんにちは、CX 事業本部 Delivery 部の若槻です。 先月の GitHub Copilot in VS Code のアップデートで、コミットメッセージの生成がサポートされました。 Commit message generation using Copilot in VS Code - GitHub Copilot – November 30th Update - The GitHub Blog Copilot can now generate commit messages based on the pending changes using the new “sparkle” action in the Source Control input box. 試してみる 環境
AWS Application Composer in VSCodeを使ってAPIを作ってみた - Qiita
はじめに こんにちは、都内でソフトウェアエンジニアとして活動しているYSasagoです。 AWS re:Invent 2023の基調講演でDr. Werner Vogelsによって発表されたAWS Application Composer in VSCodeを使って、実際にAPIを作成してみたいと思います！基調講演はYoutubeで視聴することができます Application Composerとは Application Composerは、前年のre:Inventで初めて発表されたツールで、AWSコンソール内で直感的にサーバーレスアプリケーションを構築できるドラッグアンドドロップ式の便利なツールです。このツールはAWSのベストプラクティスに準拠し、Infrastructure as Code (IaC) の自動生成を可能にします。 VSCodeでApplication Composer
VSCodeで日本語の音声入力が可能に、Copilotがコードに合った変数名を提案など新機能。2024年2月のアップデート
VSCodeで日本語の音声入力が可能に、Copilotがコードに合った変数名を提案など新機能。2024年2月のアップデート コードエディタのVisual Studio Code（以下、VSCode）は2024年2月のアップデートで、音声入力やCopilotによる変数名の提案などの新機能が追加されました。 More developer goodness in the February update of @code Use your voice to write code (in your language!) Code faster with multi-cursor suggestions Renaming gets easier (because it's AI powered) Release notes: https://t.co/zwokiQvbPU Download: http
Javaを書くツールの使いやすさで言うと「NetBeans > IntelliJ IDEA >> Eclipse >>>(超えられない壁) >>> VSCode」→開発者から様々な声
きしだൠ(K1S) @kis Javaを書くツールの使いやすさで言うと NetBeans > IntelliJ IDEA >> Eclipse >>>(超えられない壁) >>> VSCode みたいな感じで圧倒的にVSCodeのダメ感がある。 NetBeansはIDEフレームワークがいいのよね。自然にUIの整合性がとれるし右クリックメニューもあるべきものになる。 2024-05-02 15:16:28
I've been using Sublime Text on and off for longer than I can remember. I think Sublime has been around since the start of my "real" career over 10 years ago, but I could be mistaken1. It certainly feels that long. And in that time I have never gotten upset with Sublime. I've never rage quit or ran into an issue of Sublime not being able to do the thing I wanted it to do. As much of a cliche it ma
VS Codeの言語ごとの実践的な使い方、UIのカスタマイズ方法を詳しく解説した一冊 -毎日使える！ Visual Studio Code
Visual Studio Code（以下、VS Code）を今よりもっと使いこなしたい！ そんな人にお勧めの解説書を紹介します。 VS Codeの最大の特徴は、高いカスタマイズ性と豊富な機能拡張。本書では使用する言語に適した開発環境の構築方法、UIや設定のカスタマイズ方法、特にお勧めの機能拡張を軸に、VS Codeを使いこなす方法を解説したものです。 著者の上田 裕己氏（@ikuyadeu0513）はVisual Studio Codeのコントリビュータで、VS Codeの機能拡張なども開発されています。 本書はそんな著者によるVS Codeの実践的な操作方法、言語ごとの開発環境の構築、拡張機能など、幅広い内容が網羅された一冊です。
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 is here! Check out what's new: Per-window zoom levels "Hey Code" voice command Triggered breakpoints ... & much more! Release notes: https://t.co/ourbLiwakw Download: https://t.co/1CSkQpMbwd pic.
GitHub - continuedev/continue: ⏩ The easiest way to code with any LLM—Continue is an open-source autopilot for VS Code and JetBrains
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
🔥 Time Travel Visual Debugger for RustVisualize and debug Rust programs with a new lens
はじめに この記事では、2023年に見つけた、Visual Studio Codeで開発作業を効率化するための便利な拡張機能4つを紹介します。 これらの拡張機能は、共通してあまり有名ではないためあえて紹介しようと思います！！ 実施内容 紹介するのは以下の4つの拡張機能です。 Multi Cursor Case Preserve VSCode JS Console Utils Laravel Goto Config NPM Dependency Links これらの拡張機能は、それぞれ異なるニーズに応えるものです。 準備 Visual Studio Codeをインストールしておく必要があります。 各拡張機能をVisual Studio Codeのマーケットプレイスからインストールします。 実装手順 Multi Cursor Case Preserve VScodeを使って命名の変更があった場
Python仮想環境 Python3の標準ライブラリであるvenvを用いて仮想環境を構築します。 仮想環境はプロジェクトによってバージョン、ライブラリを使い分けるために使用します。 venvで仮想環境を作成する 以下のコマンドを実行して仮想環境を作ります
// 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 __PREVIEW__ = () => { return <Sub name="dummy" /> } 他にも .svelte や .html にも対応してる。対応パターンは以下。 注意点として、 dynamic import が絡むとプレビューに失敗する。
Googleは、「Project IDX」と呼ばれる新しいクラウドベースの統合開発環境（IDE）を発表した。この新製品は、アプリケーションをより効率的に構築するためのAIツールや機能を提供することで、ソフトウェア開発者のエクスペリエンスを向上させることを目的としている。 Project IDXは、Google Cloud上に構築されたブラウザベースの開発環境であり、コード上で学習され、PaLM 2上に構築された基礎的なAIモデルであるCodeyを搭載している。 GoogleはProject IDXをVisual Studio Codeの上に構築し（Code OSSを使用）、CodeyやPaLM 2のようなAI統合に集中できるようにした。GoogleのAIプログラミング・アシスタントCodeyは、スマートなコード補完、コーディングの質問に答えるチャットボット、文脈に応じたコードの推奨を可能
vscode-dbt-power-userでdbtの開発やレビューを効率化する - yasuhisa's blog
背景 vscode-dbt-power-userがよかったところ 定義にさっと行ける / 戻れる(Go to definitionが使える) VSCode内でモデル間のリネージが見れる VSCode内からdbtのモデルをさっと実行できる モデルファイルの単独の実行も簡単 コンパイル済みのSQLファイルをさっとプレビューできる まとめ 補足: vscode-dbt-power-userの導入方法 背景 dbtは前職時代から含めると二年以上使っていて、SQLでDWHやデータマートの開発をしようと思うともはやこれなしでは生きられないくらいには便利になっている。dbtがあっても大変なクエリは大変ではあるが、大変さは大分緩和してくれる。dbtがなくて、1つのSQLが1000行以上あり、中間クエリがテストもされていない、という状況はもう戻りたくない...。 dbtに限らずであるが、コードは書いていると
はじめに 皆さんは外出先などで突然VS Codeを使いたくなったことはないでしょうか？僕はあります。 それは職場かもしれませんし、カフェかもしれませんし、オフトゥンの中かもしれません。そんな時に、ブラウザとネットワーク環境さえあればいつものVS Codeが使えるのがGitHub Codespacesです。 GitHub Codespacesとは GitHub Codespacesは、GitHubが提供しているクラウドベースの開発環境です。 機能的にもUI的にも普段利用しているVS Codeとほぼ同じため、日常的にVS Codeを利用している人であれば、いつも通りの開発体験を得ることができます。 GitHub上の任意のRepositoryをcloneすることができるので、GitHubで管理しているソースコードであればすぐに開発を開始することができます。 ブラウザ上で利用できる GitHub
どうもこんにちは。MESIと申します。 皆さんVimは使ったことがありますでしょうか？ Vimといったらキーボードのみで操作をしないといけない敷居の高いエディターなため、使っていない人のほうが多いと思います。 私はエンジニア3年目なのですが、ずっとVScodeをつかってコードを書いていて たまにCUI環境を使わざるをえないときに仕方なく使うくらいでした。 当然まともには使えないので、insertモードと矢印キーでごまかしながら使ってました。 そんな感じだったのですが、11月の月初からVimを使っています。 12月になった今、本格的にvimを使いだして1ヶ月が経過したので、その節目として振り返りたいと思います。 ちょっとVimに興味があるVim未経験の方へ参考になれば幸いです。 なぜVimを使うことになったのか？ Vimを使い始めた理由ですか？それは… なんか…カッコいいから です。 コード
この拡張には現在 (2023/07/30 9.19.0 時点) はまだPrettier v2が同梱されている。同梱をv3に変更するPRはまだマージされていない（と書いてたらさっきマージされた）。 ただ、この拡張は対象ワークスペースのプロジェクトのローカルにprettierがインストールされていればそっちを使ってくれるので、この拡張の変更のリリースを待たずとも、単にプロジェクトでprettierをアップデートすればVS Codeでもv3が使われて期待通り動くはず。 が、結果は予想に反して、v3で動いているはずなのにtrailingCommaがallではなく、v2相当のes5で動いてしまってた。あれ？ 原因は、この拡張は拡張側でPrettierのデフォルト設定を独自に持ってしまっていて、プロジェクトに設定ファイルprettierrcが無い場合は拡張側のデフォルト設定が使われるから。Pretti
It is important to note that the component model does not support low-level (C-style) pointers. As such, you cannot pass object graphs or recursive data structures. In this respect, it shares the same limitations as JSON. To minimize data copying, the component model introduces the concept of resources, which we will explore in more detail in a forthcoming section of this blog post. The jco projec
はじめに こんにちは、まつさこ です。 生成AIが日々なにかと話題ですが、そんななかAIファーストな新しいテキストエディタ「Cursor」が登場しました。今回は、Unity開発におけるIDEとしてCursorを使用するための導入手順について紹介します。 Cursorとは AIファーストな新しいテキストエディタです。Visual Studio Code をフォークして作られているので、VSCode からスムーズに移行することが出来ます。 コードの一部を選択して「Ctrl + K（Command + K）」を押すことで、AIと対話しながらコーディングをすることが出来ます。 VSCodeのフォークなので、VSCodeで使用できる様々な拡張機能を利用できます。 Cursor導入と初期設定 Cursor のホームページから最新バージョンのアプリケーションをダウンロードします。 インストール出来たら初
この記事について 私はこれまで Zenn のフロントエンドエンジニアとして働いてきましたが、2023/09 いっぱいで Zenn もといクラスメソッドをやめることになりましたので、この機会に Zenn でやってきたことを振り返ってみようかなと思います。 コードブロックのコピペ Zenn に入ってまず初めにやったことといえば、コードブロックのコピペがありました。 Zenn の公式ツイートより引用 ごくありふれた機能ではありますが、私が初めて実装した機能なのでよく覚えています。 実装方法は描画された DOM に対して無理やりコピーボタンを挿入するという力業だったので PR が通るか心配でしたが、無事に通ってリリースできたのでとても嬉しいかったです。また、チームメンバーが Twitter で告知してくれて、ユーザーからの反応が結構よかったのも良い思い出でした。 GitHub の埋め込み機能 次に
コードアナライザーとは 初心者がやりがちな 「良くないC#の書き方」を教えてくれるツール です！ 「良くない」とはこういうのです！ 遅い バグりやすい 危ない（セキュリティリスク） 書き方がバラバラ あー、それ！初心者が最初に教えてほしいやつ！ しかも！教えてくれるだけじゃなくて自動で直してくれます…！！(リファクタリング) （一部だけだけど…） タダで最初から使える .NET SDKをインストールすると使えるようになります。 しかも無料！ 無料ってことはつまり…タダ、ってコト！？ VS Codeでも使える 「初心者は本家Visual Studio（特にVS Comunity)を使おう」って言われるのですが、 Visual Studio Code (VS Code) + C# Dev Kit拡張でもコードアナライザーは使えます。 本家VSはクソデカでインストールも遅いので、軽めのVS Co
この記事はVisual Studio Code Advent Calendar 2023 19日目の記事です。 もうすぐクリスマスですね。我が家は3歳の息子がいるのですが、今更「ツリー買い忘れたけどなんか飾り付けほしいなぁ」と思ってダイソーでツリーが印刷された布を買い、布を壁に貼ってシールや工作物をペタペタ貼ることでそれっぽいものができました。ツリーのゴミも散らからないので、もし悩んでいる方がいればぜひお試しください DALL-Eで出力してもらったイメージはこちらになります（こんなにちゃんとしていませんが） はじめまして、LayerX 機械学習チームの @yakipudding です。 突然ですが、私はSQLを書くのが好きではないです。業務での調査や分析によくSQLを使用するのですが、構文やJOIN、どの項目がどのテーブルにあるのかなどを都度確認しながら書くのが面倒で、億劫に感じます。 そ
これができる拡張を作った。 TypeScript と HTML と CSS の LSP を動かせるようにしたので、 markdown 内部で補完が走る。 TypeScript に関しては補完だけではなく型診断の結果を表示している。 .md だけではなく .mdx にも対応している。 インストールと設定 インストールした上で .vscode/settings.json に次の設定を書く。 { "markdown-code-features.enable": true, // to enable completion in markdown "[markdown]": { "editor.quickSuggestions": { "comments": true, "strings": true, "other": true } } } 基本的に、markdown-code-features.
Author Shuyin Zhao すべてのGitHub Copilotユーザーは、追加料金なしでCopilot Chatで自然言語によるコーディングを利用できるようになりました。 GitHub UniverseにおいてGitHubがGitHub Copilotにより、世界有数のAIが支援するソフトウェア開発者プラットフォームへと拡張し、進化したことを発表しました。開発者プラットフォームのAI機能の核となるGitHub Copilot Chatは、自然言語を新しい普遍的なプログラミング言語として使うことを可能とするものです。 本日、GitHub Copilot Chatは、Visual Studio CodeとVisual Studio向けに一般提供(GA)を開始しました。当初からあるGitHub Copilotの生産性を高めるコード補完機能は、すべてのGitHub Copilotプラン
Qiita Advent Calendar 2023 「Visual Studio Code」 24日目の記事です。 言いたいこと VSCode上でAmazon CodeWhispererに脆弱性診断をさせてGitHub Copilot Chatにその解説をさせると、とても捗るよ。 もう少し細かい説明 GitHub CopilotやAmazon CodeWhispererって何？ GitHub Copilotは、IDE上でAIがコーディングの補完をしてくれるGitHub提供のサービスです。 Amazon CodeWhispererは、IDE上でAIがコーディングの補完をしてくれるAWS提供のサービスです。 つまり競合しています。比較用に両方を使ったことがある人はいても、日常的に同時使用している人は少ないのではないでしょうか。 ですが、メイン機能であるコーディング補完は一旦おいておいて、Co
はじめに Amazon Qとは VSCodeでAmazon QにChatする セットアップ 質問してみる 余談：Chatでエラー発生 Javaコードのバージョンアップ（未検証） まとめ はじめに こんにちは、高橋です。 先日AWS re:Invent2023に行ってきました。 Keynoteで発表されたAmazon Qについて、VSCodeで使ってみた感想を簡単にまとめようと思います。 Amazon Qとは Amazon QはAmazonによって開発された生成型AIアシスタントです。このツールは、特にAWS（Amazon Web Services）のエコシステム内で開発者やIT専門家を支援するよう設計されています。Amazon Qは自然言語処理を用いて、ユーザーが提出する質問や要求に応じて迅速かつ効果的な解決策を提供します。 Amazon Qには以下の種類がありますが、今回はAmazon
はじめに こんにちは！@nyakako13 です。 少し前からtypescript,reactの学習を進めています。 pythonでの開発時はblack formatterとiSortの拡張機能でimport文の自動並べ替えをしていました。 今回、typescriptの開発でも同じように自動でimport文の整理ができないかな？と思い調べてみました。 eslintやprettierでもplugin等で実現できるみたいですが、現在は一人での開発で、すべてのプロジェクトに適用したいので、とりあえず今回はvscodeの設定でやってみます。 vscodeの設定方法 vscodeのsetting.jsonを開きます 下記を追記します。 "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.organizeImports"
はじめに ここでは VS Code 開発コンテナー用カスタム Docker イメージの開発方法について説明します。 動作確認は Linux 環境を使っているため、Windows や macOS とは違っている場合があります。できるだけ Docker が動作する環境であれば動くようにはしています。 この記事の対象者の前提は下記となります。 Visual Studio Code（VS Code）が使えること Docker が使えること Node.js で NPM を使ったパッケージ管理について基本的なことを知っていること Docker Compose の基本的な使い方を知っていること Linux の基本的な使い方を知っていること 使用する環境は下記です。 Visual Studio Code Docker 拡張機能: ms-azuretools.vscode-docker Dev Contai
はじめに コーディングにAIが使われるようになってだいぶ時間が経ちました。AIエディタも様々なものが出ましたが有名どころとしてはCursorやGithub Copilotが挙げられると思います。これらのツールは、定額課金であるため個人で手が出しづらかったり契約にハードルがあるような職場もあるかもしれません。 ということで従量課金で使えるVSCode拡張のAIエディタ機能を探していたところ、Geminiの拡張を知りましたので使ってみました。 あまり使っている人が見当たらなかったので共有できればと思います。 誰向けの記事か Gemini Code Assist（VSCode拡張）について知りたい人 従量課金のAIエディタツールを探している人 Gemini Code Assist Gemini Code Assistは、Google Cloud の AI を活用したコラボレーターと表現されており
GitHub - cmoog/vscode-sql-notebook: Open SQL files as VSCode Notebooks.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
My Text Editor Is Not Open Source
好きな部分を軽量ウィンドウに切り離し ～「Visual Studio Code」2023年11月更新／プロファイル機能の追加アイコンやJavaScript/Python向けの便利機能なども
FireDBG - 🔥 Time Travel Visual Debugger for Rust
2023年に見つけたあまり知られていない便利VSCode拡張4選 - Qiita
VS CodeでPythonの仮想環境を構築する(windows) - Qiita
VScode 上で今開いているファイルを Vite でプレビューする拡張を作ったら便利
Google、「Project IDX」発表：VSCodeベースのAI搭載WebベースIDE | TEXAL
ポート転送機能を内蔵した「Visual Studio Code」2023年8月更新（v1.82.0）が公開／「コマンド センター」と新しい差分エディターは既定で有効化、
【Ubuntu日和】 【第39回】Ubuntuのテキストエディタ事情について知る
いつでもどこでもVS Codeが利用できるGitHub Codespaces
お前もVimmerにならないか？VScodeで甘やかされた男がVimを使い始めて一ヶ月が経ったので振り返る
ターミナルで画像表示が可能に ～「Visual Studio Code」2023年6月更新（v1.80）／アクセシビリティ改善に引き続き注力、Windows 8/8.1対応は打ち切り
VS Code Prettier拡張でPretteir v2/v3両対応を試みる
VS Code Extensions and WebAssembly
Unity開発にAI時代の新テキストエディタ「Cursor」を使う
Zenn をやめることになったので、やったことを振り返ってみる
【C#】初心者におすすめ！コードアナライザーを使おう！【.NET】
Visual Studio Codeに新しいPython拡張機能が仲間入り、Python 3.7対応の廃止は9月／言語サーバー「Pylance」ではローカライズも
VSCode GitHub Copilotでいい感じのクエリを作ってもらおう
Markdown のコードブロックでLSPを動かす VSCode 拡張を作った
GitHub Copilot Chat、組織と個人向けに一般提供(GA)開始
「Visual Studio Code」2023年10月更新 ～UIの柔軟性がさらに向上、編集に集中できる／Windows/macOS/Linuxで動作するフリーの高機能コードエディター
VSCode上でCodeWhispererとCopilotを両方使うと、捗る (AIが脆弱性診断→AIが解説)
Amazon QをVSCodeでつかってみた - NRIネットコムBlog
【vscode】TypeScriptで不要なimport文を自動削除＆自動で並べ替え - Qiita
VS Code 開発コンテナー用カスタム Docker イメージの開発方法
VS Code で Gemini Code Assist を使う - Qiita
「Visual Studio Code」の状態をMarkdown/JSON形式でまとめてくれる拡張機能【7月24日追記】／ステータスバーには好みのシステム情報を表示しておける【レビュー】
