Visual Studio Codeの初期設定

自分でやるをバックアップするソクラテツチップスのバナー画像

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

 /

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にしておかないとブラウザは自動更新されません。

vscodeへのスムーズな移行に喜ぶチャールズ卿
これなら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(html)
DNSプリフェッチでリレーションしているイメージ画像

GoogleAdsense広告を速く表示する

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

PC(html/CSS)
ソースコードのハイライト表示のやり方を説明したページへのリンク画像

ソースコードのハイライト表示のやり方

負担が少ない軽量ライブラリを使用して、ハイライト表示する方法を解説。

PC(CSS)
preによるソースコードがはみ出す時の修正方法

preタグをきちんと整形をする方法

レスポンシブデザインのpre要素(Hilight.js)が折り返されない、改行されない場合の対処法を解説します。

レイアウト横揺れ・はみ出し修正方法

PC(CSS)
縦スクロール時に横揺れするサイトの修正方法

縦スクロール時に横揺れするサイトの修正方法

縦クロールしたときブレたり横揺れてしまう場合のCSS対処法を解説(スマホタブレット)

PC(CSS)
中央寄せした文字列を左揃えで折り返す方法をイメージした画像

中央寄せした文字列を左揃えで折り返す方法

折り返しは左寄せ、文字は中央に配置したい。簡単だけどヘッダーエリアでは必須テクです。

PC(CSS)
グーグルアドセンス広告がはみ出す時の修正方法

グーグルアドセンス広告がはみ出す時の修正方法

レスポンシブ広告が横にはみ出すために起こるスマホの横揺れを解消!

PC(HP)
Googleアドセンスが中央に寄らない場合の対処法解説画面

Googleアドセンスが中央に寄らない場合のやり方

デフォルトで画面いっぱいに表示されるアドセンスですが、なぜかセンタリング出来ない場合の対処法を解説します。

TOP