[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)
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
VSCode で clangd を使って、賢いC++インテリセンス環境を整える - Qiita
VSCode の標準のC++インテリセンスでは、簡単なコード補完などや、構文が間違ってるなどのエラー表示はリアルタイムに出来ますが、警告などはリアルタイム表示出来なかったり、その他コーディング時に行ってほしい賢い機能が不足しがちです。 例えば以下のコードは、セミコロン忘れなどのエラーは表示してくれますが、未初期化変数の f などはコンパイル時に警告がちょろっと出るだけで、見落としてしまいます。 #include <iostream> using namespace std; int main(){ int f; cout << f << endl; cout << "semicolon" << endl return 0 } MS 標準の C++ インテリセンスはそこまで賢くないからというのが理由なのですが、ここで変わりに clangd を使うことで、賢いリアルタイムインテリセンスを使える
保守・理解しやすいコードを書きたい！ 〜VSCode拡張機能で循環的複雑度と戦う〜 - Qiita
参考: 循環的複雑度 ちなみに githubで最もやべー関数を発掘するという記事では、循環的複雑度が高い関数が紹介されています。 ものによってはリンク切れしてしまっていますが、最も複雑度が高いのはnode（JavaScript）のjo関数で5505だそうです。想像もつかない... どのようにすれば循環的複雑度を低く抑えられるのか？ 計算方法から考えると、forやifによる分岐を減らしていくことが必要となります。 そのために、分岐の入るロジックを別関数として切り出し、１つの関数でやる事を絞り、分離することを理想として目指していきます。 とはいえ、いちいち複雑度の計算なんてしていられないですね。 そこで役に立つのが次のVSCode拡張機能です。 Code Metrics （VSCode拡張機能） この拡張機能は、TypeScriptやJavaScriptの関数・メソッドに循環的複雑度を表示して
VS Codeの新機能がすごく便利！ ツリービューのスティッキースクロール機能をオンにすると格段に使いやすくなります
先日アップデートされた、VS Code v1.86で、スティッキースクロールがツリービューでも使用できるようになったので、紹介します。 エディタのスティッキースクロール（紹介記事）ができるようになった時もその便利さに喜びましたが、ツリービューでもできるようになり、深い階層でもすべての親を常に表示しておくことができます。 ツリービューのスティッキースクロールを使用するには、デフォルトではオフになっているので、機能をオンにする必要があります。 ※オンになっている人もいるようですね。
Code Tour を使ってじっくり確実にコードを読む
日々のタスクに忙殺されていると、ついつい既存コードを流し読みして、ざっと動くコードを書いてしまいたくなります。 一発でうまく動けば短期的にはいいのですが、長期的にはコードの理解が追いつかなったり、一発でうまく動かなかった場合にかえって時間がかかってしまいます。 VSCode の拡張機能である Code Tour を使うと、コード上にメモを残しながら読み進めることができるので、既存のコードを読む際に便利です。 Code Tour とは VSCode の拡張機能で、コード上にメモを残しつつ、そのメモをたどることができるツールです。 使い方 ツアーを始める コマンドパレットから「Code Tour: Record Tour」を選択すると、ツアーの記録モードになります。 ツアーの名前 どのソースに紐づけるか（紐付けなし、ブランチ、タグ） を選択すると、リポジトリ直下に .tours/${指定したツ
Overleaf+VSCode+GitHub+etcな執筆環境を整える
環境構築 以下の手順で構築していきます． Overleaf-Workshopの拡張機能をVScodeに入れる Latex-Workshopの拡張機能をVSCodeに入れる Latex-Workshopの設定を変更 texliveをインストール +α Grammarlyの拡張機能をVSCodeに入れる Grammarlyの設定を変更 1, 3, 5はVSCodeの拡張機能で検索すれば一瞬で出てくるのでスキップ． Latex-Workshopの設定を変更 Latex-Workshopの設定を変更します．以下を設定から変えましょう．cmd+,で設定のタブが開けると思います． Latex-workshop › Latex › Recipe: Default - first + lastUsed onSaveでtexソースをビルドするときに、デフォルト設定のfirstのままだとpdflatexのビル
VSCodeでプロジェクトを開くとき、ついでにいろいろやる方法
この記事は GMOアドマーケティング Advent Calendar 2023 16日目の記事です。 こんにちは。GMOアドマーケティングのK.Mです。 VSCodeでプロジェクト（ワークスペース）を開くとき、その開発をするために必要となるいろんなこと（サーバー起動やらログtailやらブランチ整備やら…）をついでに自動でやれたら良いなと思います。 そんなときは tasks.json です！ というわけで今回は tasks.json を試してみます。プロジェクトを開くだけで周辺のいろんな準備もまとめてやってしまえるよう効率化したいと思います。 let’s try! VSCodeを開いてメニューの ターミナル > タスクの構成 から適切なものを選んで進みます。シンプルなテンプレートが得られるので、必要に応じてカスタマイズしていきます。 例として開発用サーバーを起動するようにしてみます。 { "
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拡張機能『Infracost』を使って TerraformテンプレートからAWS利用費を試算してみた | DevelopersIO
VSCode拡張機能版Infracostを利用するとTerraformテンプレートを書いているだけで簡易的なAWS利用費の見積もりができます。無料で始められるのでまずはインストールしてみてください。 あしざわです。 皆さんは、これから作成するAWS環境の利用費の見積もり、どうやっていますか？ 最近アップロードされたAWS Dev Day 2023 Tokyoのアーカイブ動画を見ていたところ、『Infracost』というIaCテンプレートベースでAM利用費の見積もりができるツールの存在を知りました。 主にTerraformユーザーの方向けになりますが、誰でも無料で始められ導入も簡単かつ便利なツールなのでぜひ皆さんにも使ってほしいと思いブログを書きました。 まとめ InfracostはTerraformテンプレート(.tfファイル)からインフラコストを試算できるツール 無料のInfracost
【VS Code】tasks.jsonで決まった作業を自動化する | DevelopersIO
はじめに VS Codeでコーディングをするとき、Gitの操作やビルド、デプロイなど、決まった処理を手動で実行するのが面倒だなと思ったことがあるのではないでしょうか。tasks.jsonというファイルを使えば、そういった面倒な手順を自動化し、開発効率を上げることができます。 この記事でやること この記事では、作業ブランチにmainブランチの取り込みを行うGitコマンドを自動化してみます。mainブランチを取り込むために、以下のコマンドを毎回手で実行しているとします。 git stash git pull origin main git stash pop これをtasks.jsonに定義して自動化したいと思います。 タスクの作成 タスクを作成するには、VS CodeのメニューのTerminal⇒Configure Tasksを選択します。 Create tasks.json file fr
VSCode Serverがなくなって本体に統合されていた - Qiita
先日、VPS上にVSCode Serverをインストールしようとしたところ動かなくなっており、詳細を調べているうちにこのスレッドにたどり着きました。 ここをみると、どうもVSCode Serverの機能はRemote Extensionに統合されたので、もはや提供されなくなったようです。（setup.shでダウンロード可能なバイナリが無くなっている） じゃあどうすればいいのか？ サーバ上でVSCodeを動かして、ブラウザでエディタを立ち上げたい、iPadで開発したいという皆さんは、引き続きVSCode本体で簡単に実現することができます。 サーバ上に普通のVSCodeをインストールして、code tunnelと打ち込むだけで、github.devのドメインでトンネルがホストされてブラウザ上でもローカルのVSCodeとも接続可能な状態になります。 daemon化して常時起動したい それも簡単で
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 __PREVIEW__ = () => { return <Sub name="dummy" /> } 他にも .svelte や .html にも対応してる。対応パターンは以下。 注意点として、 dynamic import が絡むとプレビューに失敗する。
VSCodeがWebAssemblyの実行時デバッグに対応。C/C++やRust、Zigなどのソースコードと関連付け、変数参照、ブレークポイントなど可能に
VSCodeがWebAssemblyの実行時デバッグに対応。C/C++やRust、Zigなどのソースコードと関連付け、変数参照、ブレークポイントなど可能に マイクロソフトは、オープンソースで開発しているコードエディタ「Visual Studio Code」（以下、VSCode）の最新版となる2023年9月版（バージョン1.83）で、JavaScriptデバッガがWebAssemblyのデバッグにも対応したことを明らかにしました。 The JavaScript debugger can now debug code compiled into WebAssembly if it includes DWARF debug information. For example, C++ code compiled using Emscripten can be debugged: pic.twitt
AWS上にVSCode対応の開発環境を簡単に構築できるOSSのCoderがすごい！ - Qiita
使い方 Coderは様々なクラウドサービスで利用できますが、AWSでの使い方について紹介します。 詳細は公式サイトに詳しく記載されているので簡単に紹介します。 1.Coderが提供しているAMIからインスタンス(管理サーバー)を起動する Coderを使うためには、管理サーバーが必要になります。 ブラウザで管理サーバーに接続し、開発環境を立ち上げたりアクセスできるユーザーを管理したりすることができます。 2.管理サーバーにログインする 3.テンプレートを作成する デフォルトでDocker, AWS EC2, AWS ECSなどのテンプレートが用意されています。今回はEC2を選択しました。 4.ワークスペースを起動する。 ワークスペースが実際に開発を行うための環境になります。 5.開発環境に接続する 起動が成功するとVSCode Desktopとcoder-serverが選択できるようになりま
Vimmer、Visual Studio Codeを使う - 詩と創作・思索のひろば
まだ汚れを知らない若者だったころに「プログラムはね、これを使って書くんだよ」と言われて以来Vimは友達だと思ってずっと（15年くらい）使ってきたが、最近は、とくに新しく何かを書くときにはVSCodeを使うようになってきた。コードを書く間隔が広がってきたせいか、新しい技術や言語に対応することができておらず、なんか最初からいい感じになってるエディタを重宝する。歳を取ってきたからなんだろうな、と素直に思うけれど、自分向けになにかをカスタマイズすることにあまり熱を感じなくなっていて、すでにあるよいと分かっているものに自分を調整していくことを選ぶようになってきた。 とはいえ身体はVimに慣れきってるのでVSCodeを使い始めたときはVSCodeVimを使っている……いた、というのが今回の話。よくできてるとは思うが、とにかくu（アンドゥ）の挙動が本家と違うのがどうも身体に合わない。逆にストレスが高まっ
Blocking Visual Studio Code embedded reverse shell before it's too late
Visual studio code tunnel Introduction Since July 2023, Microsoft is offering the perfect reverse shell, embedded inside Visual Studio Code, a widely used development tool. With just a few clicks, any user with a github account can share their visual studio desktop on the web. VS code tunnel is almost considered a lolbin (Living Of the Land Binary). I am so glad that my users now have the ability
Zenn をやめることになったので、やったことを振り返ってみる
この記事について 私はこれまで Zenn のフロントエンドエンジニアとして働いてきましたが、2023/09 いっぱいで Zenn もといクラスメソッドをやめることになりましたので、この機会に Zenn でやってきたことを振り返ってみようかなと思います。 コードブロックのコピペ Zenn に入ってまず初めにやったことといえば、コードブロックのコピペがありました。 Zenn の公式ツイートより引用 ごくありふれた機能ではありますが、私が初めて実装した機能なのでよく覚えています。 実装方法は描画された DOM に対して無理やりコピーボタンを挿入するという力業だったので PR が通るか心配でしたが、無事に通ってリリースできたのでとても嬉しいかったです。また、チームメンバーが Twitter で告知してくれて、ユーザーからの反応が結構よかったのも良い思い出でした。 GitHub の埋め込み機能 次に
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 を試してみます。 自分が試す際に参考にした情報は
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FireDBG - 🔥 Time Travel Visual Debugger for Rust