この記事を読むと
VSCode拡張機能を入れて、下記のようなことが実現します
・VSCodeとは別にterminal（Command Line）の画面を開かなくても、VSCode内から直接terminal操作ができる（例えばnpm run devも)
・全てのカッコ()[]{}が種類別に色分けされる
・インデントが一眼で分かる
・htmlタグの開始タグと終了タグを同時に修正できる
・Vue.jsやNuxt.jsの構造やファイル操作が楽になる
etc...
なぜこの記事を書いたのか
VSCodeは素晴らしいテキストエディタです。
特に、Vue.jsやNuxt.jsを用いて開発している方にとっては最も有力な選択肢でしょう（そして、その選択は間違いではないと保証できます）。
さて、VSCodeはそのままでも素晴らしいエディタですが、使用するフレームワークや用途に応じて拡張機能を入れるとさらに、その卓越した機能性を発揮します。VSCodeがなぜ世界中のエンジニアから信頼され、愛されるのかを実感することができるでしょう。
特に、(Nuxtエンジニアとしてまだまだ未熟な)私にとっては、もはやVSCode拡張機能なしの開発は考えられません。
拡張機能を入れてからコードミスが激減し、不要なストレスから開放されたので、長時間のコーディングにおいても疲れを感じにくくなりました。
しかしながら、VSCodeに拡張機能を入れていない方も少なくないようです。
「エディタの設定を弄れない駆け出しエンジニア」を思い浮かべたでしょうか?むしろ逆の方を想定しています。WEB開発者やフロントエンジニアとして優れた技術や十分な経験があるからこそシンプルな機能構成を好み、コードを書く補助機能である拡張機能は必要なかったのかもしれません。
しかしながら、どんなにハイレベルなエンジニアの方にとってもやはり拡張機能は大きな助けとなると考えます。没入するような長時間の集中のために、少しでも快適な開発環境を整えることは有意義なことです。
そこで今回は、Vue.jsやNuxt.jsを用いた開発を行う方を対象に、VSCodeの拡張機能たちを紹介させて頂きます。
VSCodeへの拡張機能の追加方法
やり方色々
VSCodeは直感的な操作で、簡単に拡張機能を入れることができます。
「VSCode内から直接追加」、「ブラウザ上からダウンロード」、「Command Lineから操作」等々やり方はありますが、基本的にはVSCode内から直接追加するのが一番簡単です。
VSCode内から直接追加する方法
画面左下の歯車をクリックして、「extension」（日本語設定なら「拡張機能」）を選択しましょう。
すると、EXTENSIONS:MARKETPLACEの検索窓が表示されます。
例えば「Vetur」を追加したい場合は,「Vetur」と検索、お目当ての「Vetur」が表示されたらinstallすればOKです。簡単ですね。
拡張機能の紹介
私は下記を全て入れていますが、必要に応じて取捨選択してください。
一応、ブラウザ上のMarketplaceへのリンクを貼っていますが、VSCode内から直接インストールして頂くのが早いかと思います。
基本編
Japanese Language Pack は VS Code にローカライズされた UI を提供します。
日本語化ができます！VSCodeは平易な英語しか使用されていませんが、やはり日本語表示の方が操作が早くなります。
※実は、以前はVS Codeのデフォルトの設定で言語を切り替えられたそうですが、現在は拡張機能が必須となりました。
A VSCode extension to fast open html file in browser.
HTMLファイルをブラウザで開けるようになります。
The Material Icon Theme provides lots of icons based on Material Design for Visual Studio Code.
アイコンが分かりやすくなります。
インストールした後、設定を変更する必要があります。インストール後のメッセージダイアログに従うのが一番簡単です。
コード整形編
A VS Code extension that allows you to… highlight trailing spaces and delete them in a flash!
インデントをハイライトしてくれます。
A visual source code plugin for maintaining local history of files.
ファイルの変更履歴が保存され、変更前との比較や、復元ができるようになります。安心ですね。
※2020/1/16追記
私自身がアンイストールしたので、非推奨に変更します。次章で理由を記載します
GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
gitとVSCodeを強力に連携してくれます。
git関連の拡張機能もたくさんあるのですが、やはりGitLensが一番良いかなあと思います。
Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
ペアとなるHTMLタグを自動でrenameしてくれます。
Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.
HTMLの終了タグを自動で追加してくれます。
This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use.
カッコ毎に色を分けてハイライトしてくれます。こちらを入れてから、VueやNuxtで(){}のネストを多用しても混乱することがなくなりました。
Beautify javascript, JSON, CSS, Sass, and HTML in Visual Studio Code.
javascriptやJSON, CSS, Sass, HTMLコードを選択し、command palletからBeautifyを実行すると綺麗に整えてくれます。
This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript).
Snippetsとはよく使うコードを自動で予測・保管する機能のことです。
コードを一文字一文字全て書かなくても良いのは本当に楽ですし、コードのミスも減ります!
VSCodeには最初からHTML等ある程度のSnippetsはついていますが、もっと便利になってくれます。
JavaScript(ES6)のSnippetsは是非追加しておきましょう。
Vue.js・Nuxt.js編
Run code snippet or code file for multiple languages: C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, V, and custom command
VSCode内から各種対応言語やcommandを実行できます。
デバッグでさえVSCode内で完結してしまいます。個人的にはこれが一番便利かもしれません。
※2020/3/21追記: 簡単なものならVS Code内から実行してしまうのが速いですが、デバッグが必要なときは別画面でターミナルを開いた方がエラー文が見やすいです。特にNuxtでは些細な仕様でnpm run devがエラーになってしまうので、そのような場合はエラー文をきちんと読む習慣を付けるためにも別画面でターミナルを開くべきでしょう。私の場合はgitにcommitするときはVC code、npm run devはターミナルと使い分けています。
Vue tooling for VS Code, powered by vue-language-server.
言わずと知れたVeturですね。VSCodeでVueファイルを操作しているとレコメンドのメッセージが表示されるので、ご存知の方も多いでしょう。VueやNuxtを開発するならもはや必須の拡張機能です。
親を質に入れてでも追加しておきたい（※無料です）。
This extension extends Vue code editing with Go To Definition and Peek Definition support for components and filenames in single-file components with a .vue extension. It allows quickly jumping to or peeking into files that are referenced as components (from template), or as module imports (from script).
選択したコンポーネントやファイル名について、「Vueファイルのどこで定義されたか」や「定義しているコード」を表示してくれます。また、どこでも定義されていないのに使われている変数名を特定するのにも役立ちます。
これも本当に便利ですね。
Ability to duplicate files and directories in VS Code.
VSCode内で簡単にファイルやディレクトリの複製が可能になります。
Vueファイルをテンプレとして使いまわしたりするときに便利ですね。
Viewing documentation [Vue.js, Vuex, Vue Router, Vue SSR, Vuetify, Nuxt.js, VuePress] in the VS Code!
This extension extends Vue code editing with Go To Definition and Peek Definition support for components and filenames in single-file components with a .vue extension. It allows quickly jumping to or peeking into files that are referenced as components (from template), or as module imports (from script).
- Vue.jsやVuex, Vue Router, Vue SSR, Vuetify, Nuxt.js, VuePressの公式ドキュメントをVSCode内から直接参照できます。
個人的に、Chromeで開いているタブの多さと集中力は反比例するので、ドキュメントもVSCode内で完結するのはありがたいです。
要注意編
A basic spell checker that works well with camelCase code.
The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.
私が使いこなせていないだけとは思うのですが、非推奨です。
コードのスペルミスを教えてくれるということで一見便利そうですが、英語的に不自然な変数名もエラーと一緒に表示されるので、エラー箇所の特定や修正作業がしづらくなりました。
Visual Studio Live Share enables you to collaboratively edit and debug with others in real time, regardless what programming languages you're using or app types you're building. It allows you to instantly (and securely) share your current project, and then as needed, share debugging sessions, terminal instances, localhost web apps, voice calls, and more! Developers that join your sessions receive all of their editor context from your environment (e.g. language services, debugging), which ensures they can start productively collaborating immediately, without needing to clone any repos or install any SDKs.
他人を招待してファイルの共同編集がリアルタイムでできます。イメージとしてはGoogle Documentで文書を共同編集している感じでしょうか。
オンラインでコードレビューをお願いするときも便利で、非常に素晴らしい拡張機能なんですが・・・。
一つ気になることはインストールに際して不具合が少なくない？のかなと。最初僕だけかなと思ったのですが、StackOverFlow等でも同様の投稿がありました。
Questions tagged [vscode-liveshare]
なぜ不具合が発生するのかまだきちんと、調べきれていないので推奨するのは一旦保留です。
ただ、本当に便利な機能なので懸念が解決すれば積極的に使っていきたいところです。
※今後調査結果を追記予定
※2020/1/16追記
ちょっと試してみて使えなかったら諦めて、大人しく他のツールを使うのが良いかと思います。例えばCodeSandboxなど
A visual source code plugin for maintaining local history of files.
ファイルの変更履歴が保存され、変更前との比較や、復元ができるようになります。安心ですね。
※2020/1/16追記
私自身がアンイストールしたので、非推奨に変更しました。
.historyというディレクトリに履歴ファイルを作っていくので、ファイル数が膨大になってしまいます。コード検索するときに、目当てのファイルが見つけづらく、デバッグしづらいです。
VSCodeの設定変更方法とおすすめカスタマイズ
もちろんVSCodeの基本設定も変更可能です。
まず変更方法ですが、画面左下の歯車アイコン⇨Settings（日本語化していない場合は設定）で設定画面が開きます。参考に、私の設定を公開しておきます。
-
Files: Auto Save= AfterDelay -
Files: Auto Save Delay= 1000
ファイル編集の度に手動でSaveしなくても、一定時間経過後に自動で保存してくれます。上記では1000ミリ秒に設定しています。 -
Fontsize= 14
目への負担を減らすため、フォントは大きめにしています。 -
TabSize= 2
タブキーを打った時のインデントをデフォルトの4から2にしています。Pythonを使う方は4の方が良いかもしれません。 -
Rendor= white Space All
空白文字は全て表示しています。 -
Editor: Word Wrap= on
一行が長いコードは折り返して表示されて、見やすくなります。
おわりに
さて、お好みの拡張機能でVSCodeをカスタマイズして頂けたでしょうか。
他にもお勧めの拡張機能があれば是非コメント欄で教えてください。
参考
初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
Vue.js&Nuxt.js超入門
[Vue.js入門 基礎から実践アプリケーション開発まで](Vue.js入門 基礎から実践アプリケーション開発まで)
Hello!! Nuxt.js Hello!!Vue&Nuxtシリーズ
Nuxt.jsビギナーズガイド
Nuxt.jsとFirebaseを使って爆速で何か作る前に読む本
実践Firestore
Nuxt.js - Vue.js on Steroids【Udemy】
超Vue.js 2 完全パック - もう他の教材は買わなくてOK！ (Vue Router, Vuex含む)【Udemy】
Nuxt JS入門決定版！Vue.jsのフレームワークNuxt JSの基本からFirebaseと連携したSPAの開発まで【Udemy】