TypeScript19Python11React11Next.js10PHP7TailwindCSS5Laravel5C#4JavaScript4Game Development4Expo4React Native4Tailwind4Vite4Supabase4Rust3Web Development3Flutter3API3Meta-Prompt3SvelteKit3SwiftUI3Swift3WordPress3Angular2Blockchain2html2Unity2FastAPI2GraphQL2Alpine.js2Accessibility2ionic2cordova2angular2Java2Vue.js2Zod2Zustand2NestJs2Node2NuxtJS2Vue2Function2Svelte2Terraform2Vivado2FPGA2Node.js2AL1B

「Cursorのタイムマシンビジネスで大儲けや〜」みたいなネタを見て、アッそういえばフォークエディタ作ってみたいんだったと思い出してソースからビルドしてみることにした。 VSCodeのビルドは思ったより難しくなかった。LinuxにElectronアプリを作れる環境を整えただけで、これはこれですごい もっと特殊な魔改造Chromium+Cコンパイラ最適化とかしてるのかと思い込んでいた。 ただ、codeコマンドはRustで書いてあった。これは初めて知った。 カスタムビルドを起動できるようになったので、コアコンポーネントをいじって壊してみる。 layout.tsなどを起点にどのファイルがどの機能を実装しているのかを把握した。 これでVSCode内部をどこでも変更できるようになった。いったん満足した。 Copilot Chat次はついでにCopilot Chat拡張のコードを読んでみる。 exte

みなさんは VSCode の設定をどのように管理していますか？ この記事では、プロファイル機能を使って VSCode の設定をきれいに保つ方法を紹介します。 結論 私は VSCode の設定を以下の3つに分類して管理しています。 ① どのワークスペースでも有効化したい設定 → 既定（Default）のプロファイルで管理する ② 特定のワークスペースにおいて、チームで合意した設定 → 各ワークスペースの.vscode/settings.jsonで管理する ③ 特定のワークスペースにおいて、個人的に有効化したい設定 → 各プロファイルで管理する 前提 VSCode の設定には異なる2つのスコープが用意されています。 ユーザー設定 ワークスペース設定 簡単に言うと、ユーザー設定はグローバルに適用される設定、ワークスペース設定は特定のフォルダにおいてのみ適用される設定です。 ワークスペース設定はプ

こんにちは、ニケです。 皆さん、Cursor 使っていますでしょうか。 私は去年の10月末から使い続けているのであと一ヶ月で1年が経過します。時間が経つのは早いですね。 前回書いた記事（↓）から半年経ち、開発の仕方が少しアップデートされたので改めて記事にしようと思います。 ちなみにこちらの記事ではブラウザ版のClaudeも紹介していますが、Claude-3.5-SonnetがCursorで利用できるようになってからはあまり使っていません。設計の壁打ちとかでたまに使ったりするくらい。 そのため、この記事ではCursorにフォーカスを当てて紹介していきます（最後に少しだけ他に使用しているAIツールを共有します）。 なお、役割によって用途が変わってくると思うので、予め私の属性を提示しておきます。 仕様を考えたりコード書くことがメインの仕事 仕事以外でも暇なときはコードを書いている 0 → 1 で

はじめに 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 速習。 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」登場 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でコーディングをするとき、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

この拡張には現在 (2023/07/30 9.19.0 時点) はまだPrettier v2が同梱されている。同梱をv3に変更するPRはまだマージされていない（と書いてたらさっきマージされた）。 ただ、この拡張は対象ワークスペースのプロジェクトのローカルにprettierがインストールされていればそっちを使ってくれるので、この拡張の変更のリリースを待たずとも、単にプロジェクトでprettierをアップデートすればVS Codeでもv3が使われて期待通り動くはず。 が、結果は予想に反して、v3で動いているはずなのにtrailingCommaがallではなく、v2相当のes5で動いてしまってた。あれ？ 原因は、この拡張は拡張側でPrettierのデフォルト設定を独自に持ってしまっていて、プロジェクトに設定ファイルprettierrcが無い場合は拡張側のデフォルト設定が使われるから。Pretti

はじめに こんにちは、kenです。 GWに「暇だな～～、こんな日はVS Codeの公式ドキュメントを読むか！w」と思って何気なく読んでたらデバッグに関して知らない機能がいくつかあったので、今回はそれをご紹介したいと思います。 おそらく今から紹介する機能はあまり知られてないと思います。もし全部知ってたらVS Code完全理解者なので誇ってください。（！？） 以下に記載する内容はVS Codeの公式ドキュメントのDebuggingという章を参考にしています。 注意 デバッグで使える便利な機能 ログポイント機能 行を指定しログポイントを追加すると、その行を訪れたタイミングでログを出力できます。 もちろんログ内には{式}という書式を使えば式も含めることもできます。 既存のコードに修正を加えることなく、ログを出力できるのは嬉しいですね！！ これで 「プリントデバッグしたprint行を消し忘れてPRあ

