Bracketsのサポート終了、Visual Studio Codeへの移行と違いについて

Bracketsのサポート終了、Visual Studio Codeへの移行と違いについて。

アドビ社は、開発していた無料コードエディタBracketsのサポートを2021年9月1日に終了し、パートナー関係にあるマイクロソフト社が開発を主導するVisual Studio Codeへの移行を推奨しています。
Visual Studio CodeをBracketsのように利用できたり、もっと便利に利用できたりする拡張機能を解説します。

Visual Studio Codeについて

vscode

Visual Studio Code(以降VSCode)は多くのプログラミング言語に対応しており、さらに、さまざまな拡張機能が用意されているテキストエディタです。
Windowsだけでなく、MacやLinuxにも対応し、OS間で動作しない拡張機能もないため、環境に左右されることなく使用できるのも人気の一因です。

同じくマイクロソフト社から公開されている総合開発環境の「Visual Studio」とは異なりますのでご注意ください。
Visual Studio」についてはコチラをご参考くださいVisual Studioとは?特徴や種類、使い方などをご紹介!」

Visual Studio Codeの主な特徴

VSCodeの主な特徴

オープンソース

VSCodeはマイクロソフト社が開発しているテキストエディタであり、brackets同様、誰でも無償で利用できるオープンソースです。VSCodeのソースコード自体もGitHubというWebサイトで誰でも閲覧可能な状態で管理されています。

動作が軽い

Bracketsは始めから日本語に対応していて、さらに、ある程度の機能が備わっているので、動作が重いのが難点でした。VSCodeは余計な機能が省かれているため、起動が早く、重たい処理であるコーディングを行っても、動作が軽くストレスを感じることなく作業を行えます。

豊富な拡張機能

VSCodeは、数多くの拡張機能が提供されています。使用目的に応じた拡張機能を追加することで、快適な開発環境が整います。


◇その他にも多言語対応・シンタックスハイライト・デバック機能が標準で付属(言語によってはインストールが必要)など、さまざまな特徴があります。

 

Visual Studio CodeをBracketsのように使用できる拡張機能

Brackets_Extension_pack

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で利用できるように設定してくれる拡張機能

もっと便利に利用できる拡張機能について

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にお任せください。

バナー制作
バナーlefty
バナー制作
バナー総合
バナー制作
バナー総合
LINEで送る
Pocket

  • この記事を書いた人
  • 最新記事