見出し画像

【Brackets】から【VS Code】に乗り換える

折橋 廉

※ 2023年5月　修正・加筆

プログラミングのためのテキストエディタ「Brackets」は開発元である Adobe のサポート終了が、'21年 9月に決定しています。今後使うエディタに困っている人も多いのではないでしょうか。

この記事は、そんな Brackets 難民の方向けに、「VS Code」に乗り換える方法をまとめます。
※ '21年 8月現在／windows 10 環境

※21.08.19　手違いで書いていた一万字超えの記事が消えて 5,000字になったので萎えて規模縮小しました。
※Git については勉強不足のため省きます。



01. インストール

以下のリンクからインストールしてください。

インストールされるフォルダを特に指定しないと、よく使われるLocal Disk（:C）の Program Files ではなく、Local Disk > ユーザー > 任意のユーザー > AppData > Roaming >  Code というフォルダが作られるようなので、ご注意ください。
※ フォルダ位置は環境による
※ AppData は隠しフォルダのためデフォルトでは表示されない


02. エディタの日本語化 

こちらの記事を参考に、日本語化の拡張機能を入れて日本語化しました。


03. 設定の同期

VSCode 1.48 から設定同期機能がリリースされ、アカウントに紐づけすることで設定を保存できるようになりました。
方法としては、「GitHubアカウント」「Microsoftアカウント」いずれかに紐づけする必要があります。

詳しくは以下の記事をご覧ください。


04. HTMLファイルなどをデフォルトでVS Codeで開く設定

Bracketsではなく、VS Codeに変更するには、以下の方法をとってください。

それぞれの拡張子のファイルを右クリック > プログラムから開く > 別のプログラムを選択 > VS Code を選択 。
「常にこのアプリを使って .php ファイルを開く」にチェック（実際は任意の拡張子です）。

フォルダのファイル表示が VS Code のアイコンに変わっていれば設定できています。


05. 折り返し表示の設定

VS Code は、デフォルトではエディタの端でコードが折り返されません。折り返しの設定をするために、以下の手順で設定します。

画像1

左下の歯車マークより「設定」を開き、「wordwrap」と検索、以下に設定。

Editer: Word Wrap → bounded
Editer: Word Wrap Column → 80

《設定の意味》
bounded : エディターの幅または Editor:Word Wrap Column で指定した幅のどちらか狭い方で折り返す

他の設定に変えたい場合は、以下の記事をご参考ください。


06. PHPを開いたときのエラーをなくす

PHPファイルを開くと以下のエラーが表示されます。

Cannot calidate since no PHP executable is set. Use the setting php.validate.executablePath’ to configure PHP executable.

PHP実行ファイルが設定されていないため、校正できません。 PHPの実行ファイルを設定するには、php.validate.executablePathの設定を使用してください。

phpをインストールした場所を確かめておく

PCに既に PHP がダウンロードされているという前提で書きます。まだの方は、以下の記事を参考に PHP 最新版を DL してください。

公式のリンクはこちら。

VS Code に php.exe ファイルのパスを指定する

エラーが出るのは、php.exe ファイルのある場所（パス）をVS Code で指定していないためです。これを設定することでエラーはなくなります。

以下の記事をご参考ください。

settings.json を以下に設定しました。コマンドパレット（Ctrl + Shft + P）> Open Settings (JSON) で開き、以下の記述を {} の中に加えます。

"php.validate.executablePath": "C:\\php-7.4.2\\php.exe", //①パス指定
"php.validate.run": "onType", //②（お好みで）リアルタイム構文チェックON

ファイルのパスと PHP のバージョンは、任意のものに書き換えてください。この場合は Local Disk 直下に PHP をインストールしている場合です。


