Brackets のサポートが終了したので Visual Studio Code (VSCode) を使う

2021年9月15日2021年10月1日WindowsBrackets,VSCode,インストール,エディタWindows,Brackets,VSCode,インストール,エディタ

2021年9月で Brackets のサポートが終了してしまった…。(´・ω・`)
一応代替エディタとして推奨されているのが VSCode (Visual Studio Code) 。

というわけで、乗り換えをした時にやったであろうインストールや設定なんかの作業内容をメモっときます。

VSCode のインストール

とっとと本題。Brackets や VSCode については後の方にまとめます。
また、私の環境は Windows10 なので、それを前提とした内容となります。

VSCode （zip版） の入手

こちらのサイトから入手できます。

今回は VSCode をポータブル化したいので zip版 を入手します。
ちなみに私は Windows10 64bit の zipファイルをダウンロード。

ダウンロードが完了したら解凍（展開）。

解凍されたフォルダは任意の場所に配置。

VSCode ポータブル化

続いて VSCode をポータブル化する。
ポータブル化については公式サイトの次のページに詳しい手順が書かれている。既に利用している VSCode をポータブル化する手順も書かれている。

data フォルダーの作成

VSCode を展開したフォルダ内に「data」フォルダを新たに作成する。

「data」フォルダを作成後に code （VSCode） を起動すると…

設定などの関連ファイルが「data」フォルダ内に作成される。

TMP フォルダの作成

VSCode が使用するTMPフォルダも「data」と同様に VSCode のフォルダ内に配置できる。
ちなみにデフォルトだとシステムが使用している一時フォルダ（c:\Users\<username>\AppData\Local\Temp かな？）と同じパスになるようです。

VSCode のフォルダ内にTMPフォルダも含めるのであれば、フォルダ内に「tmp」を作成する。

インストール完了

これで VSCode のインストールは完了。
ポータブル化もできているので、バックアップやパソコンの買い換えなどの際に VSCode のフォルダをまるっと保管したり移動すればOK…なはず…

私の場合だと、この手のツール類はバックアップを兼ねてクラウドのストレージに配置し、別の PC からでも同じ設定でツールを使えるような環境にしています。そのためのポータブル化…_(┐「ε:)_

VSCode の起動

VSCode の準備が終わったので起動してみます。

code.exe の実行

VSCode フォルダの中にある「Code.exe (あるいは Code）」を実行すると、VSCode が起動する。

初回起動だと画像のようなメッセージが表示される場合がある。これは「日本語パックをインストールするか？」と聞いているだけなので「インストールして再起動」をクリックしインストールを行う。

起動すれば完了。
zip版の場合、起動用のショートカットなどは作られないので必要に応じて作成するとよさげ。

Brackets 拡張機能のインストール

ついでに Brackets の操作感に近づける拡張機能もインストールしてみる。

「Brackets Extention Pack」拡張機能

拡張機能は「Brackets Extention Pack」という名前で、次の4つの拡張機能がまとめて追加される。

• Brackets Keymap
  Brackets ライクなショートカットキーになる
• Live Server
  ソース等をブラウザ上で実行し確認できる
• CSS Peek
  HTMLタグに振られたCSSクラス名からCSSの定義箇所にジャンプ出来たりする
• IntelliSense for CSS class names in HTML
  読み込んでいるCSSからクラス名を補完できるようになる

拡張機能のインストール

インストールの方法は、VSCode 左側にある「拡張機能」（もしくは Ctrl+Shift+X）から拡張機能のタブを表示させ、「Brackets Extention Pack」を検索しインストール。

Brackets や VSCode について

どちらも多機能なソースコードエディタ（プログラミング向きのエディタ）です。
私の場合は主に HTML や CSS 用のエディタとして使っていました。

Brackets

Adobe が開発したソースコードエディタ。

前述の通りで Adobe によるサポートは終了したが、エディタ自体はサポート終了時点のものがフォークされ、有志の手によって開発が継続されているようです。

Visual Studio Code (VSCode)

Microsoft が開発したソースコードエディタ。

Brackets のサポート終了の際、代替推奨エディタで VSCode が紹介されていた。Brackets の操作感を再現するような拡張機能も用意されている。

さいごに

Brackets のサポート終了は残念でしたが、VSCode も拡張機能が豊富ですごく便利ですね。
ただ、設定周りや操作感に慣れない箇所もまだあるので、とにかく使いまくって馴染ませようと思います。

と VSCode を使う流れで来ましたが、Brackets の開発そのものは何とか継続しているようですので、そのまま使い続けるといった選択もアリですね。

じゃまた次回～_(┐「ε:)_