VSCodeスニペットなんとなく解説!明日から使える、私だけのコードひな型集

ツール コンピュータ
ツール

ひな型集と銘打っていますが今のところ一つだけ。

スニペットの設定

ファイル⇒ユーザー設定⇒スニペットの構成

言語固有のスニペット

例:
JavasSriptのスニペット

javascript.json

HTMLのスニペット

html.json

グローバルスニペット

<任意の名前>.code-snippets

PowerShellのコメント

設定内容

 
{
"PowerShell雛形": {
        "scope": "powershell",
        "prefix": "psh",
        "body": [
            "<#",
            ".SYNOPSIS",
            "概要",
            "",
            ".DESCRIPTION",
            "説明",
            "",
            ".EXAMPLE",
            "実行例",
            "",
            ".INPUTS",
            "入力",
            "",
            ".OUTPUTS",
            "出力",
            "",
            ".PARAMETER 引数名",
            "引数",
            "",
            ".LINK",
            "関連URL",
            "",
            "#>",
        ],
        "description": "基本的なPowerShellスクリプトの雛形"
    }
}

使い方

PowerShellスクリプトでprefixで設定したpshと入力後Tabを押すと、bodyで設定したひな型が追加されます。

感想

この類のカスタマイズはやりだすときりがないので、あまり手を出さないのですが、それでも、ひな型表示は便利だと思うので試してみました。

Emmit

vscodeでhtmlファイルを開きhtmlと入力するとhtml:5が選べるので選択します。
そうするとHTML5のテンプレートが張り付きます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

en→ja

デフォルトがen英語なのでja日本語へ変更します

F1キー
基本設定:ユーザー設定を開く(JSON)

以下のように変更する。

{
"emmet.variables": {
    "lang": "ja"
  },
}

コメント