07.  settings.json の設定

 以下の記述を {} の中に加えました。

 // コンテンツを再フォーマットしてはならないタグの、コンマ区切りの一覧
 "html.format.contentUnformatted": "pre, code, textarea, title, h1, h2, h3, h4, h5, h6, p, rt, rp, ruby",
 // インライン要素をフォーマット：しない
 "html.format.unformatted": null,
 "html.format.unformattedContentDelimiter": "pre,code,textarea,span",
 // <head>セクションと<body>セクションをインデント
 "html.format.indentInnerHtml": false,
 // 直前に改行を1つ入れるタグ：なし
 "html.format.extraLiners": "",
 // 要素の前にある既存の改行を保持する
 "html.format.preserveNewLines": true,
 // 1つのチャンク内に保持できる改行の最大数
 "html.format.maxPreserveNewLines": 2,
 // 1行あたりの最大文字数 (0=無効にする)
 "html.format.wrapLineLength": 0,
 // エディタのフォント
 "editor.fontFamily": "'SourceHanCodeJP-Medium', 'Source Han Code JP',  Consolas, 'Courier New', monospace",
 // テキストコピー時に書式設定を含める
 "editor.copyWithSyntaxHighlighting": false,
 // ドラッグアンドドロップで選択範囲のテキストを移動できるようにする
 "editor.dragAndDrop": false,
 // 貼り付けを行ったときに自動でフォーマット
 "editor.formatOnPaste": true,
 // 制御文字を表示
 "editor.renderControlCharacters": true,
 // エディター上での空白文字の表示方法
 "editor.renderWhitespace": "all",
 // 行の折りたたみ記号の表示方法
 "editor.showFoldingControls": "always",
 // 選択行の行番号ハイライト
 "editor.renderLineHighlight": "all",
 // 1つのタブに相当する半角スペースの数
 "editor.tabSize": 2,
 // 単語の区切り文字
 "editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?　、。！？「」【】『』（）",
 // カーソルの点滅スムーズ
 "editor.cursorBlinking": "smooth",
 //　スムーズスクロール
 "editor.smoothScrolling": true,
 // ホバー時メッセージ表示
 "editor.hover.enabled": false,
 // ウィンドウの名前
 "window.title": "${activeEditorMedium}${separator}${rootName}",
 // 名前重複時の名前付け規則
 "explorer.incrementalNaming": "smart",
 // 検索ビューの検索結果に行数を併記
 "search.showLineNumbers": true,
 // ファイル保存時に行末に改行を挿入
 "files.insertFinalNewline": true,
 // ファイル保存時に最終行以降の空行を削除
 "files.trimFinalNewlines": true,
 // ファイル保存時に各行の末尾にある半角スペースを削除
 "files.trimTrailingWhitespace": true,

詳細は以下の記事をご参考ください。

Visual Studio Code のおすすめ設定 (settings.json) 
https://www.cview.co.jp/osakatech/2021.04.20.dYMmFSxAihNBwoEkCys_X


08.  フォーマッター（整形）の設定

フォーマッターは Alt + Shift + F で 乱れたコードを綺麗に整えてくれる機能 です。
拡張機能のフォーマッター（Beautify）をHTMLに適用したところ、ユーザー設定で設定したインライン要素も整形されてしまったため、HTMLに関してはデフォルトで備わっている機能を使っています。

設定については、「07. settings.json の設定」にて以下の設定をすることで、インライン要素などを決めていますので、任意にご変更ください。

 // コンテンツを再フォーマットしてはならないタグの、コンマ区切りの一覧
 "html.format.contentUnformatted": "pre, code, textarea, title, h1, h2, h3, h4, h5, h6, p, rt, rp, ruby",
 // インライン要素をフォーマット：しない
 "html.format.unformatted": null,
 "html.format.unformattedContentDelimiter": "pre,code,textarea,span",
 // <head>セクションと<body>セクションをインデント
 "html.format.indentInnerHtml": false,
 // 直前に改行を1つ入れるタグ：なし
 "html.format.extraLiners": "",
 // 要素の前にある既存の改行を保持する
 "html.format.preserveNewLines": true,
 // 1つのチャンク内に保持できる改行の最大数
 "html.format.maxPreserveNewLines": 2,
 // 1行あたりの最大文字数 (0=無効にする)
 "html.format.wrapLineLength": 0,

