コードエディター「Brackets」の移行用ツールとして「VisualStudioCode」を「Bracketsがサポート終了！推奨エディタ「VisualStudioCode」に乗り換えよう！」という記事で紹介しましたが、この「VisualStudioCode」をWeb制作で快適に使う拡張機能を紹介したいと思います。
「VisualStudioCode」は下記URLよりダウンロード出来ます。
「VisualStudioCode」の拡張機能とは
「VisualStudioCode」では、デフォルトの状態から追加で拡張機能を入れることによって自分好みのエディタに変えることが出来ます。
また、Web制作にとって必要な機能を拡張機能を使うことによって追加できるのでコーダーの方にとっては必須の機能とも言えます。
ポイントとしては
- 「VisualStudioCode」の拡張機能画面から検索が可能
- 使いたい拡張機能を探してインストールボタンを押すだけでインストールが完了
- どの拡張機能を使っているか管理画面で一覧が表示されるので管理が簡単
- 拡張機能の更新確認機能
等があります。
お勧めの拡張機能
ここではWeb制作に便利な拡張機能を紹介します。
Japanese Language Pack for Visual Studio Code
「VisualStudioCode」ですが、最初の表示画面は英語になっています。
日本語に対応させるための拡張機能です。
Brackets Extension Pack
「VisualStudioCode」に「Brackets」で人気の機能をセットでインストール出来る拡張機能。
これをインストールするだけで「VS Code」を「Brackets」っぽくカスタマイズ出来ます。
「Brackets」から移行するのであれば入れておけば便利です。
次の機能がまとめて追加されます。
- Brackets Keymap：キーバインディングのカスタマイズ
- Live Server：ソースコードの変更をWebブラウザーでリアルタイムプレビュー
- CSS Peek：CSSクラスの定義を覗き見
- IntelliSense for CSS class names in HTML：ワークスペースで利用されているCSSクラスを自動補完
HTMLHint
htmlコードのエラーチェックをしてくれます。
CSSTree validator
CSSのコードのエラーチェックをしてくれます。
Notepad++ Keymap for VS Code
エディタとして人気がある「Notepad++」のキーボードショートカットを「VisualStudioCode」で使えるようにする機能です。
Trailing Spaces
ソースコードを書いていると気づかないうちにスペースやタブが入ってしまう事が多々あります。
「Trailing Spaces」をいれておくと、コード中に半角スペースが混じっている時にハイライトで表示してくれます。
zenkaku
「Trailing Spaces」と似た機能ですが、日本語を使用していると全角スペースが入ってしまうことがあります。
「zenkaku」を入れておくとコード中に全角スペースが入っているとハイライト表示してくれます。
Bracket Pair Colorizer
対応する括弧に縦横線でハイライト表?をしてくれます。
どうしても?いコードになる場合に見やすくなります。
Highlight Matching Tag
対応するタグを強調表?します。
コードの対応タグが強調されるので?やすくなります。
PHP Intelephense
Web制作を行う場合にPHPを使う場合があると思います。
PHP開発の際のコード補完、関数表示等の表示サポート機能が入っています。
最後に
今回紹介した拡張機能には、ミスに気づきやすくなったり、作業側の操作を減らすことによってコーディングを楽にする機能を中心にまとめてみました。
ぜひ、参考にして下さい。
コメント