triBlog

トリアナのブログ。

WEB制作
2019.8.9

【VS Code】生産性グイアゲのオススメ拡張機能8選

2019.8.9
頑張って買った1万円のワイヤレスイヤホンをなくしました
ライター画像
おくだ

おはこんばんちわ!インターンの奥田です!

みなさんはコーディングする時、なんのエディタを使用していますか?
今日はエディタの中でも人気の高いVS Codeの拡張機能をご紹介します!

ちなみにトリアナ社内にはVS Code派、Brackets派、Dreamweaver派が入り乱れています。

そもそもVS Codeって?

Visual Studio Codeはマイクロソフトによって開発されたコードエディタです。

よくVS Codeと略されますが、正式名称はVisual Studio Code。
オープンソースのリポジトリ、vscodeから開発されたものです。
この記事ではVisual Studio CodeのことをVS Codeと表記します。

非常に動作が軽く、拡張機能も充実しているのが特徴です。

オススメ拡張機能8選

拡張機能は、プラグインやエクステンションって呼ぶこともあります。
本記事では拡張機能で表記を統一します◯
今回は私が普段使っている拡張機能の中で、利用する人が多そうな拡張機能を集めてみました。

ちなみにコードのフォーマット(整形)やインテリセンス(コード補完機能)などは、
拡張機能いらずでデフォルトの機能として備わっています(⌒▽⌒)

エディタ内でターミナルが使える「Terminal」

エンジニアといえばあの黒い画面。ターミナル。
「これがエディタ内で使えたら…!」と思ったことありませんか。私はあります。

そんなときに見つけたのが「Terminal」という拡張機能。名前そのままやないか。

⌘+shift+Pでコマンドパレットを開き、「terminal」と打てば「Open in integrated Terminal」が候補に出てきます。
すると、見覚えのあるあのターミナルがエディタに!

もちろん普通にコマンド打てます。
エディタとターミナル、ウィンドウを切り替えることなく両方使えるのが非常に便利です。

リアルタイムでプレビューできる「Live Server」

HTML, CSS, JSファイルをプレビューしてくれる上に、自動で更新してくれます。
もう変更するたびにブラウザを更新する必要はありません!

Bracketsではデフォルトの機能なんですが、VS Codeでは拡張機能が必要です。
使い方は簡単。インストール後に画面下部の「Go live」をクリックするだけ。
注意点としては必ずフォルダ単位で開くこと。
使いたいHTMLファイルが入っている「フォルダ」を開いてください。
HTMLファイルを直接開いた場合、Live Serverは正常に動作しません。

※PHPファイルなどはMAMPやDockerをお使いください。

ファイルパスを自動補完してくれる「Path Autocomplete」

CSSやJSファイルを読み込む時、わざわざFinderを開いてファイルのパスを確認していませんか?
Path Autocompleteを使えばもうその必要はありません。

Path Autocomplete vscode 拡張機能
ファイルパスを入力しようとすると自動で補完候補を出してくれます。

不要なスペースを検出する「Trailing Spaces」

変な半角スペースがあるとイライラする…そんな神経質な方にオススメ。
コードの行末にスペースがあると赤く示してくれます。

trim Trailing Spaces vscode 拡張機能

また、コマンドパレットで「trim」と打てば、改行のために追加した文末の半角スペース2個を消すこともできます。
マークダウンファイルで書いたものを他の形式へ移す際に便利です。

文章を校正してくれる「テキスト校正くん」

エディタでマークダウンを書く人必見。
文章中にら抜き言葉があったり、同じ助詞の連続的な使用があったりした場合に検出してくれます。

テキスト校正くん vscode 拡張機能

自分ではなかなか書いていて気づかない部分を指摘してくれるので非常に助かっています。
こうした校正が地味に読みやすい文章の作成に役立っています。

このテキスト校正くんのすごいところはいくつもあります。

– プログラミングのデバッグみたいにエラーを一覧で出してくれる
– ウェブ用語の名称にも対応(javascript→JavaScript など)
– 校正のレベルを設定できる

などなど…。
ちなみに一覧で出たエラーはクリックすればその箇所まで飛んでくれます。

テキスト校正くん vscode 拡張機能
詳しく知りたい方は開発元のICS MEDIA様のサイトをぜひチェックしてください。

差分表示が便利!Gitが使える「GitLens」

やはりVS Codeの拡張機能といえばこれ。
GitLensを使えばエディタ内でGitが使えます。

GitLens vscode 拡張機能

また、前回コミットした内容との差分などが視覚的に確認でき、非常に便利です。
ちなみに私はtriBlog記事の下書きをマークダウンで書いてGitHubのプレイベートリポジトリで管理してます。
記事書くときもGitLensは超役立つ。

視覚的にGitのツリー図が見られる「Git History」

こちらもGit関連。
SouceTreeなどのGUIソフトのように、ブランチの様子を視覚的に表示できます。
ちょっと見せられるリポジトリがないので、ブランチを表示してる画像を添付できません。すみません!
ぜひ実際に使って確認してみてください🙏

インデントを虹色で示してくれる「indent-rainbow」

インデントを示してくれる拡張機能は数あれど、
こんなに見やすいものはなかなかありません。

indent rainbow vscode 拡張機能
インデントの深さごとに色がついていて、非常に分かりやすいです。
もうインデントの破線をなぞって確認する必要はありません。

まとめ

エディタの拡張機能はあまり入れすぎると重くなる原因になりますが、
Visual Studio Codeはもともと動作が軽いので、10〜20個くらいインストールしてもサクサクです。

自分の作業に適した拡張機能を選んで、効率的に仕事を進めていきましょう(⌒▽⌒)

記事を書いた人

ライター画像
おくだ インターン

UIとインタラクティブ表現に強いフロントエンドエンジニアを目指してます。自称トリアナの新しい風。

ライター画像
おくだ インターン

UIとインタラクティブ表現に強いフロントエンドエンジニアを目指してます。自称トリアナの新しい風。

ページ上部へ