デザイナーのためのBracketsからVisual Studio Codeへの移行

スポンサーリンク
スポンサーリンク

Bracketsのサポート終了

Adobeが開発していた無料のテキスト・エディターBrackets(ブラケッツ)が、2021年9月1日をもってサポート終了となった。サポートは終了するが、特に大きな問題もないので使い続けても問題ない。公式サイトでは、ダウンロードのリンクが削除されているため、必要であれば下記記事からダウンロードして、インストーラーを保存しておいた方が良いだろう。
WEBデザイナーでBracketsをテキスト・エディターとして使用している人は多い。
私の場合、Brackets環境は残しつつ、今後コーディングにはVisual Studio Codeをメインに使っていこうと考えている。いつまでも終わったソフトウェアに固執していても仕方がないからだ。

スポンサーリンク

Visual Studio Codeへの移行

Bracketsのサポート終了の告知と共に、Adobeが公式に移行を勧めているのが、MicrosoftのVisual Studio Code(ビジュアル・スタジオ・コード)である。Windows、Mac(Apple Siliconにも対応)、Linuxの各OSに対応している。Visual Studio Codeは2015年に公開された、Bracketsと同様のオープンソースの無料テキスト・エディターだ。Bracketsよりもプログラマー寄りの印象があるが、ユーザーインターフェイスは、Atom、Sublime TextやBracketsに似ているので、移行はそれほど難しくないだろう。

非プログラマー系でHTML、CSS、JavaScriptのコーディングが中心のWEBデザイナーや、Markdown記法の原稿を扱うライターやDTPデザイナー、オペレーター向けに、出来る限りやさしく設定方法を述べる。以下は全てWindowsでの説明だが、Macも同じである。

Visual Studio Code – コード エディター | Microsoft Azure
ほぼすべての言語で動作し、任意の OS で実行される強力なコード エディターである Visual Studio Code を使用して、Azure 上で編集、デバッグ、デプロイを行います。

上記リンクからダウンロードし、任意の場所にインストールする。特に難しい事はない。

スポンサーリンク

Visual Studio Codeの設定

Visual Studio Codeは、Bracketsと同様、機能拡張によって機能を追加してゆく。

Visual Studio Codeの初期画面

①をクリックし、②に検索する機能拡張名を入力する。

Visual Studio Codeの日本語化

日本語化するために、②にjapaneseと入力すると、候補の一番目にJapanese Language Pack for Visual Studio Codeが表示されるのでこれを選択。

インストール完了直後の画面

青い Install ボタンをクリックしインストールが完了したら、右下の Restart ボタンをクリックしVisual Studio Codeを再起動。

メニューが日本語化されている

上部メニューが日本語化された。しかし細かい部分はまだなのでここでさらに設定をする。

Configure Display Languageの候補が表示された

Control(Command)+Shift+Pを押すと、入力欄が表示されるのでそこにdisplayと入力する。
そうするとConfigure Display Languageが候補として表示されるのでクリック。

表示言語の選択

表示言語の選択のドロップダウンからjaを選択し、再起動すると日本語化される。

日本語化された

以上で、全てのメニューが完全に日本語化された。

Visual Studio Codeのライヴ・プレビュー

Brackets最大の特徴は、コーディング中に保存をしなくても、Chromeブラウザーでリアルタイムにコードの追加・修正が反映される事にある。この機能を機能拡張により再現する。

機能拡張の検索欄にliveと入力すると、Live Serverが表示されるので選択して インストール

赤枠内の歯車アイコンをクリックした画面

Live Serverをインストール後、左下にある歯車アイコンをクリックし設定を選択。

設定画面

設定画面が開き、その左列に表示される項目からテキスト エディター→ファイルを選択すると、右列にAuto Save項目が表示される。

Auto Saveのドロップダウン項目からafterDelayを選択。

さらにAuto Save下のAuto Save Delay項目の数値を1に設定。

以上でライヴ・プレビュー設定は完了。

ライヴ・プレビュー停止中
ライヴ・プレビュー稼働中

Live Serverインストール後、ウインドウ右下にGo Liveと表示されるのでこれをクリックすると、ライヴ・プレビューが開始される。ライヴ・プレビューを停止する場合は、Port:5500をクリックする。

Go Liveが表示されないなど、上手くライヴ・プレビューされない場合は、Visual Studio Codeを再起動し、ファイル→フォルダーを開く…(Macの場合は、ファイル→フォルダーをワークスペースに追加…)を選択しプロジェクトのフォルダを開き、さらにその中の任意のファイル(HTMLファイルなど)を開くとライヴ・プレビューが開始される。
ファイル管理の基本はBracketsと同様にプロジェクトをフォルダ単位で管理する。

まとめ

以上2つの機能拡張をインストールする事で、Bracketsのデフォルト状態と同様になった。後はそれぞれ扱いやすいようにカスタマイズすればよい。
私自身まだ本格的には使用していないので、今後様々な機能拡張のインストールをして、自分の使いやすいようにカスタマイズする予定である。

Visual Studio Code実践ガイド —— 最新コードエディタを使い倒すテクニック | 森下 篤 |本 | 通販 | Amazon
Amazonで森下 篤のVisual Studio Code実践ガイド —— 最新コードエディタを使い倒すテクニック。アマゾンならポイント還元本が多数。森下 篤作品ほか、お急ぎ便対象商品は当日お届けも可能。またVisual Studio C...

タイトルとURLをコピーしました