もし世界が消滅して Visual Studio Code の設定が失われてしまった時に、この記事を見ればまた VSCode のカスタマイズが復元できる。 ここでは Visual Studio Code の見た目に影響するものについてのみ 取り上げる。 スクリーンショット Editor Terminal Zen Mode 環境 Visual Studio Code バージョン: 1.94.2 (user setup) コミット: 384ff7382de624fb94dbaf6da11977bba1ecd427 日付: 2024-10-09T16:08:44.566Z Electron: 30.5.1 ElectronBuildId: 10262041 Chromium: 124.0.6367.243 Node.js: 20.16.0 V8: 12.4.254.20-electron.0 OS

はじめに 今回の記事では、主にバックエンド(PythonとTypeScript中心)を開発している私が使っているVSCodeの拡張機能を紹介する。 拡張機能 基本的にどのような言語でも対応できる拡張機能を紹介する。 Japanese Language Pack for Visual Studio Code VSCodeを日本語にできる。 REST Client VSCode上でgetやpostなどのHTTPリクエストを送信できる。GraphQLにも対応している。 GitLens — Git supercharged commit単位でファイルを比較したり、最新のcommitの内容を表示したりできる。 DeepL for Visual Studio Code VSCode上にて日本語から英語に翻訳できる。翻訳の精度が非常に高い。 JSDoc Generator JavaScriptのドキュメ

はじめに 突然ですが、よく使うコードはどのように管理していますか？ 私はGitHubで管理していたのですが、今回VSCodeの拡張機能Gistを使って見たところ、サクッと参照ができて、かなり使い心地が良かったのでまとめておきます。 Gistとは VSCode上でGitHub Gistを連携させることができ、手軽にファイルの作成、編集、削除が可能になる拡張機能です。 導入手順 GitHub Gistの登録 GitHub上でアクセストークンの取得 拡張機能のインストール アクセストークンの設定 1. GitHub Gistの登録 2. GitHub上でアクセストークンの取得 ExpirationをNo expirationに設定します。 scopeのgistを許可して作成です。 トークンが発行されるので控えておきましょう。 3. 拡張機能のインストール VSCode上で【Gist】と検索すると

はじめに Pythonはコードが汚くなりがち（個人的にそう思う） そんなPythonくんを快適に書くための設定を紹介します。 拡張機能編 ここでは Pythonを書きやすくするため の拡張機能を紹介していきます。 1. Error Lens before 「コード書いたけど、なんか波線出てるよ💦」 記述に問題があった場合、デフォルトでは波線が表示されるだけ。。。 after Error Lensくんを入れることによって 波線だけでなくエディタに直接表示される。 はい、有能〜 2. indent-rainbow before Pythonくんは インデントでスコープを認識している。 for の f から下に線が伸びてるけど、ちょっと見にくいなぁ after 色が付いてちょっと見やすくなった！ 3. Trailing Space before 一見、普通に見えるコード after 末尾にある

.devcontainer/postCreateCommand.sh にコマンドを列記する .devcontainer/postCreateCommand.sh を作成してコマンドを列記した上で postCreateCommand に指定する

VSCodeで Import "***" could not be resolved Pylance(reportMissingImports) が出るときの対処法PythonVSCode いろんな環境で同じエラーを吐いていたので、備忘録として残す。How to solve Pylance 'missing imports' in vscode を参考にした。 私の場合、venv で sandbox という仮想環境を作成し、そこにインストールした airflow をインポートする際に標題のエラーが発生していた。インストール先にパスが通っていないことが問題らしいので、追加してやればよい。 まず該当するライブラリの場所を確認する。

概要 Docker 環境下で Poetry ＋ VS Code + Pylance にて開発を進めている時に、Pylance の import のパス解決設定でハマったので備忘録として残しておきます。 設定方法 （必要であればだが、非推奨）仮想環境を無効化

みなさんこんにちは、電通国際情報サービス（ISID）Xイノベーション本部ソフトウェアデザインセンターの佐藤太一です。 この記事では、VS CodeのDev Containerを使ってOSに依存しないPythonの開発環境を構築する方法をステップバイステップで丁寧に説明します。 VS Codeの利用経験があり、またPythonによるアプリケーション開発に興味のある方を想定読者として記述しています。Pythonの初心者から中級者向けを意識して書いていますので、意図して冗長な説明をしています。 すでにPythonによるアプリケーション開発に十分に詳しい方は、まずはまとめだけ読んでみてください。私自身それほどPythonのエコシステムに詳しいわけではありませんので、知識の抜け漏れは恐らくあるでしょう。そういった事に気が付いたら、XなどのSNSでこの記事のURLを付けてコメントをしていただけると幸い

