Brackets のサポートが終了したので Visual Studio Code (VSCode) を使う
![記事ヘッダー_VSCodeを使う](https://www.ushiblo.com/images/2021/09/393aed148d13092cbabaa12e72b5bdd2.jpg)
2021年9月で Brackets のサポートが終了してしまった…。(´・ω・`)
一応代替エディタとして推奨されているのが VSCode (Visual Studio Code) 。
というわけで、乗り換えをした時にやったであろうインストールや設定なんかの作業内容をメモっときます。
VSCode のインストール
とっとと本題。Brackets や VSCode については後の方にまとめます。
また、私の環境は Windows10 なので、それを前提とした内容となります。
VSCode (zip版) の入手
こちらのサイトから入手できます。
今回は VSCode をポータブル化したいので zip版 を入手します。
ちなみに私は Windows10 64bit の zipファイルをダウンロード。
![VSCode (zip版)の入手①](https://www.ushiblo.com/images/2021/09/d07c1b13b068fc0aa58e566204550991-480x270.jpg)
![VSCode (zip版)の入手②](https://www.ushiblo.com/images/2021/09/8262fc037fe0dae0c679e565fd7daeba-480x270.jpg)
ダウンロードが完了したら解凍(展開)。
![VSCode (zip版)の解凍](https://www.ushiblo.com/images/2021/09/3b773361d3da092f368f5f53dc8ee434-480x271.jpg)
解凍されたフォルダは任意の場所に配置。
VSCode ポータブル化
続いて VSCode をポータブル化する。
ポータブル化については公式サイトの次のページに詳しい手順が書かれている。既に利用している VSCode をポータブル化する手順も書かれている。
data フォルダーの作成
VSCode を展開したフォルダ内に「data」フォルダを新たに作成する。
![data フォルダの作成](https://www.ushiblo.com/images/2021/09/dcd838c0866369029dc0cbc69242cffa-480x270.jpg)
「data」フォルダを作成後に code (VSCode) を起動すると…
![VSCode の実行](https://www.ushiblo.com/images/2021/09/97fa237872ce69c47dffe19ce4698988-480x270.jpg)
設定などの関連ファイルが「data」フォルダ内に作成される。
![data フォルダに保存された VSCode の関連ファイル](https://www.ushiblo.com/images/2021/09/97a266255b546b58c09493b4fb4a997b-480x270.jpg)
TMP フォルダの作成
VSCode が使用するTMPフォルダも「data」と同様に VSCode のフォルダ内に配置できる。
ちなみにデフォルトだとシステムが使用している一時フォルダ(c:\Users\<username>\AppData\Local\Temp かな?)と同じパスになるようです。
VSCode のフォルダ内にTMPフォルダも含めるのであれば、フォルダ内に「tmp」を作成する。
![TMPフォルダの作成](https://www.ushiblo.com/images/2021/09/bd7350f65cd9905924c7c67b37816450-480x270.jpg)
インストール完了
これで VSCode のインストールは完了。
ポータブル化もできているので、バックアップやパソコンの買い換えなどの際に VSCode のフォルダをまるっと保管したり移動すればOK…なはず…
私の場合だと、この手のツール類はバックアップを兼ねてクラウドのストレージに配置し、別の PC からでも同じ設定でツールを使えるような環境にしています。そのためのポータブル化…_(┐「ε:)_
VSCode の起動
VSCode の準備が終わったので起動してみます。
code.exe の実行
VSCode フォルダの中にある「Code.exe (あるいは Code)」を実行すると、VSCode が起動する。
![VSCode の起動](https://www.ushiblo.com/images/2021/09/787c60267e81ec2b7273e77b332b374e-480x270.jpg)
初回起動だと画像のようなメッセージが表示される場合がある。これは「日本語パックをインストールするか?」と聞いているだけなので「インストールして再起動」をクリックしインストールを行う。
![日本語パックに関するメッセージ](https://www.ushiblo.com/images/2021/09/ee41380ab94729434c5bdb047788d16c-480x270.jpg)
起動すれば完了。
zip版の場合、起動用のショートカットなどは作られないので必要に応じて作成するとよさげ。
![VSCode のインストール完了](https://www.ushiblo.com/images/2021/09/e29d618a23b722412b46264e548944da-480x270.jpg)
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 Extension Pack のインストール](https://www.ushiblo.com/images/2021/09/3a9e6d2df61e558cf127373515cb60db-480x270.jpg)
Brackets や VSCode について
どちらも多機能なソースコードエディタ(プログラミング向きのエディタ)です。
私の場合は主に HTML や CSS 用のエディタとして使っていました。
Brackets
前述の通りで Adobe によるサポートは終了したが、エディタ自体はサポート終了時点のものがフォークされ、有志の手によって開発が継続されているようです。
Visual Studio Code (VSCode)
Brackets のサポート終了の際、代替推奨エディタで VSCode が紹介されていた。Brackets の操作感を再現するような拡張機能も用意されている。
さいごに
Brackets のサポート終了は残念でしたが、VSCode も拡張機能が豊富ですごく便利ですね。
ただ、設定周りや操作感に慣れない箇所もまだあるので、とにかく使いまくって馴染ませようと思います。
と VSCode を使う流れで来ましたが、Brackets の開発そのものは何とか継続しているようですので、そのまま使い続けるといった選択もアリですね。
じゃまた次回~_(┐「ε:)_
ディスカッション
コメント一覧
まだ、コメントがありません