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という章を参考にしています。 注意 これから紹介する機能は言語によって使えたり、使えなかったりします。 今から紹介する機能のデモはすべてPythonで行おうかと思ったのですが、上記の理由からPythonではサポートされていない機能についてはJavaScriptやC++で代用しました。 デバッグで使える便利な機能 ログポイント機能 行を指定しログポイントを追加すると、そ
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 の統合ターミナルではビープ音の代わりにベルマークを表示させることができます。 ま
VS Codeのおすすめプラグイン「Jumpy」 / 開発者向けブログ・イベント | GMO Developers
はじめに こんにちは、GMOインターネット株式会社の斉藤です。 以前にブログ記事にも書いたのですが、昨年EmacsからVS Codeに乗り換えました。開発環境をまるっと乗り換えたわけですからそれはもう大きな変化だったわけです。 今現在、私自身の開発環境はVS Code一択になって、Emacsは完全に使わなくなってしまいました。良いエディタなのは間違いありませんが、ちょっと寂しいですね。私は最近GMOの仕事ではPHP, JavaScriptなどを、プライベートではGo, Flutter(Dart), Next.jsあたりを触っています。特に後者のような新しい言語やフレームワークへの対応で、EmacsはVS Codeには確実にかないません。ユーザー数が違うからです。 そして以前のブログでは、Emacsからの乗り換えに当たって導入したVS Codeのプラグインについて紹介したのですが、今回は最近
VSCodeのMDN reference"のみ"非表示にする - Qiita
2021年2月リリースのバージョン1.54でMDNのreferencesを非表示にする設定が追加された。 hoverはtrueのままMDN referenceのみを非表示にできるため、 他に使っている拡張機能を邪魔せずに使える。これを待っていた。 今までホバーしたときの表示が邪魔に感じたところがこれで快適にcssが書けるようになります。 設定 command + , 以下をそれぞれ検索する チェックを全て外したら完了です。 引用 Hovers in CSS/LESS/SCSS and HTML# You can now fine-tune the content of hovers in HTML and CSS to: Not show the documentation from MDN Not show the link to the MDN page Use the setting
DockerとVS Code Remote Containersを用いたフロントエンド開発環境構築
背景 プロジェクトの新規立ち上げや、新しくプロジェクトに新規メンバーが入った場合に環境構築に手間取ることが多いため、Docker＋VS Code Remote Containersのフロントエンドアプリケーション開発環境構築ができるリポジトリを作成しました。 本記事では上記リポジトリを用いた環境構築手順とCreate React Appによる簡単なアプリ開発例を説明します。 また、上記リポジトリをgit cloneしなくても一から同じ環境を構築できるように、リポジトリに含まれるファイル群についてもそれぞれ説明します。 本記事の対象はフロントエンドですが、バックエンドのプロジェクト構築も基本的には同じ知識で構築できるはずです。 前提条件 本記事では以下を前提条件とします。ただし、WindowsやLinuxでも基本的には問題ないはずです。 macOS Monterey Visual Studi
StackOverflowからのコピペをやめろ。今すぐにだ。 - Qiita
Original article:https://dev.to/dotnetsafer/rip-copy-and-paste-from-stackoverflow-trojan-source-solution-4p8f その昔コピペできない文章というものがありました。 実際は単にフォントを変えているだけというものですが、人間の目に見える文字と実際の文字が異なることを利用した攻撃の一種と見ることもできます。 さて、最近になって似たような攻撃に関する論文が公開されました。 人間には見えない文字を織り交ぜることによって、一見問題ないコードが実は脆弱になってしまうというものです。 ただ論文は堅苦しいうえに長くて読むのがつらいので、具体的に何がどうなのかよくわかりません。 平易に解説している記事があったので紹介してみます。 以下はDotnetsafer( Twitter / GitHub / Web
React で展開された HTML 要素から vscode の生成元コードに飛ぶ 方法
自分が欲しかったから作ったシリーズ 説明しづらいので下記の動画を見たほうが速いです。 Shift を押している間だけオーバレイが有効になり、要素名をクリックすると vscode の該当行に飛びます。 今のところ vite + react のみの対応ですが、仕組み上、あらゆる UI フレームワークに適応可能です。 何が起きているか TypeScript transformer の仕組みで *.tsx の jsx 要素に data-sj-path="vscode://file/..." を付与する TypeScript AST は sourcemap 用の情報を持っている Node の parent を探索し、直近の関数コンポーネント名を探す Shift を押している間、 マウスでホバーされた要素が data-sj-path を持っているならオーバレイを表示 オーバレイ中の要素名をクリックした
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ExtractionCssSelector - Visual Studio Marketplace
VScodeの設定（settings.json）まとめ【2023年4月更新】
