Visual Studio Codeの初期設定

2021.5.1 

Visual Studio Codeをカスタマイズ-Brackets Extension Pack-

Planet20xxPC用バナー Planet20xxモバイル用バナー

Brackets起動時のメッセージで知った人も多いかと思いますが、Adobe Bracketsは2021年9月1日をもってサポート終了になります。内容は以下のとおり。

2021 年 9 月 1 日、Adobe は Brackets のサポートを終了します。 Brackets の使用、保守、改善を継続する場合は、GitHub でプロジェクトをフォークできます。 Visual Studio Code は、オープンソース上に構築された Microsoft の無料コードエディターです。Adobe は Microsoft とパートナー関係にあり、このエディターへの移行をお勧めします。
引用元:Brackets公式

Bracketsはライブビューで確認しながら作業ができたので、かなり重宝していた人も多いはず。そして何より軽い。

そんな使い慣れたエディターからの移行はすごく残念ですが、MicrosoftのVisual Studio CodeでもBracketsっぽくカスタマイズできるので、早速やっていきたいと思います。Let's Go( ´ ▽ ` )ノ

Visual Studio Codeのインストール

アドビbracketsからvisual studio codeへ上手に移行しよう画像
無料だし、Microsoftならやってみよう

Bracketsユーザーの方のために、専用のダウンロードページが用意されています。Visual Studio Codeインストール

Bracketsユーザーのためのダウンロード専用ページvisual studio code画像

拡張機能プラグイン

Brackets Extension Pack

Visual Studio Codeをインストールしたら、右にある拡張機能Brackets Extension Packも続いてインストールします。見失った方はこちら→Brackets Extension Packインストール

アドビbrackets風にカスタマイズできるようインストールされる拡張機能を示した画像

Brackets Extension Packパッケージ内容

Live Server ローカルサーバーでブラウザを自動リロードできる
IntelliSense for CSS class names in HTML CSSクラスの入力時に予測候補の呼び出しをしてくれる
CSS Peek Cntl+クリックで、cssの定義を確認することが出来る
Brackets keymap ショートカットキーを変更できる。Cntl+K→Cntl+Sで画面表示

Live Server

HTMLを編集した時にリアルタイムでブラウザの状態を反映させる拡張機能です。

 

自動更新が出来ない場合

ライブビュー機能は右下の「Go Live」をクリックすると確認できますが、「ファイル」→「自動保存」をONにしておかないとブラウザは自動更新されません。

これならBracketsからスムーズに移行出来そうだねワトソン君

日本語化パッチの手順

手順1
CDNとサーバー読み込みのイメージ画像

メニュー[view]からCommand Paletteをクリック

※ショートカット[Cntl]+[Shift]+[P]でも展開できます。
手順2
DNSプリフェッチでリレーションしているイメージ画像

Configure Display Languageをクリックすると

  • en
  • Install additional langages

と表示されるので、下の「Install additional langages」をクリック

手順3
スマホでの画像遅延読み込みイメージイラスト

サイドバー(画面左)に言語候補が表示されたら、Japanese Language Pack ~をクリックしてインストール

インストール終了後、画面右下ポップアップで再起動を求められるので、Restartをクリック

手順4
画像の最適化手順を説明したページへのリンク画像

日本語表示になりました。

※サイドバーは [Cntl]+[Alt]+[H]で表示/非表示の切り替えが可能です。

おすすめ機能とプラグイン

おすすめ機能
自動整形してくれる変化を示した画像

[Shift]+[Alt]+[F]で自動整形します。自動整形とは上図のようにインデントし、ラインでつながることで視認性を高めます。

自動整形することで行番号が変わっています。
PlugIn
JSCodeおすすめプラグインのHighlight Matching Tagを紹介する画像
Highlight Matching Tag

HTMLの開始タグと対応する終了タグをハイライト表示してくれるプラグイン

PlugIn
自動でリネームしてくれるオートリネームタグというプラグイン紹介画像
Auto Rename Tag

開始タグを修正したときに終了タグも自動修正してくれるプラグイン

Settings.jsonで好みの設定にする

VS Codeを詳細に設定できるSettings.jsonの記述場所を表示する手順を示した画像

Settings.Jsonの記述

Settings.Jsonではさまざまな設定が出来ます。特に初期設定では識別しづらいハイライト表示の色設定などがカスタマイズ出来るので、JS Codeを好みのエディターに仕上げることが可能です。Settings.Jsonの場所は下記の手順で開けます。

  1. 画面左下の歯車マークをクリック
  2. 展開されたコマンドの設定をクリック
  3. 画面右上の設定(JSON)を開くをクリック

Settings.jsonの記述例

{
  "workbench.colorCustomizations": {// カラーテーマに上書きする個別の設定
    "editor.selectionBackground": "#f861cbdc",// 選択領域の強調色
    "editor.selectionHighlightBackground": "#05c5f596",// 選択している行の強調色
    "editorBracketMatch.background": "#ffff0077",// 対応する括弧の背景色   
 }
 "highlight-matching-tag.styles": {
  "opening": {
      "full": {
          "custom": {
              "backgroundColor": "rgba(220,220,220,.5)",
              "color": "#ffffff"
          }
      }
  }
}
  "editor.wordWrap": "on", // 右端で折り返す
}
    
ちょいメモ

settings.jsonの書き方は、最初括弧 {で始まり、最後に括弧 }で閉じる必要があります。

設定後

DNSプリフェッチでリレーションしているイメージ画像

flexboxを選択領域の強調色(ピンク)、同語はライトブルー。開始終了タグは、薄いグレーで色付けし、50%透過設定です。

まとめ

jsonに記載すれば初期設定から自分好みにアレンジできるので、Bracketsを越えたエディターに仕上げることが出来そうです。ただBracketsにあった編集箇所をライトブルーでハイライトする機能は今のところ見つけられてません。あると便利なんですけどね。

以上、最近までブランケットだと思っていたソクラテツがお送りしました( ´ ▽ ` )ノ

【関連記事】

PC(Javascript)
CDNとサーバー読み込みのイメージ画像

CDNとレンタルサーバーのjsファイル読み込み比較

jsファイルを利用できるCDNのパフォーマンスと稼働時間を調べてみました。

PC(html)
DNSプリフェッチでリレーションしているイメージ画像

GoogleAdsense広告を速く表示する

DNSプリフェッチで5つの参照先を事前リレーションするだけで、すばやく表示されます

PC(html/Javascript)
スマホでの画像遅延読み込みイメージイラスト

表示スピードアップ!画像遅延読み込み実装

PagespeedInsightのスコア改善に役立つ画像遅延読み込みの実装方法についてわかりやすく解説します

PC(HP)
画像の最適化手順を説明したページへのリンク画像

画像を軽くする最適化はお済みですか?

画像にはいろいろな情報が入っています。ムダな部分を削除して容量を小さくしましょう。

PC(HP)
Googleアナリティクスで特定のIP除外する方法

Googleアナリティクスで特定のIPアドレスを除外する方法

自分アクセスによる訪問カウントを取得しないための設定

PC(Windows)

WindowsでもHelveticaフォントを使いたい!Arialじゃ満足できない方必見

TOP