はじめに リポジトリに複数のpackage.jsonが存在する場合、VSCodeの「NPMスクリプト」の項目が長くなってしまいます。 普段の開発ではVSCode上からnpm-scriptsを実行することが多いので、実行したいコマンドが見つけづらいと地味に大変です。 あまり使わないコマンドは非表示にしておきたいという気持ちがあったのですが調べてもあまり情報が無く苦戦したので記事として残しておこうと思います。 指定の方法は大まかに分けて2種類 VSCodeで特定のnpm-scriptsを非表示にする方法は大きく分けて下記の2種類が存在します。 npm.scriptExplorerExcludeでスクリプト名を無視する方法 npm.excludeでディレクトリごと無視する方法 どちらも.vscode/settings.jsonにフィールドを追加することで指定が可能です。 スクリプト名基準での除外

やりたいことは下記になります。 フォルダを丸ごと比較したい 不要なファイルは比較しない ファイル単体であればデフォルトの機能で比較できますが、フォルダにあるファイルを丸ごと比較するには手間がかかってしまうので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

<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

はじめに VScodeを愛用していくうちに設定ファイル（settings.json）がだいぶ煩雑になってきたので、それらを見直しがてらZennに記事としてまとめてみました。 主にwebサイト制作者向けの内容になっております。 どなたかの参考になれば幸いです！ settings.jsonのコードの中身だけを見たい方はこちらへどうぞ！

Bash シェルスクリプトのデバッグや入力補完ができる Visual Studio Code 拡張機能（WSL2,mac,Linux対応）ShellScriptBashdebugVSCodeWSL2 シェルスクリプトにも統合開発環境を Bash のシェルスクリプト (shell script) は Linux はもちろん mac や Windows でも動作します。 シェルスクリプトの文法にはかなりクセがありますが、仕様が安定しているために移植する必要がないという大きなメリットがあります。ただ、一般的なプログラミング言語と異なり、デバッガーが使えないため期待した動作と異なるときに動きが分かりづらいという弱点がありました。 しかし、それはもう過去の話です。 Visual Studio Code の Bash Debug 拡張機能を使えば、シェルスクリプトでもステップ実行や環境変数の値のウォッ

状況 直し方 先人たちの記録と解決しない事象 推測される原因 ついでに発見したバグ 状況 Macを初期化して再セットアップしたら、VSCodeで command + [ (open bracket, left bracketとも) が効かなくなった。 プログラミングしているときにこのショートカットを多用しているのでめちゃくちゃ困る。indentができなくなった！しかもshift + command + [のようなショートカットもすべて効かなくて困った。タブ移動もできねぇ〜〜〜〜！ しかもよくよく確かめるとElectron製のアプリ全般で効かなくなってる。これは最悪である(一部は反応するけど意図した挙動でないことになった)。 もし、これを読んでいるあなたもお困りならば次に進もう。 自分の知る限り一番シンプルな解決策をここで提供する。 このバグが起こりうる環境等については後で述べる。 直し方

現象 VSCode のアップデートで エラー ⚠️アクションを選択してください PATH\TO\AppData\Local\Programs\Microsoft VSCode\unins000.exe コピー先のフォルダーにファイルを作成中にエラーが発生しました: アクセスが拒否されました。. → 再試行(T) → このファイルをスキップ(S) (推奨されません) → インストールをキャンセル のエラーが発生するようになったので対処。 エラー画面 原因・対処 Windows の権限の問題のようです。 VSCode を管理者権限で実行すればひとまず大丈夫なようですが、更新の度に一度 VSCode を終了 → 管理者権限で起動 の手順を行うのは手間なので、フォルダーの権限を変更します。 PATH\TO\AppData\Local\Programs\ まで移動Microsoft VSCodeフォ

突然ですが世の中には2種類のエンジニアがいます。 開発環境をずっと立ち上げっぱなしにするエンジニアと毎回落とすエンジニアです。 自分を含む毎回落とすエンジニアにとって、開発環境を立ち上げる度に複数のターミナルを開き、それぞれでコマンドをたくさん打たないといけないのは苦痛です🥺 そこでこの記事ではVSCodeでプロジェクトを開いたときに開発環境を自動で立ち上げる方法をご紹介します！ おまけで紹介するAlfredまで設定するとコマンド一発で開発環境が立ち上がるようになり、こんな感じになります！ ではいってみましょう！ 対象読者 開発環境を毎回落とすエンジニア VSCodeを使っている 開発環境を立ち上げるためのコマンドがたくさんあって毎回打つのがめんどくさい 環境 VSCode: 1.66.0 macOS Monterey Hello Custom Task! VSCodeでプロジェクトを開