アドビ社は、開発していた無料コードエディタBracketsのサポートを2021年9月1日に終了し、パートナー関係にあるマイクロソフト社が開発を主導するVisual Studio Codeへの移行を推奨しています。
Visual Studio CodeをBracketsのように利用できたり、もっと便利に利用できたりする拡張機能を解説します。
目次
Visual Studio Codeについて
Visual Studio Code（以降VSCode）は多くのプログラミング言語に対応しており、さらに、さまざまな拡張機能が用意されているテキストエディタです。
Windowsだけでなく、MacやLinuxにも対応し、OS間で動作しない拡張機能もないため、環境に左右されることなく使用できるのも人気の一因です。
同じくマイクロソフト社から公開されている総合開発環境の「Visual Studio」とは異なりますのでご注意ください。
※「Visual Studio」についてはコチラをご参考ください「Visual Studioとは？特徴や種類、使い方などをご紹介！」
Visual Studio Codeの主な特徴
オープンソース
VSCodeはマイクロソフト社が開発しているテキストエディタであり、brackets同様、誰でも無償で利用できるオープンソースです。VSCodeのソースコード自体もGitHubというWebサイトで誰でも閲覧可能な状態で管理されています。
動作が軽い
Bracketsは始めから日本語に対応していて、さらに、ある程度の機能が備わっているので、動作が重いのが難点でした。VSCodeは余計な機能が省かれているため、起動が早く、重たい処理であるコーディングを行っても、動作が軽くストレスを感じることなく作業を行えます。
豊富な拡張機能
VSCodeは、数多くの拡張機能が提供されています。使用目的に応じた拡張機能を追加することで、快適な開発環境が整います。
◇その他にも多言語対応・シンタックスハイライト・デバック機能が標準で付属（言語によってはインストールが必要）など、さまざまな特徴があります。
Visual Studio CodeをBracketsのように使用できる拡張機能
Brackets Extension Pack
Bracketsで人気の機能をセットにした拡張機能。インストールするだけで、VSCodeをBracketsのようにカスタマイズできます。
パッケージ内容
Live Server
VSCodeにローカルサーバーを立ち上げることができる拡張機能。ファイルを更新すると自動的にブラウザを更新できます。
IntelliSense for CSS class names in HTMLCSS
cssファイルにあるクラス定義からhtmlのクラス入力時に予測候補の呼び出しをしてくれます。
CSS Peek
⌘コマンド（Windowsの場合は、Ctrl）を押しながらclass名をホバーするとクラス名の色が変わり、クリックすると適用されているスタイルが確認できます。そのままcssの編集も可能です。
Brackets keymap
BracketsのショートカットキーをVSCodeで利用できるように設定してくれる拡張機能
もっと便利に利用できる拡張機能について
Japanese Language Pack for VSCode
VSCodeを日本語表示で利用できるようにしてくれます。インストール後、VSCodeを再起動することで表示が切り替わります。
Beautify
自動でインデントを整えてくれます。瞬時にインデントを整えてくれるので、作業が効率的に進められるとともに、コードを他人から見やすく・美しくできます。
Auto Rename Tag
開始タグ・閉じタグのいずれかを修正した時に、対になるタグも一緒に自動で修正してくれます。開始タグ・閉じタグを両方同じタグにしないとエラーが出てしまうので、変更忘れ防止にもなる便利な機能です。
Auto Close Tag
タグを記述する時に、開始タグを入力すると自動で対になる閉じタグを記述してくれます。開始タグを記述するだけなので、記述量を格段に減らしてくれます。
PHP Intelephense
PHPの自動インデントができます。インストール後に簡単な設定が必要ですが、主流になっているWordPressでのWeb制作を快適に進めることができます。
Azure Cache
Azure Cache for Redis の拡張機能で、Azureのサブスクリプションにアクセスし、そのデータを確認できます。この拡張機能では、一般的な構成 だけでなくRedisのすべてのデータ型もサポートされています。
Redisキーを一致式によってフィルター処理できるので、アプリケーションの開発・デバッグ・テストに集中する時間を、より多く自由に取れるようになります。
※Azure Cache for Redisについてはこちらをご参考ください
◇その他にもさまざまな拡張機能がありますが、拡張機能は入れすぎると動作が重くなってしまいます。10個前後に絞ってインストールするようにしましょう。
まとめ
VSCodeは、Web制作を始めたばかりの方から開発者まで幅広く利用することができます。もちろんエディタの選択は自由ですので、AtomやSublime Textなど好きなエディタを選択しても問題ありません。ほとんどのエディタは無償で利用できるので、まずは利用してみて拡張性や相性の良さなど自分に合ったものを選びましょう。
マーケティングでお悩みでしたら、
Bigmacにお任せください。
