Visual StudioコードHTML Snippetsプラグインのデフォルトテンプレートの内容の変更
7360 ワード
最近VSCでフロントエンド開発エディタを熟知していると、snippetsという機能が使いやすいことに気づきました.HTMLラベルを自動的に入力し、HTML Snippetsプラグイン(0.1.0)をインストールした後、コードにhtml 5を直接入力して車をたたくと、HTML 5標準ラベルテンプレートを自動的に記入してくれます.しかし、自動記入の効果はこのようなものです.
ここでlang=“en”、デフォルトを変更してlang=“zh-CN”に埋めたいのですが、ちょっと振り回して、このプラグインのプロファイルを見つけました.
このファイルを開いて、html 5のマッピングを定義する部分を見つけて、以下のように修正して、VSCを再起動して、html 5を入力すると目的の効果になります.
補足します
ファイル-プリファレンス-ユーザーがコードセグメントをカスタマイズし、HTMLを見つけたらhtml.jsonプロファイルには、自分がよく使うコードセグメントが書かれています.例えば、以下は私が修正したVueが含まれています.jsが参照するHTML 5コードテンプレート:
ここで が なのは、コード の
<html lang="en">
<head>
<title>title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
head>
<body>
body>
html>ここでlang=“en”、デフォルトを変更してlang=“zh-CN”に埋めたいのですが、ちょっと振り回して、このプラグインのプロファイルを見つけました.
C:\Users\Dexter\.vscode\extensions\abusaidm.html-snippets-0.1.0\snippets\snippets.jsonこのファイルを開いて、html 5のマッピングを定義する部分を見つけて、以下のように修正して、VSCを再起動して、html 5を入力すると目的の効果になります.
"html5": {
"prefix": "html5",
"body": [
"",
"<html lang=\"$1zh-CN\">", ~~ en~~
"\t<head>",
"\t\t<title>$2title>",
"\t\t<meta charset=\"UTF-8\">",
"\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
"\t\t<link href=\"$3css/style.css\" rel=\"stylesheet\">",
"\thead>",
"\t<body>",
"\t$4",
"\tbody>",
"html>"
],
"description": "HTML - Defines a template for a html5 document",
"scope": "text.html"
},補足します
ファイル-プリファレンス-ユーザーがコードセグメントをカスタマイズし、HTMLを見つけたらhtml.jsonプロファイルには、自分がよく使うコードセグメントが書かれています.例えば、以下は私が修正したVueが含まれています.jsが参照するHTML 5コードテンプレート:
{
/*
// Place your snippets for HTML here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}
*/
"Vue": {
"prefix": "vue",
"body": [
"",
"",
"\t",
"\t\t<span class="hljs-variable">$1</span> ",
"\t\t",
"\t\t",
"\t\t" ,
"\t",
"\t",
"\t$2",
"\t",
""
],
"description": "vue - Defines a template for a vue & html5 document"
}
}ここで が なのは、コード の
$1,$2に されている は、コードセグメントを に した のカーソルの であり、$1はデフォルトの であり、$2はtabキーを した にジャンプする の である