Visual Studio Code / VSCode Part4

**デフォルトの名無しさん** · 2018/06/23(土) 00:01:55.07

MS発のエディタVSCodeのスレ

公式
https://code.visualstudio.com/
https://github.com/Microsoft/vscode/

開発状況
https://github.com/Microsoft/vscode/wiki/Iteration-Plans

更新内容(日本語訳)
https://vscode-doc-jp.github.io/updates/

前スレ
Visual Studio Code / VSCode Part3
http://mevius.5ch.net/test/read.cgi/tech/1514893835/

**デフォルトの名無しさん** · 2018/09/19(水) 04:47:13.85

拡張機能の紹介動画の解説です

VSCode - 10 Useful Extensions for Web Development | GTCoding
https://youtu.be/wzreuKDbLyk

vscode-icons, VSCode Great Icons
カラフルなファイル・フォルダのアイコン

CSS Peek
HTML ファイル上で、Alt + hover で直接、CSS の内容を見れる。
F12 で、CSS の該当箇所へジャンプする

Guides, Indent-Rainbow
インデントを線で、またはカラフルに表示する

Bracket Pair Colorizer (Rainbow Brackets は見つからない)
カッコをカラフルに表示する

Beautify
セーブすると、正しくインデントを揃える

**454** · 2018/09/19(水) 04:49:22.98

>>454
の続き

Live Server
セーブすると即座に、ブラウザを再表示する。
Live Sass Compiler をインストールすると、Live Server もインストールされる

Code Runner
右クリックメニューから、選択したコード、またはファイル全体を実行する

Path Intellisense
href などで参照する、ファイルパスを入力補完する

html tag wrapper (htmltagwrap は見つからない)
HTML を選択し、Ctrl + i を押すと、両端をタグで囲める

Auto Rename Tag
開始終了タグを、同時に変更する

**454** · 2018/09/19(水) 06:34:48.55

拡張機能の紹介動画の解説です

Useful VSCode Extensions - Visual Enhancements
https://youtu.be/UAVq1HkKZrE

Indent-Rainbow
インデントをカラフルに表示する

Bracket Pair Colorizer
対応するカッコをカラフルに表示する

Better Comments
コメントの種類ごとに、カラフルに表示する

Color Highlight
様々なファイルに、#00cc66 などの表記で、色を表示する