Edited at

HTML書くときにVSCで使っているあれやこれ

More than 1 year has passed since last update.

VisualStudioCode AdventCalendar2016 10日目の記事です。

すごく初心者です!よろしくお願いします。

ちょっと前置きですが、友人たちへの布教用も兼ねているのと、

私が日常でちょくちょく使ってて便利だー!と感動したものをのせてます。

他にもこれが便利だよ!とかあったら教えていただけると幸いです。

ちょっといろいろ試してないので後でいろいろ追加したいです。

Live HTML Previewer

Live HTML Previewer

私の好きなやつです。DWみたいにリアルタイムでプレビューできるので見つけたときすごくうれしかったです。

使い方は


For side preview, use the keybinding 'ctrl+q s' or press 'F1' and type "Show side preview"

For full preview, use the keybinding 'ctrl+q f' or press 'F1' and type "Show full preview"


Ctr+QかF1押して、>show side(full) preview と入力するだけです。簡単!

sideとfullはこんな感じになります。

side



full

注意すべきはHTMLが開いているときにこのコマンド使ってねってことです。じゃないとなんか怒られました。私だけかな。

サンプル引っ張ってきてます。h ttp://pondt.com/

Color Picker

Color Picker

Atomにもあったやつだ、多分


A dialog box is shown by pressing Alt + C P keys or command Pick Color.


カラースライダーが出てきて指定できるやつ。

VS Color Picker

VS Color Picker

ピッカーで色が取得できちゃったりする素敵なやつです。



↑こんなのが出てきて、パレット押したらパレットで色指定、その右隣のピッカーで他から色取得ができる。よ!

使い方は



  1. After typing the character # or moving the caret after character #, the picker will be launched automatically.

  2. Execute command VS Color Picker in Command Palette(Ctrl + Shift + P or Cmd + Shift + P).

  3. Binding a key for command extension.vs-color-picker.


こういうの地味に便利。画像イメージから作るときとか。

JS-CSS-HTML Formatter

JS-CSS-HTML Formatter

名前まんま。jsonにも対応。地味にjson対応は私は嬉しい。

jsonあたり

思い出したら載せたい。

おしまい

私よく忘れるんですけど、macでファンクションキー使うときはfn押しながらF1押すんですね。

あとすごく関係ないけど、VSCをUSBメモリに入れていて、同じOSの他のパソコンに差して使う、っていうやり方ができたりします。

ただ拡張機能が消えちゃったりしてるんでこれどうにかできる...はず。

USBメモリから起動できるのは地味に嬉しい。

普段はatom使ってますがVSCは軽いのでさっと何か書くか~って時に重宝してます。

軽いやつは大好きです。ペイントソフトしかり。

では十日目でした。周りにVSC使う人増えるといいなあ

ありがとうございました!