入れておくと便利なvscodeの拡張機能
今回はvscodeに入れておくと便利な拡張機能、プラグインについてまとめてみました。
[HTML/CSS]
CSS Peek => HTMLファイル上でclassにフォーカスをあてると、定義されたCSSスタイルをチェックしたり、class名からCSSファイルを検索したりできる。
open in browser => 現在編集中のHTMLファイルをブラウザで開くことができる拡張機能。
Live Server => ローカルでサーバを起動して、ブラウザで表示する。ファイルを編集すると、リロードすることなしに自動でファイルに反映される。
Auto Complete Tag => HTML編集中において、自動でタグを閉じ、またタグ名を変更したときは対応するタグ名も自動で更新する。
indent-rainbow => インデントに虹のように色を付けて見やすくなる。色を設定することもできる。
[JavaScript]
ESLint => JavaScript のための静的検証ツール。コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立つ。すべての検証ルールを自由に on/off したり、自分のプロジェクトに合わせたカスタムルールを簡単に作れるのも便利。
Vetur => vscodeだけではVue.jsをうまく扱えないので、必要。vueファイルのシンタックスハイライト、Vueコマンドの補完、整形などを支援する。Vue.jsを用いた開発では必須の拡張機能。
vuetify-vscode => Vue.jsの格好いいデザインを提供するフレームワーク「Vuetify」の公式プラグイン。コードを書いている時にVuetifyのタグを予測で表示できるようになる。
[Ruby]
endwise => defを書くと、自動でendを挿入してくれる。
ruby-rubocop => ファイル保存のタイミングでrubocopを自動で走らせることができる。rubocopとはRubyの静的コード解析を実行するgem。
[Git]
GitLens => コミット単位でのファイル差分、最新のコミット内容とコミットした人が表示される。
Git Graph => コミット単位でのファイル差分、gitのログ、ローカルとリモートのブランチをグラフィカルに閲覧できる。
Git History => ブランチ別のgitのログが見やすくなる。
[その他]
Settings Sync => VSCodeの設定をオンライン上で保存し、復元できる。PCを変えるたびに拡張を入れ直したり、設定を変更し直したりする必要がなくなる。
Remote – SSH => SSH経由でvscodeを用いて、リモートサーバーのファイルを編集できるようになる。これだとリモート先にvscodeがなくても大丈夫。また、リモートサーバーだけでなくてvagrantなど仮想環境でも使える。
vscode-icons => ファイルの左横に拡張子（html,rbなど）の種類に応じて、アイコンが表示される。見やすくなる。
Prettier => ルールに従い、コードをフォーマットする。グループで開発する時、Prettierでルールを統一すると、混乱が減る。
Japanese Language Pack => 日本語化のためのプラグイン。
Path Intellisense => パスの入力を支援する。
Output Colorizer => 出力結果を装飾。
Log File Highlighter => ログファイルを装飾。
Trailing Spaces => 行末の空白を強調する。
Markdown All in One => Markdownで文章を書いていると、太字や見出しをショートカットで入力できたり、表を見やすく整形してくれる。
Slack Chat => ディタを閉じることなく、Slackチャットが出来る拡張機能。コーディングしながら質問したり、確認したりできる。
