コードショートカット


私は、リストをコード化しなければならなかったとき、HTMLから始めて、嫌っているのを覚えています.
<ul>
    <li>Question</li>
    <li>Question</li>
    <li>Question</li>
    <li>Question</li>
    <li>Question</li>
    <!-- And so on... -->
</ul>
あなたがコピーとペーストを使うことができたけれども、私は開発者がソフトウェアをより効率的にする彼らの情熱であるとき、開発者がそのような遅い方法を使うと想像することができませんでした.それで、私はいくつかの研究をしました、そして、ここで、私は私が現在毎日使っている近道の3つです.

" Ctrl ( Windows )/コマンド( Mac )+ c "なしで行をコピーします。


あなたは、コピー、貼り付け、ハイライトすることなく、コードの行をコピーすることができます.コピーしたいコードの行にカーソルを置き、Shiftキー+ Alt/オプションを押して、下または上の行をコピーしてください.次のようになります.

複数行を一度に編集する


何の質問のリストを変更する必要がある場合は、答えのリストになりますか?行を強調する代わりに、Alt ( Windows )/オプション( Mac )を保持して複数行を選択することができます.

Emmetの略語を使う


それで、私は私のリストを作りました、しかし、現在、私はJavaScriptで個々に彼らを操作することができたいならば、彼ら全員がIDを必要とすると理解します.IDは一意でなければなりません.行を編集する必要がありますか?何が100これらの場合は?
この問題は、いくつかの基本的な言語のコードショートカットのトンを含むVSコード(および多くの他のコードエディタ)に組み込まれたツールであるEMmetを使用して防ぐことができました.問題を解決するショートカットは次のようになります.

最初の行はちょっと気が狂っているようです.
ul>li#question${Question}*5
失礼しましょう
  • 「UL」:エメットを知っているために、私は順序のないリストが欲しいです
  • ">"これは"child "signifierです.どんな要素が続くなら、ULの子になります.
  • 「li」:ULの中にLi要素が欲しい.
  • “Chrount”:ID属性のためのシンボル(CSSでのように)以下のテキストはIDの値です.
  • "$":これはEmmetに"私はこの番号が欲しい"です.デフォルトでは1から始まる.
  • “{}”:これは“text”signifierです.これはテキストを最も近い要素に加えます.
  • “*(number)”:これは“乗算”signifierです.これは、現在の要素が“回数”を繰り返したエメットを表します.我々は20の質問をした場合は、例では5を置き換えることができます.
  • より多くのemmet略語のために、あなたはhereを訪問することができます.
    うまくいけば、これらはあなたが少しコーディングをスピードアップすることができます.あなたがemmetについての質問があるならば、以下をコメントしてください.喜んでお手伝いします.