Open5
VSCodeでReactの独自スニペットを作りたい
ピン留めされたアイテム
最終案
react.code-snippets
{
"React FC": {
"scope": "typescriptreact",
"prefix": "fc",
"body": [
"const ${1:$TM_FILENAME_BASE}: React.VFC = () => {",
" return (",
" <div className=''>",
" <div></div>",
" </div>",
" );",
"};\n",
"export default ${1:$TM_FILENAME_BASE};"
],
"description": "React関数コンポーネントの雛形"
}
}
モチベーション
ES7 React/Redux/GraphQL/React-Native snippets - Visual Studio Marketplace
こういうのが有名だけど使わないやつが候補に出てくるのが嫌だった
欲しいやつは2,3個とかだろうから自分で作ってしまおう
コマンドパレットから検索すると出てくる
ワークスペースに作ることもできる
適当な名前でファイル名を生成
今回はreact.code-snippetsとした
.vscode内に作成する
react.code-snippets
{
// Place your sunae ワークスペース 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"
// }
"React FC": {
"scope": "typescriptreact",
"prefix": "fc",
"body": [
"import React from 'react';\n",
"const $1: React.VFC = () => {",
" return (",
" <div className=''>",
" <div></div>",
" </div>",
" );",
"};\n",
"export default $1;"
],
"description": "React関数コンポーネントの雛形"
}
}
参考
完成
こんなのあった