快適ですね。
紹介していない定数もありそうなので、詳しく気になる方はコチラもご覧くださいませ。
VSCodeスニペットではかどる話。
これ↓
言語や拡張機能によって実装されていますが、これを自分で設定する記事です。
まず、[基本設定] → [ユーザースニペット]に移動します。
プロジェクトで作業している場合、'hogehoge'の新しいスニペットファイル
という項目があるのでコチラを選択しましょう。ファイル名を尋ねられます。今回はsnippet
としました。
すると .vscode/snippet.code-snippets
というファイルが生成されますね。
{
// Place your hogehoge ワークスペース snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. 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": {
// "scope": "javascript,typescript",
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
}
コメントアウトの説明に沿えば実装できます。
例えばメソッド名の前に展開するドキュメンテーションコメントを実装したいとき。
{
"EditorComment": {
"prefix": "ec",
"body": [
"/**",
" *",
" *",
" * @since $CURRENT_YEAR.$CURRENT_MONTH.$CURRENT_DATE",
" * @author MY_NAME <contact@up-tri.me>",
" */",
],
"description": "Intert the documentation comment."
}
}
としてあげると、プロジェクト内のコードエディタで ec
とタイプすれば…
となります。(プロジェクトのリロード等は必要ありません)
さっきの例でちゃっかり使いましたが、現在日時・時刻を挿入できる定数があらかじめ用意されています。
$CURRENT_YEAR
$CURRENT_YEAR_SHORT
$CURRENT_MONTH
$CURRENT_DATE
$CURRENT_HOUR
$CURRENT_MINUTE
$CURRENT_SECOND
など。
$1
, $2
… とすると、スニペット実行後にタブで各箇所を移動できます。(1, 2, 3 … の順にTabキーで移動していきます) また各箇所に初期値を設定する場合は${1:InitValue}
のように設定できます。
例えば、TypeScriptのクラスモジュールのひな形を実装したいときは…
{
"ExportedClass": {
"prefix": "ex-cls",
"body": [
"export default class ${1:ClassName} ${2:extends Parent} ${3:implements Interface} {",
" constructor($4) {",
" super($4)",
" }",
"}",
],
}
}
快適ですね。
紹介していない定数もありそうなので、詳しく気になる方はコチラもご覧くださいませ。