【Html&Css】『Visual Studio Code』便利機能
いくつかテキストエディターを使ってきましたが、【Visual Studio Code】の便利な機能が本当に便利なのでご紹介します。
【Visual Studio Code】の便利機能
フォルダーをドロップするだけ
VS Codeは始めるのも簡単で、例えばこのような階層のフォルダーをあらかじめ作っておけばフォルダーをドラッグするだけで始めることができます。
ホーム画面にドラッグするだけ
拡張機能
Japanese Language Pack for Visual Studio Code
これは日本語に表示してくれる機能です。
Path Intellisense
画像などを読み込む時にパスの候補を出してくれるのでパスによる階層間違いがなくなります。
Auto Rename Tag
開始タグを入力すると終了タグが自動で読み込まれるというもの。しかもタグの変更や修正をするとペアのタグも自動で変更されてとっても便利。
Evillnspector
この拡張子は【空白】を表示してくれるというだけの拡張子です。
それだけですが初心者のかたはぜひ入れたほうが良い拡張子です。
コードはスペル1つ違うだけで、全角空白1つあるだけで思うようになりません。
スペルなら間違いを見つけることはそれほど難しくないですが、文字の入っていないスペースを見つけるのはとても大変。
しかも初心者の時は結構全角スペースを入れていまい、うまく実装できないということがあります。
Emmet
VS codeにはとても便利なEmmetという機能があります。
！と入力するだけ
htmlファイルを作成したら次は<!DOCTYPE Html>…..と入力していくわけなんですが、
VS codeでは「びっくりマーク」（shift+1)と入力して「Enter」を押せば
このとおり
必要なのもは入力されています。
例えば link
「link」と入力して「Enter」すると
自動でこのように入力してくれます。
ｗ100で→width:100px;
CSSではよく使う幅や高さも「ｗ100」「ｈ100」と入力するとこのように自動で入力してくれます。
同じ要素を記述「*」アスタリスク
例えば<li>リストタグを3つ作りたい時「li *3」と記述するだけでこのように3つ入力してくれます。
便利なショートカットキー
行のコピー「Ctrl+C」
普通Wordやエクセル使う時は範囲選択して『Ctrl+C』でコピーしますが、VS codeでは何も範囲選択しないで「Ctrl+C」で行ごと範囲選択してコピーできます。
そしてコピしたいところで「Ctrl+V」で貼り付け。
すぐ下の行に改行「Ctrl+Enter」
普通行の途中にカーソルがあったら改行する時は行末までカーソルを移動させてから改行しますが「Ctrl+Enter」をするとすぐ下の行に新しい行ができて便利。
そして「Ctrl+Shift+Enter」ですぐ上に行を作れます。
インデントの調整 「Alt + Shift + F」
記述しているうちにインデントが崩れても「Altキー」+「Shiftキー」+「 Fキー」でこのとおり。
「Ctrl」+「/」でコメントアウト
折り返す 「Alt+Z」
行が長くなってしまって見にくくなったら、「Alt+Z」で表示されていないところは折り返して表示してくれます。
1行選択 「Ctrl+L」
単語単位で選択 「ダブルクリック」
他にもまだまだ沢山の便利機能がありますので使いながら覚えていくのがいいかなと思います。
広告
