はじめに
VSCodeには様々なカスタマイズをできるAPIが提供されていますが、簡単に設定できてとても便利になるUser Snippetという機能があって、あまり知られていない気がしたので紹介します！
私はフロントエンドエンジニアなので、後半の例ではフロントエンドで多用するものが多くなっています。(React多め)
Snippetとは
Snippetとはコードの切れ端を表すもので、切り貼りで再利用できるコードのことをいいます。
短い文字列に設定されたエイリアスを入力してTabやカーソルで選択することでコードのテンプレートを利用できる機能が最近のエディタにはあります。
HTMLの有名なEmmetの例
この項目が、VSCodeでは簡単な定義ファイルを一つ作るだけでオリジナルのSnippetを作ることができます。
設定の方法
プロジェクトのメンバーで共有したいSnippetはプロジェクトないの.vscodeディレクトリ内に作って、gitなどで共有すればいいですし、自分のみで使いたいSnippetがあった場合はCode/User/snippets/ディレクトリ内に作ることで自分だけのSnippetを作ることができます。
Code/User/snippets/javascript.code-snippetsなどに作ると、その言語を対象としたSnippetを作ることができます。
CodeディレクトリはMacなら~/Library/Application Support/Code、WindowsならC:\users\{username}\AppData\Local\Programs\Microsoft VS Codeにあります。
Macなら⌘ + Shift + P、WindowsならCtrl + Shift + Pを押すことでコマンドパレットが開き、>snippetsと入力することで、Snippetのファイルを開いたり生成することができます。
そして、作成したファイルの中にJSONの形式で以下のように記述していくだけです。
{
"Print to console": {
"scope": "javascript,typescript",
"prefix": "log",
"body": [
"console.log('$1')",
"$2"
],
"description": "Log output to console"
}
}
scopeはどの言語でこのsnippetsを利用するかを指定します。
この例だとjavascriptとtypescriptのコードで利用できます。
prefixはどのように入力したときのこの候補を出すかを指定します。
javascriptかtypescriptのコードの中でlogと入力するとこの候補が出てくるようになります。
discriptionは、snippetが表示される時にこの内容が説明として表示されます。
そして、bodyが実際にsnippetとして入力される内容です。
文字列で指定することもできますし、配列の形式で複数行を指定することもできます。
この時に、$1などを使うとその場所にカーソルがある状態で入力されて、Tabキーで$1から順番に切り替えながら入力ができるようになります。
${1:hoge}のようにしておくことで、プレースホルダーを設定しておくことも可能です。
さらに詳しく知りたい人は以下のリンクを参照してください。
Snippets in Visual Studio Code
本当によく使うSnippetの場合はキーボードショートカットに設定すると便利かもしれません。
Assign keybindings to snippets
使い方の例
Reactのコンポーネントのテンプレート
Emotion使うとか、PropTypes使うとか、その他プロジェクトの内容に応じてカスタマイズして、プロジェクトのuser snippetsに登録しておくと多少楽になるかも。
.vscodeディレクトリをgitで管理しておけばプロジェクトメンバーも使えるようになるので、書き方の揺れとかも少なくなるかも。
scopeはjsならjavascriptreact、tsならtypescriptreactになります。
{
"reactfc": {
"scope": "typescriptreact",
"prefix": "reactfc",
"body": [
"import React from 'react'",
"",
"type Props = {",
" ${1:className?: string}",
"}",
"",
"export const Hello: React.FC<Props> = (props) => {",
" const { ${2:className} } = props",
"",
" return <div className={className}>$3</div>",
"}",
""
],
"description": "Reactコンポーネントのテンプレート"
}
}
よく書くコードのパターン
useStateとかよく使うパターンについて設定しておくと楽になります。
正規表現を使って文字を置き換えるようにしておくことで、$1のstateの変数を入力した後Tabキーを押すことで、set${1}の部分をStateのように大文字に変換して入力するように設定もできます。
参考: https://code.visualstudio.com/docs/editor/userdefinedsnippets#_placeholdertransform
少し設定が難しいですが、使いこなせるようになればとても便利です。
useCallback, useEffectなどよく使うパターンは登録しておくとコーディングが早くなります。
{
"useState": {
"scope": "javascriptreact,typescriptreact",
"prefix": "useState",
"body": [
"const [${1:state}, set${1/^(.)(.*)$/${1:/upcase}${2}/}] = useState($2)"
],
"description": "useStateのテンプレート"
}
}
よく使うCSS
absoluteで中央寄せするやつ
たまに使うけどどうだったか覚えてないので調べがち
{
"absolute center": {
"scope": "css,scss",
"prefix": "absolute center",
"body": [
"position: absolute;",
"top: 50%;",
"left: 50%;",
"transform: translateY(-50%) translateX(-50%);"
],
"description": "absoluteの中央寄せ"
}
}
flex
よく使うパターンは登録しておくと楽になる
{
"flex row": {
"scope": "css,scss",
"prefix": "flex row",
"body": [
"display: flex;",
"flex-direction: row;"
],
"description": "flex row"
},
"flex column": {
"scope": "css,scss",
"prefix": "flex column",
"body": [
"display: flex;",
"flex-direction: column;"
],
"description": "flex column"
},
"flex center": {
"scope": "css,scss",
"prefix": "flex center",
"body": [
"justify-content: center;",
"align-items: center;"
],
"description": "flex center"
}
}
まとめ
VSCodeのUser Snippetを実際に使ってみて便利だと思ったので、これは布教していきたいと思って記事を書いてみました。
是非参考にして、皆さんのプロジェクトを便利にしていってください！