HTML以外に拡張機能（Beautify）を適用するには以下の記述を settings.json（コマンドパレット  > Open Settings (JSON)）に加えます。

  // html
  "[html]": {
      // フォーマッターを既存のものに
      "editor.defaultFormatter": "vscode.html-language-features",
      //終了タグが自動で生成されるのを防ぐ
      // "editor.suggest.insertMode": "replace",
      // 自動フォーマット
      // "editor.formatOnSave": true
  },
  // js・css
  "[javascript]": {
      // フォーマッターをbeautifyに
      "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[css]": {
      // フォーマッターをbeautifyに
      "editor.defaultFormatter": "HookyQR.beautify"
      //終了タグが自動で生成されるのを防ぐ
      // "editor.suggest.insertMode": "replace",
  },
  // json
  "[json]": {
      "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[jsonc]": {
      "editor.defaultFormatter": "vscode.json-language-features"
  },
  // php
  "[php]": {
      "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
  },
  "[erb]": {
      "editor.defaultFormatter": "HookyQR.beautify"
  },

拡張機能（Beautify, PHP Intelephense）をインストールすることで、HTML以外も整形できるようになります。拡張機能については後述をご覧ください。

※ 2023年5月現在、Beautify は開発が止まっているため、非推奨です。代わりに、「Prettier」をおすすめします。


09. 拡張機能をインストール

拡張機能＝エクステンションは、エディタをより使いやすくするために様々な機能を加える機能です。厳選した拡張機能を以下に記します。

拡張機能は、Ctrl + Shift + X で開きます。検索欄で名前を検索し、インストールしてください。
人気順・トレンド順などで調べたい場合は、以下のサイトをご覧ください。

《おすすめ拡張機能》
--- デフォルト ------------------
Mithril Emmet --- ショートコードなど

--- 整形 --------------------------
Beautify --- コード整形
zenkaku --- 全角スペースを強調
Code Spell Checker --- スペルミスを検出
Bracket Pair Colorizer 2 --- ペアのカッコを強調
Highlight Matching Tag --- 対応タグの強調
PHP Intelephense --- PHP 整形など

--- 補完 --------------------------
Auto Rename Tag --- 自動で閉じタグ変更
Auto Close Tag --- 自動で閉じタグ
Path Intellisense --- ファイル名補完
HTML CSS Support --- Class名の候補
Clipboard Ring --- クリップボード機能拡張
vscode-input-sequence --- 連番を一瞬で入力

--- 構文チェック -----------------
W3C Validation --- W3Cチェッカー
HTMLHint --- HTMLチェッカー
stylelint --- CSSチェッカー

--- その他 ------------------------
Gruvbox Material Icon Theme --- ファイルアイコン
Live Server --- ライブプレビュー
Bookmarks --- しおり機能
JS & CSS Minifier --- JS, CSS の圧縮
Encode Decode --- エンコード・デコード
Image Preview --- 画像プレビュー


--- デフォルト ------------------

(1) Mithril Emmet

ショートコードなどを利用した素早いコーディングの味方「Emmet」。タグの展開についてはここでは触れません（後述）。以下の記事などをご参考ください。

① キーボードショートカットの設定方法

VS Code では、Emmet の機能にショートカットが割り振られていないようです。主要なアクションは、コマンドパレットからショートカットを割り振っておくと良いかと思います。

キーボートショートカット の開き方は以下があります。

・ Ctrl + Shift + P でコマンドパレットを開き、「Key」を打ち込む > 基本設定：キーボードショートカットを開く
・ Ctrl + K ,  S

 キーバインドの検索に「emmet」と打ち込むと、Emmet で使えるコマンドが一覧表示されます。キーボードショートカットに設定したい項目の左側の鉛筆アイコンをクリックすると、キーボードの登録ができます。

画像5

Emmet: バランス (外側)　　　　Ctrl + Shift + B
Emmet: バランス (内側)　　　　Ctrl + Shift + B , Ctrl + Shift + B
Emmet: ラップ変換　　　　　　Ctrl + Shift + A
Emmet: 前の編集点に移動　　　Shift + Z , Shift + LeftArrow
Emmet: 次の編集点に移動　　　Shift + Z , Shift + RightArrow

・バランス (外側／内側)
Balanceは、開始タグから閉じタグまで選択 して「複製」や「移動」や「削除」ができる。外側はタグを含み、内側は含まない（タグの内側）。

画像23

・ラップ変換
Wrap With Abbreviation は、任意のタグで選択した部位を囲む ことができる。

画像24

「p*」などアスタリスクを用いることで、個々の行でラップ変換（選択範囲の行それぞれを p タグなどで囲める）が出来る。

・前の編集点に移動・次の編集点に移動
編集点を移動できる。

※重複するコマンドを書き換える
「Emmet: バランス (外側)」の  Ctrl + Shift + B は既にキーがあるので、既存の「タスク: ビルド タスクの実行」を Alt + B に書き換えます。
このように、競合するキーがある場合はキーボードショートカットから変更してください。

② setting.json の設定
Emmet に関して以下のように設定しました。

  　// Emmetの候補を表示
   "emmet.showSuggestionsAsSnippets": true,
   // TABキーでEmmet展開
   "emmet.triggerExpansionOnTab": true,
   // Emmet展開のHTML言語変更
   "emmet.variables": {
       "lang": "ja"
   },


--- 整形 --------------------------

(2) Beautify → Prettier

※ 2023年5月現在、Beautify は開発が止まっているため、非推奨です。代わりに、「Prettier」をおすすめします。

コードの整形 をしてくれる拡張機能です。

① settings.json の設定
settiongs.json に以下を設定しました。

  "beautify.language": {
       "js": {
           "type": ["javascript","json"],
           "filename": [".jshintrc",".jsbeautifyrc"]
           // "ext": ["js", "json"]
           // ^^ to set extensions to be beautified using the javascript beautifier
       },
       "css": ["css","scss"],
       "html": ["htm","html","erb"] //"erb"を追加
       // ^^ providing just an array sets the VS Code file type
   },

② 詳細設定（beautifyrc.json）
Beautify の詳細設定は、Local Disk (:C) > ユーザー > ユーザー名 > .vscode > extensions > hookyqr.beautify-1.5.0 > schema > beautifyrc.json を設定し直すことで変えられます。

beautifyrc.json の設定は、以下の記事が参考になりました（一応 HTML についての記事も置いておきます。）VS Code の Beautify についての記事ではないのでご注意ください。


(3) zenkaku

全角スペースを強調（グレーの四角）表示されます。

(4) Code Spell Checker

スペルミスを検出 してくれます。
写真のように、ミスのある単語に青い波線が引かれます。

画像6

(5) Bracket Pair Colorizer 2

※ 2023年5月現在、VS Code はデフォルトでブラケットの色付けに血王しているので、インストールする必要はありません。

対応するカッコを色分けして表示 します。

画像7

(6) Highlight Matching Tag

HTMLでフォーカスすると、対応する開始タグ・閉じタグを色付け してくれます。

画像8

(7) PHP Intelephense

PHPのコード補完やコードチェック、整形 をしてくれます。
VS Code のデフォルトのPHP補完機能をオフにした方がいいそうです（settings.json）。

"php.suggest.basic": false,
"php.validate.enable": false,

PHPの整形について適応させる方法は、「07.  フォーマッター（整形）の設定」をご覧ください。


--- 補完 --------------------------

(8) Auto Rename Tag

開きタグを変更したときに閉じタグも自動変更 してくれます。

(9) Auto Close Tag

自動で閉じタグを挿入 してくれます。

(10) Path Intellisense

HTMLで src や href を打ったとき自動でその候補を出してくれます。

画像8

(11) HTML CSS Support

HTMLを書くときに、CSS側で作った Class 名が候補に出る ようになります。

画像8

(12) Clipboard Ring

クリップボードを機能を拡張 します。

コピー（Ctrl + C）、カット（Ctrl + X）をする度にクリップボードリングに追加されていき、Ctrl + Shift + V で貼り付けるアイテムを選択できます。
デフォルトでは、10個のアイテムが保存できます。

(13) vscode-input-sequence

カーソルを複数箇所に追加してから、Ctrl + Alt + 0 を実行すると連番が一瞬で入力 されます。
※複数カーソルについては「マルチカーソル」の項目をご覧ください。

画像25

ショートカットを実行後、キーバインドにショートコードを入力することで連番を入力できます。
2桁で冒頭に 0 を付けたい場合は、「1:2」と入力、
4桁で、50 からスタートして 2 ずつ増やしたい場合は、「50+2:4」。

※画像例（Class名に連番を指定するとき）では、Emmet を利用して「div.sample-0$*6」で展開する方が早いです。状況に合わせてください。

構文ルールについては、以下の公式をご覧ください。


--- 構文チェック -----------------

(14) W3C Validation

色々試した結果、機能しなかったため、様子を見ます。

(15) HTMLHint

HTML の構文チェッカー です。以下のように情報タブ（下部の問題アイコンで開く）にエラーが示されます。エクスプローラーのファイル名にもエラーの数が数字で示されます。

画像26

（HTMLHint 公式より写真）

(16) stylelint

CSS の構文チェッカー です。画像のようにエラーが下部タブに示され、エクスプローラーのファイル名にもエラー数が表示されます。

画像27

（stylelint 公式より写真）


--- その他 ------------------------

(17) Gruvbox Material Icon Theme

ファイルアイコンを独自のもとに変える ことが出来ます。アイコン は好みのものを使うのが一番だと思いますが、色々見てかなりシンプルかつ色味が激しくないものを挙げておきます。

画像8

(18) Live Server

Brackets でいう ライブプレビュー機能 を可能にします。
簡易ローカルサーバーを起動し、HTMLやCSSの更新を反映しながらライブプレビューしてくれます。いちいちローカルページの更新を押さなくて済みます。

起動は右下の「Go Live」の文字です。

以下はライブプレビューに関する settings.json （Ctrl + Shift + P > setting json で検索）の設定です。

   // オートセーブ
   "files.autoSave": "afterDelay",
   "files.autoSaveDelay": 1000,
   
   /* live preview */
   // 情報メッセージを表示しない
   "liveServer.settings.donotShowInfoMsg": true,
   // ライブプレビューのブラウザ設定
   "liveServer.settings.CustomBrowser": "firefox",
   // ブラウザの拡張機能使用
   "liveServer.settings.useWebExt": true,

オートセーブとは、Ctrl + S でいちいち保存しなくても、変更したコードを自動保存してくれる機能です。
ライブプレビューのブラウザを、例は「Firefox」にしていますが「Chrome」などお好きなものにご変更ください。

① ライブプレビューは作業フォルダを開いた状態でないと機能しない
VS Codeに作業フォルダをドロップするか、「フォルダを開く」で作業フォルダを指定する必要があります。

② PHP をライブプレビューするには XAMPP など仮想サーバーが必要
ここでは、仮想サーバーのダウンロードや設定などには触れませんので、各自お調べください。XAMPP がインストールされている環境の設定について書きます。
※ライブプレビューを使用するときは、XAMPP も起動してください。

③ 拡張機能「Live Server Web Extension」をインストール
PHP をライブプレビューするには、ライブプレビューで使用するブラウザに拡張機能（アドオン）をインストールしてください。ツールバーの該当の拡張機能を選択し、ライブプレビューを有効にします。
以下のように空白を埋め、ボタンを有効にしてください。

画像9

(Live Server の Github より写真)

Actual Server Address は、XAMPP のアドレス（http://localhost/）からワークスペース（作業フォルダ）までのパスです。
Live Server Address は、ライブプレビューでのサーバーになります。以下からコピペをどうぞ。

http://127.0.0.1:5500/

④ ワークスペースの setting.json を編集
Ctrl + Shift + P > workspace setting で検索 > 「基本設定: ワークスペース設定を開く (JSON)」で、作業フォルダの settings.json を開きます。以下を {} 内に追記します。

"liveServer.settings.proxy": {
   "enable": true,
   "baseUri": "/",
   "proxyUri": "http://localhost:80/workspace"
 }

workspace のところは、フォルダのパスに合わせてご変更ください。

⑤ XAMPP の php.ini を編集
PHP の警告（Notice）を非表示にするために、php.ini を編集します。
パネルから Apache > Config > PHP (php.ini) を選択して開きます（Config からデフォルトのエディタをVS Codeにしておくと便利です）。

Ctrl + F で「error_reporting=」を検索すると一件ヒットするので、以下に書き換えます（元のコードはコメントアウトして新たに書くことをおすすめします）。

error_reporting=E_ALL & ~E_NOTICE & ~E_DEPRECATED

これで、PHP をライブプレビューしたときにエラーに悩まされることはなくなります。

※なぜか筆者の環境では、動的サイトで Go Live を押してファイルを変更しても自動更新されなくて困っていますが、原因が分からないので保留しています。
→ 21.08.21　追記
動的サイトでもライブリロードするには、拡張機能「Live Server Web Extension 」の「I don’t want proxy setup」のチェックを外すことで、自動更新が反映されました。

(19) Bookmarks

各ファイルにしおり（青いリボンのマーク）をつけられます。しおり一覧は右のメニューバーのしおりのマークから確認できます。

画像10

ブックマークの設定・解除　　　Ctrl + Alt + K
次のブックマークへジャンプ　　Ctrl + Alt + L
前のブックマークへジャンプ　　Ctrl + Alt + J

しおりは、右側のスクロールバー部分の青いマークからもジャンプできます。詳しくは以下の記事をご覧ください。

(20) JS & CSS Minifier

データの削減のための CSS, JS ファイルの最小化 を行ってくれます。圧縮されたファイルは「.min.xxx」として保存されます。
settings.json に以下を設定することで、保存時に .min.css と .min.js を自動生成することができます。

　　// Minifier
   "folders": [
   { "path": "." }
   ],
   "es6-css-minify.minifyOnSave": "yes",

Minifier は、下部のバーの「Minifier」の表示をクリックすることでも機能します。

(21) Encode Decode

エンコード・デコード してくれます。流れとしては以下です。

・エンコード・デコードしたい文字列を選択
・Ctrl + Alt + C で機能一覧の呼び出し
・一覧から該当機能を選択

主に使う機能は以下です。

・String to HTML Entities
・HTML Entities to String
・String to Encode Url
・Encoded Url to String

上から、「HTML のエンコード」「HTML のデコード」「URL のエンコード」「URL のデコード」です。

エンコードとは、「>」「&」などの特殊な文字列をウェブで表示するためにエスケープすることです。
デコードはその逆で、エスケープされた文字列を元に戻します。

(22) Image Preview

HTML / CSS で画像ファイルのパス部分にマウスオーバーすると画像のプレビューが表示され、HTMLの行番号のところにサムネイルが小さく表示されます。

画像28

（Image Preview 公式より写真）

Twitter サムネイル（絶対パスで指定したサイトの OGP 画像）のパスが合っているかなどの確認に役立ちます。


10. 覚えておくと役立ちそうなこと

VS Code の使用に役立ちそうなことをいくつか挙げます。

検索・置換機能
ショートカット
Emmet のショートコード
マルチカーソルの利用
ユーザースニペットの設定

(1) 検索・置換機能

ファイル内を Ctrl + F で検索、Ctrl + H で置換以外にも便利な機能はあります。

① 複数ファイル、複数行の検索・置換

Brackets と同じく、複数ファイルの検索は Ctrl + Shift + F、複数ファイルの置換は Ctrl + Shift + H です。
Brackets と違い、 VS Code は複数行の置換が出来ます。方法は、以下の記事をご覧ください。

② ファイルでフィルタして検索

通常の検索（Ctrl + Shift + F）では、作業フォルダ内の全てのファイルに対し、一致する文字列の検索を行います。

画像11

検索バーを開いた状態で、さらに Ctrl + Shift + J を押すと、対象とするファイルを絞って検索できます。

以下の例では、拡張子「.js」でフィルタリングして検索した様子です。

画像12

比較して、絞り込みが有効になっていることが分かるかと思います。

③ 正規表現で置換

Ctrl + H でファイル内置換を開き、「正規表現を使用する（Alt + R）」を押下して機能させます。「選択範囲を検索（Alt + L）」にするかはお好みで。

画像29

《主な活用法》
改行を削除：「\n」→「」
HTMLコメントを全て削除：「<!--.*-->」→「」

コメントをすべて削除する拡張機能に「Remove Comments」がありますが、現時点で HTML には対応していないので、正規表現で置換して削除するのが便利かと思います。


(2) ショートカット

VS Code でよく使うショートカットです。Brackets と異なるので覚えておきたいですね。

キーボートショートカット　　Ctrl + K , S
コメントアウトの切り替え 　　Ctrl + /
行の複製　　Alt + Shift + カーソル上下
選択した行を上下に移動する　　 Alt + カーソル上下

① キーボードショートカット：Ctrl + K , S
任意のコマンドにキーを設定することで、競合するショートカットの変更、新たなキーの登録ができます。

②  コメントアウトの切り替え：Ctrl + /
こちらは Brackets と同じですね。

③ 行の複製：Alt + Shift + カーソル上下
Brackets と違うので注意したいですね。

④ 選択した行を上下に移動する：Alt + カーソル上下
Alt + カーソル上下 で、選択中の行を上下に移動できます。

画像13


(3) Emmet のショートコード

Emmet のショートコードについて、HTML / CSS ごとに軽く触れます。

① HTML の基本の演算子
HTML に展開する際、以下の演算子でタグをつないでショートコードを書きます。

>　　子要素に展開
+　　兄弟要素に展開
*　　指定した数だけ同じタグを兄弟要素に展開
()　　グループ化
^　　階層をひとつ戻る
#　　IDを付与
.　　クラスを付与
$　　連番をつける
[]　　要素に属性をつける
{}　　要素にテキストを入れる

② CSS のプロパティの一部
ショートコードを打ち込み、Tab で展開できます。一部を以下に抜粋します。

d　　display: block;
w　　width: ;
h　　height: ;
m　　margin: ;
p　　padding: ;
c　　color: #000;
t　　top: ;
z　　z-index: ;

他のプロパティについては、以下の記事をご覧ください。


(4) マルチカーソルの利用

複数の箇所にカーソルを設置し同時に編集できる、便利なマルチカーソル。覚えておいて損はないかと思います。

《カーソルの追加》
単語を選択する　　　　　Alt + クリック
同じ単語を全選択する　　Ctrl + Shift + L
短形選択　　　　　　　　Alt + Shift + ドラッグ
一行ずつカーソル追加　　Alt + Ctrl + カーソル上下
選択範囲の末尾をカーソル化　　Alt + Shift + I

※分かりやすく表現するため、例の画像は文法的に間違っています。

① 単語を選択する：Alt + クリック
現在カーソルが置いてある場所の単語を順番に選択し、カーソルを一つずつ増やすことができます。

画像14

② 同じ単語を全選択する：Ctrl + Shift + L
現在カーソルが置いてある場所の単語と同じものを全て選択します。

画像15

③ 短形選択：Alt + Shift + ドラッグ
矩形選択し、縦一列にカーソルを並べます。

画像16

④ 一行ずつカーソル追加：Alt + Ctrl + カーソル上下
上または下の行に1つずつカーソルを追加します。縦一列に並びます。③と似ています。

画像18

⑤ 選択範囲の末尾をカーソル化：Alt + Shift + I
各行で選択されている最後の部分をカーソル化します。

画像17


《カーソルの移動》
区切り文字まで移動　　Ctrl + カーソル左右
行頭にカーソルを移動　　F8 + カーソル左
行末にカーソルを移動　　F9 + カーソル右

① 区切り文字まで移動：Ctrl + カーソル左右
何らかの区切り文字までカーソルを移動します。

画像19

② 行頭にカーソルを移動：F8 + カーソル左
カーソルがみな揃って行頭に移動します。
デフォルトではショートカットが割り当てられていないので、キーバインド「cursorHome」で検索し「F8 LeftArrow」を割り当てください。

画像20

③ 行末にカーソルを移動：F9 + カーソル右
行末にカーソルを移動します。
デフォルトではショートカットが割り当てられていないので、キーバインド「cursorEnd」で検索し「F9 RightArrow」を割り当てください。

画像21

◆ マルチカーソルの応用
それぞれを組み合わせることもできます。

画像22

《例の手順》
Alt + クリック　　　　　　単語の選択
Ctrl + Shift + LeftArrow　　区切り文字まで選択
Ctrl + C　　　　　　　　　コピー
F8　LeftArrow　　　　　　行頭にカーソル移動
Ctrl + RightArrow　　　　　区切り文字まで移動
Ctrl + V　　　　　　　　　ペースト

様々な使い方ができるかと思います。


(5) ユーザースニペットの設定

ユーザースニペットとは、オリジナルの定型文を短いキーワードで呼び出せる機能です。
Brackets と違い、拡張機能を入れることなく、デフォルトの機能で充分補うことができます。ただ、書き方に決まりがあるので、ツールを用いてミスを避けましょう。

Ctrl + Shift + P > 「user snippet」で検索 > 「基本設定: ユーザースニペットの構成」で、既存か自作の json を選択して、スニペットを記述します。

筆者は以下にしました。

CSS　　　　　　既存の css.json
HTML / PHP　　自作の json

既存のものはキーバインドで検索することで呼び出せ、自作のものは「新しいグローバル スニペット ファイル」を選択することで作成できます。

① CSSの例

"-max-1279": {
  "prefix": "-max-1279",
  "body": [
	"@media screen and (max-width: 1279px) {",
	"  $1 {",
	"    $2",
	"  }",
	"}",
  ],
  "description": "media max-1279"
},

-max-1279　　 スニペット名
prefix　　　　　スニペットを呼び出すときのキーワード
body　　　　　オリジナルの定型文
description　　スニペットの説明

これは個人的な意見ですが、prefix は、普段あまり使わない「-」などから始めておくと、スニペットをまとめておけて普段の入力の邪魔にならないと思います。

② HTML / PHP の例

"-a-exit": {
    "scope": "html, php",
	"prefix": "-a-exit",
	"body": [
		"<a target=\"_blank\" class=\"icon-lnr icon-exit b marker1\" href=\"$1\">$2</a>",
	],
	"description": "a-tag exit"
},

scope　　適応させる言語

◆ プレースホルダーを用いる
body の「$1」や「$2」はプレースホルダーと呼ばれ、Brackets の  Snippets と同じように、Tab キーにより連続して編集することができます。数を後半に連れ増やすことで、編集位置を前から後ろに移動することができます。
もっと複雑なプレースホルダーの記述については各自お調べください。

◆ 変換ツールを用いる
以下のツールは、エリアに定型文にしたいコードをペーストすることで形式に沿って変換してくれます。

《注意点》
プレースホルダー（$）の前の「\\」を削除する
scope は必要があれば書き足す

そのままでは使えないので上記を変更します。文字としての「$」の前の「\\」は削除しなくて大丈夫です。


11. おわりに

駆け足での説明となりまして失礼しました。実際に Brackets から VS Code に移行して困ったことも含めたので、どなたかのお役に立てればと思います。

この記事を書くにあたって、沢山の記事を参考にさせていただき、ありがとうございました。最後に参考文献（この記事に引用した以外のもの）を簡単にまとめますので、ご参考ください。

そのうち、Gitを克服したら専用の記事をかくかもしれません。
この記事は随時アップデートしていく予定です。


12. 参考文献

・Visual Studio Codeさんに「php実行可能ファイルが設定されていない！」と怒られる（エラーが出る）場合

・Visual Studio Code おすすめ設定

・Visual Studio Codeのhtmlフォーマッターのメモ

・Visual Studio Codeのうれしい機能を使いこなして、初心者を最速で脱出する！《VSCode実践入門》

・ VSCodeのマルチカーソル練習帳

・VS Code の便利なショートカットキー

・【Web制作向け】VSCodeおすすめプラグイン・拡張機能と設定一覧【超快適】

・VSCode に必ず入れておきたい拡張機能

・2020年時点で僕のVSCode(Visual Studio Code）に入ってるプラグインや設定を紹介します

・VSCodeの「W3C Validation」でHTMLとCSSコードをチェック

・VSCodeのW3CValidationが機能しなくなってたのをこうしたという話

・Visual Studio CodeでPHPファイルをブラウズできません

・Live Server / GitHub





この記事が参加している募集

#スキしてみて

588,777件