【VSCode】おすすめの拡張機能 21選
はじめに 今回の記事では、主にバックエンド(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のドキュメ
VSCodeの拡張機能【Gist】が便利すぎて開発効率がかなり上がった話 - Qiita
はじめに 突然ですが、よく使うコードはどのように管理していますか？ 私はGitHubで管理していたのですが、今回VSCodeの拡張機能Gistを使って見たところ、サクッと参照ができて、かなり使い心地が良かったのでまとめておきます。 Gistとは VSCode上でGitHub Gistを連携させることができ、手軽にファイルの作成、編集、削除が可能になる拡張機能です。 導入手順 GitHub Gistの登録 GitHub上でアクセストークンの取得 拡張機能のインストール アクセストークンの設定 1. GitHub Gistの登録 2. GitHub上でアクセストークンの取得 ExpirationをNo expirationに設定します。 scopeのgistを許可して作成です。 トークンが発行されるので控えておきましょう。 3. 拡張機能のインストール VSCode上で【Gist】と検索すると
VSCodeでPython書いてる人はとりあえずこれやっとけ〜 - Qiita
はじめに Pythonはコードが汚くなりがち（個人的にそう思う） そんなPythonくんを快適に書くための設定を紹介します。 拡張機能編 ここでは Pythonを書きやすくするため の拡張機能を紹介していきます。 1. Error Lens before 「コード書いたけど、なんか波線出てるよ💦」 記述に問題があった場合、デフォルトでは波線が表示されるだけ。。。 after Error Lensくんを入れることによって 波線だけでなくエディタに直接表示される。 はい、有能〜 2. indent-rainbow before Pythonくんは インデントでスコープを認識している。 for の f から下に線が伸びてるけど、ちょっと見にくいなぁ after 色が付いてちょっと見やすくなった！ 3. Trailing Space before 一見、普通に見えるコード after 末尾にある
VSCodeで Import "***" could not be resolved Pylance(reportMissingImports) が出るときの対処法 - Qiita
VSCodeで Import "***" could not be resolved Pylance(reportMissingImports) が出るときの対処法PythonVSCode いろんな環境で同じエラーを吐いていたので、備忘録として残す。How to solve Pylance 'missing imports' in vscode を参考にした。 私の場合、venv で sandbox という仮想環境を作成し、そこにインストールした airflow をインポートする際に標題のエラーが発生していた。インストール先にパスが通っていないことが問題らしいので、追加してやればよい。 まず該当するライブラリの場所を確認する。
【Importパスエラー解消】Docker環境下でPoetry＋Pylanceで開発を進めている時のVS Codeの設定
概要 Docker 環境下で Poetry ＋ VS Code + Pylance にて開発を進めている時に、Pylance の import のパス解決設定でハマったので備忘録として残しておきます。 設定方法 （必要であれば）仮想環境を無効化 個人的には Docker 環境下で仮想環境を作成するのもあれなので、無効にしています。 ここは各々の状況等で判断してください。 Poetry の仮想環境の無効化は以下のコマンドで設定します。 無効化できたかどうかはターミナル等でpoetry config --listコマンドを実行し、virtualenvs.create = falseになっているかを確認します。 その後、すでに Poetry の管理下にあるプロジェクトがある場合はpoetry installでグローバルにパッケージをインストールしておきます。 VS Code の設定 1. パッケ
Dev Containerを使ってステップバイステップで作るPythonアプリケーション開発環境 - 電通総研 テックブログ
みなさんこんにちは、電通国際情報サービス（ISID）Xイノベーション本部ソフトウェアデザインセンターの佐藤太一です。 この記事では、VS CodeのDev Containerを使ってOSに依存しないPythonの開発環境を構築する方法をステップバイステップで丁寧に説明します。 VS Codeの利用経験があり、またPythonによるアプリケーション開発に興味のある方を想定読者として記述しています。Pythonの初心者から中級者向けを意識して書いていますので、意図して冗長な説明をしています。 すでにPythonによるアプリケーション開発に十分に詳しい方は、まずはまとめだけ読んでみてください。私自身それほどPythonのエコシステムに詳しいわけではありませんので、知識の抜け漏れは恐らくあるでしょう。そういった事に気が付いたら、XなどのSNSでこの記事のURLを付けてコメントをしていただけると幸い
【VSCode使用者注意】サーバーリソース食い散らかすﾏﾝから解放される唯一の方法
WEB開発において、複数人がサーバーにSSHでリモート接続した状態で作業をすることは、よくあるケースです。 開発サーバーのリソースを皆で利用しているため、過度な負荷をかけてしまうと、レスポンスが悪くなり、他のメンバーにも迷惑をかけてしまう恐れがあります。 特に、VSCodeを使用している人は、「ファイル監視」機能が入り、しらず知らずの内にサーバーに負荷をかけ、結果的にハングアップ！といったケースが実際にありました（ほろ苦いおもひで） (当時の自分。サーバーに高負荷がかかったことが話題になっている最中)「俺の訳がない(ｷﾘｯ 。だってエディタ(VSCode)を使ってただけだもん」→ 完全にこいつが原因 ということで、メンバーの方からサーバー環境に負荷をかけないよう、指南を作ってもらった経緯があるので、ここでも共有したいと思います。 それに伴い、サーバーのリソース食い散らかすﾏﾝを避ける方法を
いつのまにかeslint-plugin-prettierが推奨されないものになってた
はじめに 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
【2023年】Web制作で使えるVSCodeオススメ拡張機能17選！ - PENGIN BLOG
この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ） 今回はVSCodeで使っている拡張機能を紹介します。 他記事では利用シーンや用途分けがされてないことも多く、とりあえず入れてみたもののどんな機能だったのか忘れた、、、なんてこともよくあると思うので、この記事ではザックリと用途別にカテゴリ分けしています。 基本的には紹介する拡張機能全て入れてしまってもいいとは思うんですが、個人的な優先度を星マークでつけています。導入する順番の参考にしてみてください！
VS Code: ホストのssh鍵をコンテナから利用／リモートコンテナからGitHubへのpush時のHost key verification failedエラー解決法
Mac OS 10.15.4, Visual Studio Code v1.44.2において、リモートコンテナ(dev container)上からソースコードをGitリポジトリへコミット、GitHubへプッシュを試みたところ、下記のエラーが発生しコミット及びプッシュが完了しない事象が発生。 エラーメッセージ Run git config --global user.email "you@example.com" git config --global user.name "Your Name" to set your account's default identity. Omit --global to set the identity only in this repository. fatal: unable to auto-detect email address (got 'vs
docker上にgoの環境作れたと思ったけど補完ツールとかがなくて困ったので改善した話
以前dockerを使ってgoの環境構築やdockerを使ってgoの環境構築(DBと接続), docker上にgoの環境作れたと思ったけど作れていなかった話を書きました。これでgoを使ってサーバを作れるぞと意気込み作業を始めたのですが切り分けたモジュールに対して読み込んだファイルで補完が効かなかくてめちゃくちゃやりづらくて困ったので書き残します。 具体的には以下を解決します。 コンテナ上では問題なく動作するファイルに対してvscodeがエラーを示す。 vscodeでの開発で入力補完が効かない(特に自作モジュール)。 vscodeを使っている人には参考になるかもしれません。 RemoteContainers インストール remote containersはvscodeの拡張機能でDockerコンテナ上でvscodeを開くことができます。なのでエラーや入力補完などをコンテナの環境に合わせて吐い
VSCodeでよくあるgit操作をキーボードだけでする(tigみたいに）
私は普段VSCode + Neovim拡張を利用しています。 私自身似非vimmerなのですが、「vimの効率的なキーバインドで高速に業務を進める」という精神みたいなのものは凄く素敵だと思っています。 今回は私が頻繁に使っているgitの操作をキーボードだけで行えるようにショートカットを設定してみました（日々改善中です） VSCodeのGit機能って凄く便利 VSCodeのサイドバーに配置してくれているgitの機能凄く便利じゃないですか？ 編集したファイルや新規追加したファイルの差分を見れてとても便利です。 git add でステージングしたり、逆にステージングから戻したりという操作もマウス操作で簡単にできていいですよね。 コミットメッセージを入力してささっとコミットできるのも素敵です。 この辺りの操作をキーボードで行いたいと思ってキーボード設定を変更してみました。 keybinding.j
Visual Studio Code と Docker コンテナを使って開発する - Pepabo Tech Portal
技術部データ基盤チームの @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 を使ってもらう機会を作りたいと思っています。 ここで説明しないこと カスタマイズしたキーコンフィグの紹介 ただし、これから紹介する VS Code の機能に好みのキーコンフィグを割り当てることは可能です。 他のエディタとの比較(Vim系 JetBrain系 Helix等の新興エディタ系) 目次 VS Codeとは 毎月のアップデート VS Codeのデフォルト機能 拡張機能（エクステンション）が
【VSCode×Docker】VSCodeでdockerコンテナに接続してファイル編集する
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
VSCode + Markdownでスライドや書籍も書いちゃおう！ - Qiita
はじめに 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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
devcontainer の postCreateCommand で複数のコマンドを実行したい
VSCODE remote container - avoid reinstall extensions on rebuild
VScodeの設定（settings.json）まとめ【2023年4月更新】
Veturを入れてるのにコード補完が効かない - Qiita
