1.複数のカーソルを使用する
プログラマーが同時に複数の場所に同じテキストを入力する必要がある場合があります。
たとえば、次のコードでは
class=«odd»、1番目、3番目、および5番目の要素に属性を追加します<li>。そして、2番目、4番目、6番目の要素に、属性を追加する必要がありますclass=«even»。
<ul>
<li>Lorem, ipsum dolor.</li>
<li>Lorem, ipsum dolor.</li>
<li>Lorem, ipsum dolor.</li>
<li>Lorem, ipsum dolor.</li>
<li>Lorem, ipsum dolor.</li>
<li>Lorem, ipsum dolor.</li>
</ul>
これは、エディターでどのように表示されるかを示しています。
エディターのコード
この問題を解決するにはどうすればよいですか？以前は次のようにしていました。テキストのようなもの
class=«odd»を1か所に入力し、それをクリップボードにコピーして、必要な場所に貼り付けました。ただし、VSコードで複数のカーソルを操作する機能について学習した後、それをやめました。これにより、作業の効率が大幅に向上しました。
特に、次のことについて話します。テキストに複数のカーソルを追加する
Altには、キーボードのキー（macOSではキーOption）を押したまま、カーソルが表示される場所をクリックする必要があります。その後、キーボードから入力されたすべてのものが、カーソルがある場所に同時に表示されます。
複数のカーソルの使用
次のキーボードショートカットについて話していることを思い出してください。
- Windows ：
Alt+。 - MacOS ：
Option+。
2.エンティティの名前変更とシンボルの名前変更コマンド
次に、別の簡単なトリックを学びましょう。
ドキュメントのコードまたはテキストを入力するときに、単語のスペルに誤りが生じる場合があります。または、コードに新しいエンティティ命名規則を適用する必要があるかもしれません。このような状況では、複数の行を同時に処理する必要があります。
以下のようなコードがあると想像してみましょう。すべてのオカレンス
fooをに置き換える必要がありbarます。どうやってするの？
function foo(){
// ...
}
foo();
foo();
foo();
各行を手動で変更する場合、このアプローチにはいくつかの欠点があります。
- 手作業が多すぎる。
- エラーの可能性が高い。
この問題を解決するには、コンテキストメニューコマンドを使用できます
Rename Symbol。
[シンボルの名前変更
]メニューコマンドの使用このメニューは、選択したテキストを右クリックすると呼び出されます。このコマンドを呼び出す別の方法は、
F2編集するテキストを選択した後にを押すことです。
3.選択した行を上下に移動します
ある種のプログラムコードまたはプレーンテキストをドキュメント内で上下に移動する必要がある場合があります。この問題は次のように解決できます。
- テキストを選択します。
- Windowsでは、キーボードショートカット
Alt+を使用してテキストを上に移動します。テキストをそれぞれ下に移動するには、キーボードショートカットを使用しますAlt+。 - macOSでは、キー
AltはキーOptionsです。
これはそれがどのように見えるかです。
テキストを上下に移動する
このアプローチを使用すると、テキストの順序をすばやく簡単に変更できます。
4.スニペット
コードを書くときは、キーボードから同じ繰り返し構造を常に入力する必要があります。
たとえば、HTML5ファイルには、常に次の基本的なドキュメント構造が含まれています。
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
</body>
</html>
また、JavaScriptでforループを作成するときは、常に次のコードスニペットを入力します。
for(let i = 0; i < ; i++){
}
他にも多くの同様の例があります。これらのコードを手動で入力する必要がある場合、必要なときにいつでも入力すると、非常に非効率になります。
幸い、VSコードは構成可能な自動完了メカニズムを提供します。これはそれがどのように見えるかです。
自動補完
VSコードを設定し、前の図に示されているものを取得する方法について説明しましょう。
▍構成ファイルの作成
VSコードで自動補完を設定するには、最初に適切な構成ファイルを作成する必要があります。エディタは、適切なメカニズムを使用してこのファイルを読み取ります。このファイルを作成するには、次の図に示すように、メニューに移動する必要があります
Code > Preferences > User Snippets。
ユーザースニペットメニューコマンド
次のパネルが表示されます。
スニペットを操作するためのパネル
ここでは、既存の構成ファイルを選択して編集できます。ここで新しい構成ファイルを作成することもできます。私たちはまさにそれをするつもりです。
ここでコマンドを選択すると、
New Global Snippets fileグローバルに利用可能な構成ファイルが作成されます。viewコマンドを選択するNew Snippets file for 'test'と、現在のワークスペースでローカルに使用できるファイルが作成されます。
ローカルファイルを作成します。
コマンドを選択すると、
New Snippets file for 'test'システムはファイル名を要求します。
新しい
ファイルの名前の入力構成ファイルを作成しましたが、これまでのところ空です。
新しい空の構成ファイル
あなたの便宜のために、私は上記のプロセス全体を記録し、アニメーションのgifファイルとしてここに提示しました。
新しい構成ファイルの作成
▍スニペットの作成
構成ファイルには、データがJSON形式で格納されます。これがその内容の例です。
構成ファイルの内容これは
同じですが、プレーンテキストです。
{
"html5 autocomplete": {
"prefix": "html5",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
" <title></title>",
"</head>",
"<body>",
"</body>",
"</html>"
]
}
}
まず、フィールドを見てみましょう
«html5 autocomplete»。このフィールドの意味は、スニペットの目的についてプログラマーに通知することだけです。ここに何でも追加できます。
今、フィールドを扱いましょう
«prefix»: «html5»。これは、エディターがコードフラグメントに展開する、設定した略語を説明することを目的としています。エディターにテキストを入力するhtml5と、エディターはそれを要素で指定されたものに自動的に置き換えます«body»。
素子
«body»: […]入力したプレフィックスの代わりに、エディターがドキュメントに挿入する必要のあるコードが含まれています。このコードは多くの行で構成できるため、このフィールドは配列で表されます。配列の各要素は1行のコードです。今検討した構造を通常のHTMLコードの言語に「翻訳」すると、次のようになります。
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
</body>
</html>
簡単な構成ファイルを自由に使用できるようになったので、テストしてみましょう。
構成ファイルのテスト
▍スコープスニペット
構成ファイルで自動完了が許可されていることを確認しました。ただし、欠点が1つあります。実際には、プレフィックスで表される構造
html5はHTMLファイルでのみ使用されます。JavaScriptファイルではこの構成は必要ありません。
このような場合、スニペットのスコープを指定する機能は非常に便利です。つまり、
«scope»: «html»スニペットの説明に追加する必要があるフィールドについて話しているのです。
スニペットの範囲をHTMLファイルに制限する
システムをもう一度試してみましょう。
html5HTMLファイルとJSファイルのプレフィックスを試してみましょう。
HTMLおよびJSファイルでのスニペットのテスト
JSファイルでは、ご覧のとおり、入力によって
html5特別なことは何も起こりません。そして、これはまさに私たちが必要としているものです。
▍カーソル
作成したファイルの自動補完をもう一度試してみましょう。それを詳しく見てみましょう。そこに欠陥はありますか？
自動
完了入力の調査コードブロックをエディターに挿入した後、カーソルがこのブロックの最後に自動的に移動することがわかります。ただし、ドキュメントに自動的に挿入されるコードのブロックは、まだ作業が必要な空白にすぎません。特に、タグの内容を入力する必要があります
<title>。
タグの開始部分と終了部分の間にカーソルが自動的に配置される場合は、入力完了メカニズムを使用する方がはるかに便利
<title>です。
これを行うには、構成ファイルで特別な構成を使用できます
$0。これはそれがどのように見えるかです。
カーソル位置の設定
これで、コードがドキュメント内に配置された後、カーソルは構成ファイル内の位置に自動的に配置されます
$0。
カーソルが目的の場所に配置されます
▍例
さて、今学んだことを補強するために、新しい例を見てみましょう。
JavaScriptまたはTypeScriptファイルにテキストを入力した後
fori、次の構造が自動的に表示されるようにします。
for(let i = 0; i < ; i++){
}
また、-カーソルが
i <。の後に自動的に配置されるようにします。
今のところ、この問題の解決策を検討する必要はありません。自分で解決してみてください。
一般に、この問題の解決策は、次の構成ファイルで表すことができます。
{
"for-i loop": {
"prefix": "fori",
"scope": "javascript, typescript",
"body": [
"for(let i = 0; i < $0; i++){",
"}"
]
}
}
これがデモです。
foriスニペットの使用
スニペットはこのように使用されます。スニペットはVSコードの私のお気に入りの機能の1つであるため、これについて多くのことを話しました。あなたにも重宝すると思います。以前は、重複するコードに出くわしたときに、すでにそれらが含まれているファイルからそれらをコピーする必要がありました。これはプロセスが遅く、エラーが発生しやすいです。そして今、そのようなコードフラグメントをスニペットとしてフォーマットする機能のおかげで、繰り返されるコードフラグメントを入力するタスクがはるかに簡単になりました。
VSコードはあなたの日常業務にどのような機能を提供する必要がありますか？
