<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
<p>今回の記事では、主にバックエンド(PythonとTypeScript中心)を開発している私が使っているVSCodeの拡張機能を紹介する。</p>
<h1 id="%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD">
<a class="header-anchor-link" href="#%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD" aria-hidden="true"></a> 拡張機能</h1>
<p>基本的にどのような言語でも対応できる拡張機能を紹介する。</p>
<h2 id="japanese-language-pack-for-visual-studio-code">
<a class="header-anchor-link" href="#japanese-language-pack-for-visual-studio-code" aria-hidden="true"></a> <a href="https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja" target="_blank" rel="nofollow noopener noreferrer">Japanese Language Pack for Visual Studio Code</a>
</h2>
<p>VSCodeを日本語にできる。</p>
<h2 id="rest-client">
<a class="header-anchor-link" href="#rest-client" aria-hidden="true"></a> <a href="https://marketplace.visualstudio.com/items?itemName=humao.rest-client" target="_blank" rel="nofollow noopener noreferrer">REST Client</a>
</h2>
<p>VSCode上で<code>get</code>や<code>post</code>などのHTTPリクエストを送信できる。GraphQLにも対応している。</p>
<h2 id="gitlens-%E2%80%94-git-supercharged">
<a class="header-anchor-link" href="#gitlens-%E2%80%94-git-supercharged" aria-hidden="true"></a> <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens" target="_blank" rel="nofollow noopener noreferrer">GitLens — Git supercharged</a>
</h2>
<p>commit単位でファイルを比較したり、最新のcommitの内容を表示したりできる。</p>
<h2 id="deepl-for-visual-studio-code">
<a class="header-anchor-link" href="#deepl-for-visual-studio-code" aria-hidden="true"></a> <a href="https://marketplace.visualstudio.com/items?itemName=soerenuhrbach.vscode-deepl" target="_blank" rel="nofollow noopener noreferrer">DeepL for Visual Studio Code</a>
</h2>
<p>VSCode上にて日本語から英語に翻訳できる。翻訳の精度が非常に高い。</p>
<h2 id="jsdoc-generator">
<a class="header-anchor-link" href="#jsdoc-generator" aria-hidden="true"></a> <a href="https://marketplace.visualstudio.com/items?itemName=kimlimjustin.jsdoc-generator" target="_blank" rel="nofollow noopener noreferrer">JSDoc Generator</a>
</h2>
<p>JavaScriptのドキュメントをコメントで生成できる。</p>
<h2 id="live-server">
<a class="header-anchor-link" href="#live-server" aria-hidden="true"></a> <a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer" target="_blank" rel="nofollow noopener noreferrer">Live Server</a>
</h2>
<p>簡易的なローカルサーバを簡単に立ち上げられる。ホットリロードに対応しているので、静的なWebサイトを作成する上では必須。</p>
<h2 id="live-share">
<a class="header-anchor-link" href="#live-share" aria-hidden="true"></a> <a href="https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack" target="_blank" rel="nofollow noopener noreferrer">Live Share</a>
</h2>
<p>複数人でVSCode上のソースコードを編集できる。ペアプログラミングで非常に役立つのでおすすめ。詳細は<a href="https://qiita.com/taichi0514/items/95aca7428376a7b41f90" target="_blank" rel="nofollow noopener noreferrer">Qiita記事「VSCode Live Shareすげぇ」</a>で確認してほしい。</p>
<h2 id="json">
<a class="header-anchor-link" href="#json" aria-hidden="true"></a> <a href="https://marketplace.visualstudio.com/items?itemName=ZainChen.json" target="_blank" rel="nofollow noopener noreferrer">JSON</a>
</h2>
<p>VSCode上でリアルタイムでJSONデータの挙動を確認できる。</p>
<h2 id="markdown-all-in-one">
<a class="header-anchor-link" href="#markdown-all-in-one" aria-hidden="true"></a> <a href="https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one" target="_blank" rel="nofollow noopener noreferrer">Markdown All in One</a>
</h2>
<p>VSCodeでMarkdownを執筆するなら必須。ショートカットキーで簡単にMarkdownを入力できるのでオススメ。<strong>私の場合はZenn記事を書く際に非常に重宝している</strong>。(詳細は後述)</p>
<h1 id="web%E9%96%8B%E7%99%BA%E3%81%AB%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%E3%81%AE%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD">
<a class="header-anchor-link" href="#web%E9%96%8B%E7%99%BA%E3%81%AB%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%E3%81%AE%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD" aria-hidden="true"></a> WEB開発におすすめの拡張機能</h1>
<h2 id="python">
<a class="header-anchor-link" href="#python" aria-hidden="true"></a> <a href="https://marketplace.visualstudio.com/items?itemName=ms-python.python" target="_blank" rel="nofollow noopener noreferrer">Python</a>
</h2>
<p>PythonをVSCodeで書くなら必ずインストールしておきたい。</p>
<h2 id="javascript-and-typescript-nightly">
<a class="header-anchor-link" href="#javascript-and-typescript-nightly" aria-hidden="true"></a> <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next" target="_blank" rel="nofollow noopener noreferrer">JavaScript and TypeScript Nightly</a>
</h2>
<p>上記と同様に、TypeScriptをVSCodeで書くなら必須である。</p>
<h2 id="typescript-importer">
<a class="header-anchor-link" href="#typescript-importer" aria-hidden="true"></a> <a href="https://marketplace.visualstudio.com/items?itemName=pmneo.tsimporter" target="_blank" rel="nofollow noopener noreferrer">TypeScript Importer</a>
</h2>
<p>文字を入力すれば<code>.ts</code>、<code>.js</code>、<code>.tsx</code>などに入っているモジュールを自動でインポートしてくれる。TypeScriptのコーディング効率を劇的に向上させられるので非常にオススメ。</p>
<h2 id="sqlite">
<a class="header-anchor-link" href="#sqlite" aria-hidden="true"></a> <a href="https://marketplace.visualstudio.com/items?itemName=alexcvzz.vscode-sqlite" target="_blank" rel="nofollow noopener noreferrer">SQLite</a>
</h2>
<p>VSCodeでSQLiteを扱うなら必須である。VSCode上でSQLiteに関するコマンドを実行できる。</p>
<h2 id="sqlite-viewer">
<a class="header-anchor-link" href="#sqlite-viewer" aria-hidden="true"></a> <a href="https://marketplace.visualstudio.com/items?itemName=qwtel.sqlite-viewer" target="_blank" rel="nofollow noopener noreferrer">SQLite Viewer</a>
</h2>
<p>SQLiteのデータベースをリアルタイムで確認できる拡張機能。<strong>個人的にSQLiteで開発する機会が多かったので、プログラミング独学1年目の時期に知っておきたかった拡張機能の１つ</strong>。</p>
<h2 id="mysql">
<a class="header-anchor-link" href="#mysql" aria-hidden="true"></a> <a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.vscode-mysql" target="_blank" rel="nofollow noopener noreferrer">MySQL</a>
</h2>
<p>VSCodeでMySQLを使用する際に必須である。MySQLのデータベースをリアルタイムで確認したり、クエリで実行したりできる。</p>
<h2 id="mongodb-for-vscode">
<a class="header-anchor-link" href="#mongodb-for-vscode" aria-hidden="true"></a> <a href="https://marketplace.visualstudio.com/items?itemName=mongodb.mongodb-vscode" target="_blank" rel="nofollow noopener noreferrer">MongoDB for VSCode</a>
</h2>
<p>VSCodeでMongoDBを扱うなら必須。MongoDBのデータベースをリアルタイムで確認したり、実行したりできる。</p>
<h2 id="docker">
<a class="header-anchor-link" href="#docker" aria-hidden="true"></a> <a href="https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker" target="_blank" rel="nofollow noopener noreferrer">Docker</a>
</h2>
<p>VSCodeでDockerを使うなら必須。<strong>Microsoftが提供している拡張機能なので安心して使える</strong>。Dockerを扱う上で必要な拡張機能はこれ１つで事足りる。</p>
<h2 id="yarn">
<a class="header-anchor-link" href="#yarn" aria-hidden="true"></a> <a href="https://marketplace.visualstudio.com/items?itemName=gamunu.vscode-yarn" target="_blank" rel="nofollow noopener noreferrer">yarn</a>
</h2>
<p><code>yarn</code>コマンドをVSCodeで活用できる拡張機能。コマンドを確認する際に逐一公式ドキュメントを確認する必要がない。</p>
<h1 id="%E3%81%8A%E3%81%BE%E3%81%91">
<a class="header-anchor-link" href="#%E3%81%8A%E3%81%BE%E3%81%91" aria-hidden="true"></a> おまけ</h1>
<h2 id="github-theme">
<a class="header-anchor-link" href="#github-theme" aria-hidden="true"></a> <a href="https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme" target="_blank" rel="nofollow noopener noreferrer">GitHub Theme</a>
</h2>
<p>GitHubで使われているコードのテーマをVSCodeに適用できる。私の場合、開発の集中力をキープするためにVSCodeのテーマを切り替えることが多いので重宝している。</p>
<h2 id="vscode-icons">
<a class="header-anchor-link" href="#vscode-icons" aria-hidden="true"></a> <a href="https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons" target="_blank" rel="nofollow noopener noreferrer">vscode-icons</a>
</h2>
<p>ディレクトリ、ファイルのアイコンを変更できる。見やすくなるのでおすすめ。</p>
<h2 id="zenn-editor">
<a class="header-anchor-link" href="#zenn-editor" aria-hidden="true"></a> <a href="https://marketplace.visualstudio.com/items?itemName=negokaz.zenn-editor" target="_blank" rel="nofollow noopener noreferrer">Zenn Editor</a>
</h2>
<p>公式が提供している<a href>Zenn CLI</a>をVSCode上で使えるようにした拡張機能。<strong>最大の特徴は開発者サーバを立ち上げる必要なく執筆している記事のプレビューを確認できること</strong>である。非公式だが、Zenn記事をVSCodeで書きたいプログラマーはインストールして損はないだろう。</p>
<h1 id="%E4%BD%99%E8%AB%87">
<a class="header-anchor-link" href="#%E4%BD%99%E8%AB%87" aria-hidden="true"></a> 余談</h1>
<p>改めて自分のVSCodeを振り返ったら使われていない拡張機能や使い方を忘れた拡張機能がたくさんあった。定期的に拡張機能を確認することの重要性を学んだ。<strong>やはり、VSCodeの拡張機能は知っているだけで開発の効率に影響を与えるものが多い</strong>。</p>
<p>WEB開発の効率を上げるには<strong>今自分が使っている拡張機能を改めて整理することや、<code>README</code>を読みなおすこと</strong>を一度考えてみるといいだろう。</p>
<h1 id="%E5%8F%82%E8%80%83%E3%82%B5%E3%82%A4%E3%83%88">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E3%82%B5%E3%82%A4%E3%83%88" aria-hidden="true"></a> 参考サイト</h1>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__44cdd78fe8cbb" src="https://embed.zenn.studio/card#zenn-embedded__44cdd78fe8cbb" data-content="https%3A%2F%2Fqiita.com%2Fmayobimu%2Fitems%2F12c65c27c2098385283b" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://qiita.com/mayobimu/items/12c65c27c2098385283b" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://qiita.com/mayobimu/items/12c65c27c2098385283b</a></p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__1081e635f6491" src="https://embed.zenn.studio/card#zenn-embedded__1081e635f6491" data-content="https%3A%2F%2Fzenn.dev%2Fruru%2Farticles%2F396265425c9740" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/ruru/articles/396265425c9740" style="display:none" target="_blank">https://zenn.dev/ruru/articles/396265425c9740</a></p>


【VSCode】おすすめの拡張機能 21選

Japanese Language Pack for Visual Studio Code

masaru.kitajima

<p><a href="https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons" target="_blank" rel="nofollow noopener noreferrer">DeepL for Visual Studio Code</a>のリンク先ですが、間違えてらっしゃいませんか？<br>
<a href="https://marketplace.visualstudio.com/items?itemName=soerenuhrbach.vscode-deepl" target="_blank" rel="nofollow noopener noreferrer">こちら</a>ではありませんか？</p>


Discussion