0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Nuxt, TypeScriptのスニペット設定(vscode)

Posted at

NuxtJSのTypescript環境でテキストタイプがvueに対してスニペットを登録するが候補に上がってこなくすんなり設定できなかったので備忘録。
setting.jsonにてeditor.snippetSuggestions:"top"は設定済みでした。

解決

グローバルスニペット用のファイルを作り、項目scopeを追記して設定。

{
	// Place your GLOBAL 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 in vue ts": {
		"scope": "typescript,vue",
		"prefix": "log",
		"body": [
			"// eslint-disable-next-line no-console ",
			"console.log($1)"
		],
		"description": "Log output to console"
	}
}

過程

テキストタイプがvueだったのでvue用のスニペットを最初作成していました。
vscode左下の設定からユーザースニペットをクリックしvueを入力しファイルを作成。
登録したいスニペットの内容を記述しました。
image.png

実際vueファイル上で目的のものを打ってみても候補に上がって来ないので調べたところ
scopeを設定している人もいるようなので設定してみましたが
Property scope is not allowed
の表示がされたのでちがうなと…。
image.png

試しにグローバルスニペットファイルを作成し、scopeの設定すると上記の表示がされなかったので
グローバルスニペットファイルで設定したところ無事に登録したスニペットが候補に上がってきました。
image.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?