WEB開発において、複数人がサーバーにSSHでリモート接続した状態で作業をすることは、よくあるケースです。 開発サーバーのリソースを皆で利用しているため、過度な負荷をかけてしまうと、レスポンスが悪くなり、他のメンバーにも迷惑をかけてしまう恐れがあります。 特に、VSCodeを使用している人は、「ファイル監視」機能が入り、しらず知らずの内にサーバーに負荷をかけ、結果的にハングアップ！といったケースが実際にありました（ほろ苦いおもひで） (当時の自分。サーバーに高負荷がかかったことが話題になっている最中)「俺の訳がない(ｷﾘｯ 。だってエディタ(VSCode)を使ってただけだもん」→ 完全にこいつが原因 ということで、メンバーの方からサーバー環境に負荷をかけないよう、指南を作ってもらった経緯があるので、ここでも共有したいと思います。 それに伴い、サーバーのリソース食い散らかすﾏﾝを避ける方法を

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

はじめに VSCodeのsettings.jsonを見直している中でフォーマッタの設定についてEslint、Prettierのドキュメントを見ていたらPrettierの公式ドキュメントで↓のページを見つけた。 Integrating with Linters#Notes When searching for both Prettier and your linter on the Internet you’ll probably find more related projects. These are generally not recommended, but can be useful in certain circumstances. First, we have plugins that let you run Prettier as if it was a linter rul

この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ） 今回はVSCodeで使っている拡張機能を紹介します。 他記事では利用シーンや用途分けがされてないことも多く、とりあえず入れてみたもののどんな機能だったのか忘れた、、、なんてこともよくあると思うので、この記事ではザックリと用途別にカテゴリ分けしています。 基本的には紹介する拡張機能全て入れてしまってもいいとは思うんですが、個人的な優先度を星マークでつけています。導入する順番の参考にしてみてください！

以前dockerを使ってgoの環境構築やdockerを使ってgoの環境構築(DBと接続), docker上にgoの環境作れたと思ったけど作れていなかった話を書きました。これでgoを使ってサーバを作れるぞと意気込み作業を始めたのですが切り分けたモジュールに対して読み込んだファイルで補完が効かなかくてめちゃくちゃやりづらくて困ったので書き残します。 具体的には以下を解決します。 コンテナ上では問題なく動作するファイルに対してvscodeがエラーを示す。 vscodeでの開発で入力補完が効かない(特に自作モジュール)。 vscodeを使っている人には参考になるかもしれません。 RemoteContainers インストール remote containersはvscodeの拡張機能でDockerコンテナ上でvscodeを開くことができます。なのでエラーや入力補完などをコンテナの環境に合わせて吐い

私は普段VSCode + Neovim拡張を利用しています。 私自身似非vimmerなのですが、「vimの効率的なキーバインドで高速に業務を進める」という精神みたいなのものは凄く素敵だと思っています。 今回は私が頻繁に使っているgitの操作をキーボードだけで行えるようにショートカットを設定してみました（日々改善中です） VSCodeのGit機能って凄く便利 VSCodeのサイドバーに配置してくれているgitの機能凄く便利じゃないですか？ 編集したファイルや新規追加したファイルの差分を見れてとても便利です。 git add でステージングしたり、逆にステージングから戻したりという操作もマウス操作で簡単にできていいですよね。 コミットメッセージを入力してささっとコミットできるのも素敵です。 この辺りの操作をキーボードで行いたいと思ってキーボード設定を変更してみました。 keybinding.j

技術部データ基盤チームの @zaimy です。今回は、 Visual Studio Code（以下 VS Code）と Docker コンテナを使って開発環境を構築する方法を紹介します。 データ基盤エンジニアの開発環境として、Python を使用する単一コンテナを例に記述しますが、他の言語や Docker Compose を使う場合でも応用できます。 背景: M1 Mac (Monterey) に Python 3.8.12 をインストールできない 先日、業務で使用するマシンを Intel Mac から M1 Mac に切り替えたのですが、CPU アーキテクチャが異なることに加えて、OS のバージョンが上がったことで Apple Clang に下位互換性のない変更が入っており、業務上ある理由で必要な Python 3.8.12 のインストールが困難でした。 そこで、私の所属するチームは全員

前書き この記事を読んでいるエンジニアの皆さんは、それぞれ異なるエディタを使用しているかと思います。読者自身が使用しているエディタの良し悪しについては詳しいと考えているため、私がVS Codeと他のエディタを比較をすることは、限界があります。また、VS Code と他のエディタの機能や快適さを比較できません。 そこで、私が毎日使用している VS Code の良さをアピールすることで、VS Code を使ってもらう機会を作りたいと思っています。 ここで説明しないこと カスタマイズしたキーコンフィグの紹介 ただし、これから紹介する VS Code の機能に好みのキーコンフィグを割り当てることは可能です。 他のエディタとの比較(Vim系 JetBrain系　Helix等の新興エディタ系) 目次 VS Codeとは 毎月のアップデート VS Codeのデフォルト機能 拡張機能（エクステンション）が

VSCode (Visual Studio Code)でdockerコンテナに接続して、VSCode上でファイルやフォルダを編集できるようにする。 環境 macOS Big Sur 11.6docker 4.3.2Visual Studio Code VSCodeでdockerコンテナに接続してファイル編集できる環境を作る 以下の２つの方法について説明する。 Dockerfileからコンテナを起動し接続する起動しているコンテナに接続する ここでは以下の記事のDocker起動を例として記載する。 過去記事 >>【Python】秒殺！Docker仮想環境でPython環境を構築する Udemy >> Visual Studio Code活用講座 Dockerfileからコンテナを起動し接続する 以下の手順。 任意のフォルダをVSCodeで開くDockerfileを作成するReopen in C

はじめに Markdownって便利ですよね？ README.md、PR や Issue の本文やコメント、Qiita や Zenn はもちろん、Google Docs や Trello や Notion や Jupyter Notebook でも使えるみたいです。もっといろいろな文書を Markdown で書ければいいのになあ、あらゆる文書のソースコードを Markdown にできればいいのになあ。 さあ、Markdown の可能性を広げましょう！ 本記事では「スライド」と「(電子)書籍」をMarkdownで書く方法をご紹介したいと思います。もちろん、VSCodeでMarkdownを効率よく便利に書いていくためのチップスもご紹介していきますよ。 ご参考スライド VS Code Conference Japan 2021 で発表した際の以下スライドもご参照ください。 もちろんこのスライドもV