概要 Docker や VSCode の Remote-Container でファイルシステムをマウントする際にパーミッションの問題に出会ったことはありませんか？Docker はパーミッションの扱いに面倒くささがあり、VSCode + Remote-Container はそれを黒魔術（＝力技）で解決しているのでよく分からずに使っていると想定しない結果になることがあります。 そこで Docker や VSCode + Remote-Container におけるパーミッションの扱いと対応方法をまとめてみます。 Docker とパーミッション まずは Docker がファイルシステムのマウント時にパーミッションをどう扱うかを解説します。 結論として Docker がホスト側のディレクトリをコンテナ内にマウントする際のスタンスは 「何もしない」 です。 しかしそれだけでは説明になっていないので、と
設定のコード化と管理 VS Codeの設定にはユーザー設定とワークスペース設定があり、ユーザー設定は ~/Application\ Support/Code/ 配下（Cursorなら ~/Application\ Support/Code/ 配下）に、ワークスペース設定はコードベースの .vscode/ 配下に保存される 今のところワークスペースごとに設定を変えたいニーズがないので、ワークスペース設定は一切いじらずユーザー設定のみをカスタマイズすることにする ただし、「どの拡張機能がインストールされているべきか」というユーザー設定は存在せず、代わりに「このワークスペースにおいてどの拡張機能のインストールを推奨するか」というワークスペース設定が存在するため、このワークスペース設定のみ必要に応じて使用する VS Codeにはデバイス間で設定を同期する機能がある が、Cursorにはまだない の
TypeScriptは強力な型システムが魅力です。 しかし、複雑な型定義は理解が難しいです。特にライブラリの型定義などはジェネリクスや交差型などがネストしていることも多く、すぐに把握するのが難しい場合があります。 Visual Studio Code（以下VSCode）でTypeScriptの開発をしている際、型にカーソルをホバーすると型情報が表示されます。 しかし、深いネストや複雑な型の場合、展開される情報が不十分で、定義を追う必要があります。 そんな時に役立つVSCodeの拡張機能がないかな〜と探していたら「Prettify TypeScript」というぴったりの拡張機能を発見しました！この拡張機能を使うと、ホバーした時に型が展開された状態で表示されるため、型情報を把握しやすくなります。 Prettify TypeScriptの概要 Prettify TypeScriptを使用すること
はじめに こんにちは、からころです。 今回は、VSCode でホバー時の TypeScript の型ヒントをすべて表示する方法について書いていこうと思います。 ※ 投稿日の 2024/10/17 から 2024/10/28 ごろに仕様が変わり、defaultMaximumTruncationLengthの書き換えだけでは、動作しなくなりましたので修正版を公開しています。 デフォルトの設定では型の情報量が増えると型が省略される VSCode では、TypeScript を利用して開発する際に、ホバーすると以下のように型ヒントを表示することができます。 しかし、デフォルトの設定のままでは、下記のようにプロパティ数が多くなると型ヒントが省略されてしまいます。 上記の解決方法を以下で説明していこうと思います。 tsconfig.json に noErrorTruncation:true を追加する
[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%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttps%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2020%2F06%2Fvscode-2020-eyecatch-1200x630-1.png)
株式会社ゆめみの 23 卒 Advent Calendar 2023の4日目の内容です。 2022年のはじめに自分の開発環境を紹介する記事を投稿したのですが、思いのほか読んでいただいているので2023年度版を作成しました。 今回は拡張機能編です。キーバインドなどは後日公開します。 今年1年間で JetBrains 製品や、neovim を使ってみたりしましたが、紆余曲折あり現在は VSCode に落ち着いたのでいつかその辺りも紹介出来ればと思います。 VSCode 関連記事 下記にキーバインドや設定周りの記事リンクを追加していきます 汎用的な拡張機能 BracketLens 右括弧の左側にスコープの情報が表示されるようになる。 ChangeCase 選択範囲のテキストの case を変更することが出来る CodeSpellChecker スペルチェッカー EditorConfig .edi
ファイル比較 VSCodeのエクスプローラで、ファイル２つを選択して右クリックメニューから「選択項目を比較」で比較することができます。 また右クリックで、「比較対象の選択」をした後に「選択項目を比較」でも比較することも可能です。 VSCodeのSnippetの使い方 VSCodeのSnippetも便利です。似たような構造のクラスを実装する場合などや、プロジェクト共通で使いがちな書き方というものをSnippetに登録して、効率化することができます。 また、変数を持たせておくこともできます。この場合、Snippetを呼び出した後に変数部分にカーソルがあたるので、そこで変数部分をタイピングできます。 詳細は以下のリンクをご覧ください。 Visual Studio Codeに定型文（スニペット）を登録する方法 VSCodeのUser Snippetを活用しよう！ また後述するSnippet Gen
GitHub Codespacesをちょっと試した。 初期導入時にハマりどころも多いけど、真面目に設定しておけば、普通にCodespacesの環境だけで開発することは十分できそうだなと感じた。リポジトリ単位で環境を用意するのが基本で、多くのリポジトリに対して毎日のようにレビューをしたりPull Requestを出したり、みたいな開発フローには綺麗にはまらないと思うけど、普通に仕事で単一のリポジトリに対してだけ作業する用途であれば上手くはまると思う。Zoomで会議しながら重い処理を実行していても影響が無いのは良かった。Zoomで会議しながら重い処理を回すべきではないという意見もある。 Codespacesの利用の流れ Codepsacesを利用するときの流れについて。まず、予め .devcontainer/devcontainer.json を配置したリポジトリを用意しておく。Codespa
※GitHub Copilotが長いコードを提案してきた時、ショートカットキーの「単語単位で受け入れる」を使用すると便利です。 ※ インライン候補をトリガーするとは提案が表示される場所ならばどこでも GitHub Copilot が動きます。 例えば、提案が表示される場所からカーソルが動かしてしまっても、カーソルを元の場所に戻してトリガーコマンドを使うと提案が表示されます。 ※ インライン候補をトリガーするはデフォルトのキー設定では動きません。：Windows で確認 自分でキーボードショートカットキーを設定する必要があります。（これは自分の環境だけかもしれません。） 導入後（課金後） 導入後に何をしていいのか？何が出来るのかがよくわからなかったので調べてみた。 環境 Windows10 GitHub Copilot (導入 1年契約 or 1月契約) VSCode VSCode Insi
Intro OpenAI の API を用いて、長年の課題だった文書校正を VSCode 上で実現するプラグインを修作したところ、思った以上の成果だった。 文章校正と誤字脱字検出 執筆を補助するツールは多々開発されているが、基本は形態素解析を用いた品詞分析の延長で行うものが多かった。 よくある「助詞の連続」、「漢字の開き閉じ」、「一文の長さ」などは、ある程度の精度で検出可能ではあるが、結局執筆時に一番検出して欲しいのは「誤字脱字」だ。 文体をどんなに揃えたところで、誤字脱字があるとやはりクオリティが低く感じるし、そこさえ抑えられていれば、他のスタイル統一は訓練である程度なんとかなる。 英語のスペルチェックはかなり進んでいるが、日本語においてはそこまで革新的なものが見当たらない。あらゆるツールを試したが、結局満足のいく精度が出る誤字脱字検出は「Word の校正機能」しかなかった。 そこで筆者
これ何なの？ もともと私が社内メンバー向けに書いていたドキュメントで、 UIパーツ毎のアクセシビリティを考慮したHTMLコーディングTips集です。 社内のドキュメント置き場に眠っていたものですが、知見として社外にも共有出来る内容だなと思ったのと、アクセシビリティをこれからやっていこう！という方の参考になればと思い共有させて頂きます。 ※そもそもアクセシビリティって何なの？という方は、ウェブアクセシビリティ基盤委員会のサイトを見てみてください🔍 目次 おすすめVSCode拡張機能 🕹ボタン 📷 画像 🔍 ナビゲーション 💻 フォーム おすすめVSCode拡張機能 axe Accessibility Linter をインストールしておくとimgタグのalt忘れなど警告が表示されるので、アクセシブルでない書き方を未然に防げるので便利です！ 🕹ボタン buttun タグを使いましょう
Do you know Ruby's official debugger ruby/debug provides out-of-box integration with VSCode? If you haven't tried it yet or having difficulty making it work, I hope this short post will help you set it up. Basic Setup Install the VSCode rdbg extension in VSCode Create the launch.json file Click Run and Debug button on the left side Click create a launch.json file - this is quite small and under To
去年8年ぶりに vimrc を書き直した時はLSPの体験があんまりよくなくてLSPなしでNeovimを使い続けていたのだが、様々な言語のOSSをメンテする都合で用途に応じてIntelliJとVSCodeとNeovimの三刀流で暮らしていた結果、可能ならNeovimに寄せたいけどそれならLSPを使いたいなということになり、今回LSPの所を真面目に設定し直して、かなり良い体験になっている。 正直Neovimの設定はVSCodeのそれに比べたら面倒なんじゃないかという印象がありサボっていた節があるが、実際にやってみるとVSCodeと同程度に簡単に済む方法もあったので紹介したい。 何故Neovimなのか LSPの話の前に、タイトルだけ見た人がそもそも単にVSCode使えばいいじゃんと言いそうなので、どうしてIntelliJやVSCodeではなくNeovimに揃えようと思ったのかについて書いておく。
はじめに Pythonはコードが汚くなりがち（個人的にそう思う） そんなPythonくんを快適に書くための設定を紹介します。 拡張機能編 ここでは Pythonを書きやすくするため の拡張機能を紹介していきます。 1. Error Lens before 「コード書いたけど、なんか波線出てるよ💦」 記述に問題があった場合、デフォルトでは波線が表示されるだけ。。。 after Error Lensくんを入れることによって 波線だけでなくエディタに直接表示される。 はい、有能〜 2. indent-rainbow before Pythonくんは インデントでスコープを認識している。 for の f から下に線が伸びてるけど、ちょっと見にくいなぁ after 色が付いてちょっと見やすくなった！ 3. Trailing Space before 一見、普通に見えるコード after 末尾にある
年々とelispのメンテが雑になってきて、ついにはemacsclientがemacs serverにうまく接続できなくなってしまい、とはいえ普通にスタンドアロンで立ち上げると動くのでログも取れずに原因究明が難しく、もはやこのままでは引退も近いかと思われたので、悪あがきでVSCodeに手を出してみることにした。 Perl Mongerの端くれとして、まずはPerlが書ける環境を整えようと、とりあえず最近ちょっと話題になっていたPerlNavigatorをVSCodeと共にインストールしてみた。 github.com ところがこいつがすごい。 シンタックスハイライトをいいかんじにやってくれるのはもちろんのこと、emacsではperldoc -lmした結果に飛べるelispを仕込んでおいた（たぶんid:sugyanさんあたりのelispから拝借したきがする）のを使っていたが、PerlNaviga
主にフロントエンドを開発している、ぼくがかんがえたさいきょうのVSCodeを紹介します。 便利な設定, キーバインド集だけでも参考にしていただけると幸いです。 2023年度版 拡張機能 まずは言語問わず使えるものを紹介していきます。 Japanese Language Pack for Visual Studio Code vscodeを日本語にする。 Path Intellisense ファイル名を autocompletes します。 GitLens — Git supercharged commit単位でのファイル比較、最新のcommit内容表示 REST Client vscode上でgetやpostなどのHTTPリクエストを送信できます。 また、GraphQLにも対応しているみたいです。 Todo+ コメントにToDo: を入れるとToDoを作成することができる。 例外処理を入れ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
