プログラミング

VSCodeで導入すべきおすすめ拡張機能5選【作業効率上がりまくりです】

VSCodeで導入すべきおすすめ拡張機能5選

VSCodeで導入すべきおすすめ拡張機能5選

みなさんこんにちは、ソラです。

 

・プログラミングってどこで入力するの?

・VSCodeで導入したほうがいい拡張機能はあるの?

リク

 

こんな悩みを解決していきます。

 

本記事の読者理想

  • VSCodeを導入したばかりの方
  • VSCodeでどんな拡張機能があるかよく分からない方
  • 導入すると作業効率が上がる拡張機能を知りたい方

 

VSCodeには導入できる拡張機能が数えきれないほど存在します。

 

しかし、数が多すぎるあまり、何を導入したらよいのか分からないですよね。

私もVSCode導入したての頃は何が何だか分かりませんでした。

 

そこで本記事ではVSCodeで導入すべきおすすめ拡張機能を5つまとめていきます。

 

< まずは無料オンライン説明会から >

TECH::CAMPオンライン説明会

 

 

VSCodeとは

VSCode(Visual Studio Code)とはマイクロソフト社が無償で提供している統合開発環境です。

 

インストールが簡単で、

・Windows

・Mac

・Linux

どのOSにも対応していることから利用者が多いのが特徴です。

 

VSCodeは統合開発環境(IDE)であるため、VSCode1つでデバッグからコンパイルまで行うことができます。

 

VSCodeを導入するメリット・デメリット

VSCodeを導入するメリット・デメリット

VSCodeを導入するとどんなメリットがあるの?
リク

こんな疑問を抱いた方へ、ぜひこちらの記事も合わせて読んでみましょう。

 

これからVSCodeを利用する上で

・どんな点に優れているのか

・利用者数はどれほどなのか

・逆にデメリットはあるのか

といった内容をまとめています。

 

合わせて読みたい記事

WindowsでプログラミングするならVSCodeがおすすめ
【統合開発環境】WindowsでプログラミングするならVSCodeがおすすめの理由4つ

プログラミングをする上で一番厄介なのが環境構築。しかし統合開発環境(IDE)を導入することで、エディタ・デバッグ・コンパイルと全て行うことができます。中でもVSCodeはWindowsユーザーにおすすめでき、かつMacやLinuxでも使用可能です。この記事ではなぜVSCodeがおすすめなのかを知ることができます。

 

VSCodeで拡張機能を導入する方法

VSCode拡張機能インストール方法

 

まずはVSCodeで拡張機能を導入する方法を解説していきます。

 

手順は以下の通りです。

簡単な流れ

  • ブロックのようなアイコンをクリックする
  • 検索バーに導入したい拡張機能を入力する
  • ヒットした拡張機能をクリックする
  • ”インストール”というボタンをクリックする

 

これで拡張機能を導入できました。

ソラ
簡単ですね!

 

VSCodeで導入すべきおすすめ拡張機能5選

VSCodeで導入すべきおすすめ拡張機能5選ここからは本題であるVSCodeで導入すべきおすすめ拡張機能を5つまとめていきます。

 

今回ご紹介する拡張機能は、どんな言語にも対応している汎用的なものばかりです。

加えて、必ず今の作業効率を上げる機能をまとめています。

 

ぜひ気に入った拡張機能は導入して使用してみてください。

 

Japanese Language Pack for Visual Studio Code

Japanese Language Pack for Visual Studio Code

Japanese Language Pack for Visual Studio Codeは、VSCodeを日本語化する拡張機能です。

 

VSCodeを導入したことがある方はお分かりかと思いますが、初期は英語表記です。

よほど英語に詳しい方でない限り、その状態で開発を行うのは厳しいと思います。

 

日本語表記のほうが理解も早まりますので、確実に入れたほうが良いでしょう。

 

vscode-icons

vscode-iconsvscode-iconsはファイルの拡張子に合わせてアイコンを表示してくれる拡張機能です。

 

・~.py

・~.rb

・~.js

などファイルを作成しても、通常は全てメモ帳のようなテキストのアイコン表示がされますよね。

 

似たようなファイルが立て続けに並んでいたら、正直探すのが大変です。

 

そこでvscode-iconsを導入することで、見づらい悩みを解消することができます。

 

ソラ
本ブログ管理人も利用しています! 本当に見やすい!

 

GitHub Theme

GitHub ThemeGitHub ThemeはGitHub公式が提供しているVSCode用のテーマです。

 

GutHubとは、ざっくり言うと開発したプログラム(ソースコード)を管理するサービスをいいます。

 

GitHubを利用することで

・ソースコードの管理

・バージョン管理

・他エンジニアへの技術提供

といった、エンジニアにはありがたい機能や情報収集を行うことができます。

 

そんなGitHub社がリリースした「GitHub Theme」。

デフォルトでも十分見やすい配色でまとまっているVSCodeですが、GitHubというワードは強く利用している方は非常に多いです。

 

また、しっかり考えられた配色で整えられているため、使い勝手も本当に良いです。

ソラ
本ブログ管理人もGitHub Themeを利用しています!

 

Bracket Pair Colorizer

Bracket Pair ColorizerBracket Pair Colorizerは対になる括弧を色分けして表示する拡張機能です。

 

プログラミングをしていくと、多重括弧をする場合があり、どの括弧にどのコードが対応しているのか見失ってしまいます。

 

これはエラーのもとにつながるため、早急に避けたいところです。

 

しかし、Bracket Pair Coloizerは括弧ごとに色分けしてくれ、さらにカッコ内のコードをアンダーラインで教えてくれます。

 

すごい!便利だね!
リク
ソラ
導入するだけで開発効率もグンっと上がるのでおすすめですよ!

 

indent-rainbow

indent-rainbowindent-rainbowはインデントを虹色で色分けしてくれる拡張機能です。

 

インデントとはコードの段落分けを意味しています。

 

プログラミングにおいて、インデントはコードを読みやすくする利点があります。

しかし、それだけではありません。

 

プログラミング言語によっては、インデント自体に意味があるのです。

Pythonは特に良い例で、インデントが揃っていなければエラーが起こってしまいます。

 

単純なエラーを出さないために、導入してみるも良いでしょう。

ソラ
プログラミング初心者の方は特に導入することをおすすめします!

 

< まずは無料オンライン説明会から >

TECH::CAMPオンライン説明会

 

まとめ:VSCodeおすすめ拡張機能

今回ご紹介したおすすめ拡張機能は以下の通りです。

 

メモ

・Japanese Language Pack for Visual Studio Code

・vscode-icons

・GitHub Theme

・Bracket Pair Coloizer

・indent-rainbow

 

今回まとめた拡張機能はどれも作業効率が上がり、導入して損はありません。

 

VSCodeには他にも拡張機能が山程あります。

時間があるときにじっくり調べてみると、良い拡張機能が見つかるかもしれませんよ!

 

合わせて読みたい記事

Pythonとはどんな言語?活用事例や学習メリットを紹介
【初心者向け】Pythonとはどんな言語?活用事例や学習メリットを紹介

日本だけでなく、世界で注目・人気を集めている「Python」。みなさんはPythonがどんな言語かご存知でしょうか。ここではPythonとはどんな言語なのか、また開発できるものや活用事例なども合わせてまとめています。「これからプログラミングを学習したい」、「Pythonに興味がある」という方にぜひ読んでいただきたい内容となっています。





-プログラミング

© 2021 ソラブログ Powered by AFFINGER5