【VSCode】試行錯誤の末たどりついた設定管理術
みなさんは VSCode の設定をどのように管理していますか？ この記事では、プロファイル機能を使って VSCode の設定をきれいに保つ方法を紹介します。 結論 私は VSCode の設定を以下の3つに分類して管理しています。 ① どのワークスペースでも有効化したい設定 → 既定（Default）のプロファイルで管理する ② 特定のワークスペースにおいて、チームで合意した設定 → 各ワークスペースの.vscode/settings.jsonで管理する ③ 特定のワークスペースにおいて、個人的に有効化したい設定 → 各プロファイルで管理する 前提 VSCode の設定には異なる2つのスコープが用意されています。 ユーザー設定 ワークスペース設定 簡単に言うと、ユーザー設定はグローバルに適用される設定、ワークスペース設定は特定のフォルダにおいてのみ適用される設定です。 ワークスペース設定はプ
Cursorを1年弱触っているエンジニアの最近の使い方｜ニケちゃん
こんにちは、ニケです。 皆さん、Cursor 使っていますでしょうか。 私は去年の10月末から使い続けているのであと一ヶ月で1年が経過します。時間が経つのは早いですね。 前回書いた記事（↓）から半年経ち、開発の仕方が少しアップデートされたので改めて記事にしようと思います。 ちなみにこちらの記事ではブラウザ版のClaudeも紹介していますが、Claude-3.5-SonnetがCursorで利用できるようになってからはあまり使っていません。設計の壁打ちとかでたまに使ったりするくらい。 そのため、この記事ではCursorにフォーカスを当てて紹介していきます（最後に少しだけ他に使用しているAIツールを共有します）。 なお、役割によって用途が変わってくると思うので、予め私の属性を提示しておきます。 仕様を考えたりコード書くことがメインの仕事 仕事以外でも暇なときはコードを書いている 0 → 1 で
【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
Python + VSCode の環境構築 20240604
作業メモ。モダン Python 速習。 AI 周りのツールを動かしていたら TypeScript だけでやるには無理が出てきたので、久しぶりに Python の環境構築をする。 具体的には TestGen LLM を動かしたい。 Python はたまに触るけど、基本 2.x 時代の知識しかない。 基本的にこの記事を読みながら、細かいアレンジをしている。 追記 rye が ruff と pytest を同梱してるので rye fmt, rye check, rye test で良かった uvicorn を叩くより、 fastapi-cli を使って起動したほうが良さそうので変更 基本方針: Rye に全部任せる 良く出来てると噂に聞いたので、 rye に任せる。 自分が Python が苦手な点は pip を下手に使うと環境が汚れていく点で、基本的に rye で閉じて管理させる。システムの
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のターミナルで接続して操作することは、開発環境としてよくあることだと思います。 これと同じことをWebブラウザ版のVSCodeでも実現する、すなわちWeb版VSCodeが同一Webブラウザ上にWebAssembly化したDockerコンテナを起動し、Web版VSCodeからローカルマシンとして接続し利用できる、実験的実装を実現したVSCodeの拡張機能「vscode-container-wasm」が登場しました。 V
【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
VS Code Prettier拡張でPretteir v2/v3両対応を試みる
この拡張には現在 (2023/07/30 9.19.0 時点) はまだPrettier v2が同梱されている。同梱をv3に変更するPRはまだマージされていない（と書いてたらさっきマージされた）。 ただ、この拡張は対象ワークスペースのプロジェクトのローカルにprettierがインストールされていればそっちを使ってくれるので、この拡張の変更のリリースを待たずとも、単にプロジェクトでprettierをアップデートすればVS Codeでもv3が使われて期待通り動くはず。 が、結果は予想に反して、v3で動いているはずなのにtrailingCommaがallではなく、v2相当のes5で動いてしまってた。あれ？ 原因は、この拡張は拡張側でPrettierのデフォルト設定を独自に持ってしまっていて、プロジェクトに設定ファイルprettierrcが無い場合は拡張側のデフォルト設定が使われるから。Pretti
君はVS Codeのデバッグの知られざる機能について知っているか - Qiita
はじめに こんにちは、kenです。 GWに「暇だな～～、こんな日はVS Codeの公式ドキュメントを読むか！w」と思って何気なく読んでたらデバッグに関して知らない機能がいくつかあったので、今回はそれをご紹介したいと思います。 おそらく今から紹介する機能はあまり知られてないと思います。もし全部知ってたらVS Code完全理解者なので誇ってください。（！？） 以下に記載する内容はVS Codeの公式ドキュメントのDebuggingという章を参考にしています。 注意 デバッグで使える便利な機能 ログポイント機能 行を指定しログポイントを追加すると、その行を訪れたタイミングでログを出力できます。 もちろんログ内には{式}という書式を使えば式も含めることもできます。 既存のコードに修正を加えることなく、ログを出力できるのは嬉しいですね！！ これで 「プリントデバッグしたprint行を消し忘れてPRあ
VSCodeで特定のnpm-scriptsを非表示にする方法
はじめに リポジトリに複数のpackage.jsonが存在する場合、VSCodeの「NPMスクリプト」の項目が長くなってしまいます。 普段の開発ではVSCode上からnpm-scriptsを実行することが多いので、実行したいコマンドが見つけづらいと地味に大変です。 あまり使わないコマンドは非表示にしておきたいという気持ちがあったのですが調べてもあまり情報が無く苦戦したので記事として残しておこうと思います。 指定の方法は大まかに分けて2種類 VSCodeで特定のnpm-scriptsを非表示にする方法は大きく分けて下記の2種類が存在します。 npm.scriptExplorerExcludeでスクリプト名を無視する方法 npm.excludeでディレクトリごと無視する方法 どちらも.vscode/settings.jsonにフィールドを追加することで指定が可能です。 スクリプト名基準での除外
VSCodeでフォルダ丸ごと比較する
やりたいことは下記になります。 フォルダを丸ごと比較したい 不要なファイルは比較しない ファイル単体であればデフォルトの機能で比較できますが、フォルダにあるファイルを丸ごと比較するには手間がかかってしまうのでCompare Foldersという拡張機能を利用します。 Compare Folders Compare Foldersは、フォルダごと比較ができるようになるVSCodeの拡張機能です。 インストールは下記のページ、もしくはVSCodeの拡張機能から検索してインストールできます。 Compare Folders - Visual Studio Marketplace Extension for Visual Studio Code - Compare folders by contents, present the files that have differences and di
PrettierでHTMLの空要素に"/"が入る(VS Code使用)
<meta charset="UTF-8" /> <img src="xxx.jpg" alt="xxx" /> なぜHTMLの空要素の最後に"/"が入るのか？ Prettierのissue "Add an option to prefer void tags over self closing tags. #5246"、 ざっと読んだところこの仕様の理由は XML(XHTML)との互換性 読みやすさ などであり、設定で変更することはできない。 また別のissue"The formatting of self-closing tags in HTML5 #5641"によると、HTMLのフォーマッティングの開発時にそう決まったからだそう。 そして、オプションの理念ページには Prettier has a few options because of history. But we won’t
Bash シェルスクリプトのデバッグや入力補完ができる Visual Studio Code 拡張機能（WSL2,mac,Linux対応） - Qiita
Bash シェルスクリプトのデバッグや入力補完ができる Visual Studio Code 拡張機能（WSL2,mac,Linux対応）ShellScriptBashdebugVSCodeWSL2 シェルスクリプトにも統合開発環境を Bash のシェルスクリプト (shell script) は Linux はもちろん mac や Windows でも動作します。 シェルスクリプトの文法にはかなりクセがありますが、仕様が安定しているために移植する必要がないという大きなメリットがあります。ただ、一般的なプログラミング言語と異なり、デバッガーが使えないため期待した動作と異なるときに動きが分かりづらいという弱点がありました。 しかし、それはもう過去の話です。 Visual Studio Code の Bash Debug 拡張機能を使えば、シェルスクリプトでもステップ実行や環境変数の値のウォッ
Visual Studio Code 等のアプリで command + [ (open bracket) がmacOSに吸われるニッチなバグの解決 - 学習する天然ニューラルネット
状況 直し方 先人たちの記録と解決しない事象 推測される原因 ついでに発見したバグ 状況 Macを初期化して再セットアップしたら、VSCodeで command + [ (open bracket, left bracketとも) が効かなくなった。 プログラミングしているときにこのショートカットを多用しているのでめちゃくちゃ困る。indentができなくなった！しかもshift + command + [のようなショートカットもすべて効かなくて困った。タブ移動もできねぇ〜〜〜〜！ しかもよくよく確かめるとElectron製のアプリ全般で効かなくなってる。これは最悪である(一部は反応するけど意図した挙動でないことになった)。 もし、これを読んでいるあなたもお困りならば次に進もう。 自分の知る限り一番シンプルな解決策をここで提供する。 このバグが起こりうる環境等については後で述べる。 直し方
VSCode のアップデートで「コピー先のフォルダーにファイルを作成中にエラーが発生しました:アクセスが拒否されました。.」のエラー
現象 VSCode のアップデートで エラー ⚠️アクションを選択してください PATH\TO\AppData\Local\Programs\Microsoft VSCode\unins000.exe コピー先のフォルダーにファイルを作成中にエラーが発生しました: アクセスが拒否されました。. → 再試行(T) → このファイルをスキップ(S) (推奨されません) → インストールをキャンセル のエラーが発生するようになったので対処。 エラー画面 原因・対処 Windows の権限の問題のようです。 VSCode を管理者権限で実行すればひとまず大丈夫なようですが、更新の度に一度 VSCode を終了 → 管理者権限で起動 の手順を行うのは手間なので、フォルダーの権限を変更します。 PATH\TO\AppData\Local\Programs\ まで移動Microsoft VSCodeフォ
【VSCode】開発環境を自動で立ち上げる
突然ですが世の中には2種類のエンジニアがいます。 開発環境をずっと立ち上げっぱなしにするエンジニアと毎回落とすエンジニアです。 自分を含む毎回落とすエンジニアにとって、開発環境を立ち上げる度に複数のターミナルを開き、それぞれでコマンドをたくさん打たないといけないのは苦痛です🥺 そこでこの記事ではVSCodeでプロジェクトを開いたときに開発環境を自動で立ち上げる方法をご紹介します！ おまけで紹介するAlfredまで設定するとコマンド一発で開発環境が立ち上がるようになり、こんな感じになります！ ではいってみましょう！ 対象読者 開発環境を毎回落とすエンジニア VSCodeを使っている 開発環境を立ち上げるためのコマンドがたくさんあって毎回打つのがめんどくさい 環境 VSCode: 1.66.0 macOS Monterey Hello Custom Task! VSCodeでプロジェクトを開
【ネタ】VS Code の統合ターミナルはビープ音は鳴らないけどベルマークは出せるよ? | DevelopersIO
テスト終了時に音を鳴らしたかった それとは関係ないんですが、ベル文字って知っていますか？ ベル文字を使用してターミナルで printf '\a' とか echo -ne '\007' と入力すれば音を鳴らすことができます。 これを利用し、以下のように VS Code の統合ターミナルでテストを実行し、終了時にビープ音鳴らして通知しようとしたところ音が鳴りませんでした。 yarn test; printf '\a' 同じようなことで悩んでいる issue を発見し、どうやら現時点で VS Code の統合ターミナルでは音が出ないようです。 https://github.com/microsoft/vscode/issues/47711 ベルマークは出せるよ その代わり(?)なのかは分かりませんが、VS Code の統合ターミナルではビープ音の代わりにベルマークを表示させることができます。 ま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
そこまでやる？ 170万DLの人気「Visual Studio Code」拡張機能に巧緻なマルウェア／「Ethereum」のスマートコントラクト言語「Solidity」の開発が楽になるとの触れ込み【やじうまの杜】
ExtractionCssSelector - Visual Studio Marketplace
VScodeの設定（settings.json）まとめ【2023年4月更新】
開発者向けブログ・イベント | GMO Developers
