はじめに
VSCode（VisualStudioCode）を使用して開発を行う上で便利だった拡張機能を紹介します。
後半ではVue.js/Nuxt開発者向けの拡張機能も紹介しています。
この記事の対象者
- VSCodeを使っている人
- VSCodeの拡張機能をあまり使いこなせていないと思う人
- Vue.jsの開発をしている人
基本編
Prettier
コード整形をしてくれます。これがないと生きていけないレベルです（大袈裟）
PHPやTailwindなどは初期装備では対応していないので、別途プラグインを追加する必要がありますが、プラグインが豊富なのでとっても便利。プロジェクトのpackage.jsonに入れることで、プロジェクト間のソースコードが整います。
ESLint
JavaScript のための静的検証ツールです。
コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立ちます。
開発環境に合わせた細かい設定もできます。
Auto Close Tag
開始タグを書いたタイミングで自動で閉じタグを作成してくれる拡張機能です。
私は初期設定のままですが、開始タグ作成時ではなく</を書いたタイミングで閉じタグを作成するなどの設定もできるそうです。
（あらかじめ書いたテキストの両側にタグを追加したい時はこの設定の方が便利かも…）
Auto Rename Tag
開始タグの名前を変更すると自動的に終了タグもリネームしてくれる便利機能です。
コピペする必要もないし、変更し忘れることも、開始タグと閉じタグでタイポをすることもないのでかなり重宝しています。
Code Spell Cheker
タイプミスをお知らせしてくれる拡張機能です。英単語として間違っている箇所には青い波線が出ます。
これを使うようになって「ちゃんと書いたはずなのになんか動かない…（タイポが原因）」ということが激減しました。
Tabnine
AIが学習してソースコードの補完をしてくれる拡張機能です。
Githubで公開されている約200万のソースファイルを参考にし、機械学習モデル（GPT-2）を使うことでオートコンプリートを提供しているそうです。
Tabnineの候補だけでソースが書けちゃうこともあるくらいすごい機能です。
※誤って選択したものも学習してしまい、候補として出してくるので注意です、私はwidthとwindowで引っ掛かりました。
GitLens
Gitとの連携をしてくれて、誰がいつそのファイルを変更したのかを出してくれます。
また、過去の変更履歴もVSCodeから確認できるようになります。
Vue開発向け
Vetur
VSCodeのデフォルトの設定では、Vueに対してシンタックスハイライトが適用されないので、別途拡張機能をインストールする必要があります。
これがないと真っ白になってしまうので必須の拡張機能だと思っています。
Vue Snippets
スニペットとは一般的に「断片」という意味になりますが、IT用語としてはプログラミングなどで再利用可能なソースコードを表します。
スニペットを用意しておくと、必要な時に必要なソースコードを簡単に呼び出して展開することが可能となりますので、作業効率を上げることができます。
キーボードのユーザ辞書のようなもので、事前に登録した内容をショートカットキーのような感覚で呼び出せます。毎回コピペをするのも大変なので、助かっています。
これはVueに対応しているものですが、VSCodeに直接スニペットを登録することも可能だそうです。
【参考サイト】
VSCodeに独自のコードスニペットを登録する
おまけ
vscode-pets
画面に猫やトトロを飼うことができます。可愛いので息抜きにどうぞ。
VSCode Themes
VSCodeのテーマの拡張機能一覧サイトです。自分好みのテーマを探して拡張機能を入れれば見やすさと可愛さで開発効率が上がります◎
おわりに
VSCodeを使っていて便利だな、と思うものをまとめてみました。
拡張機能の使いこなしかたで作業効率が大幅に変わるので、どんどんカスタマイズして使いやすいエディターにしていきましょう〜！
【参考サイト】
ESLint 最初の一歩