ブログ

Visual Studio Code スニペット

2020.11.24 : Yamamoto Naoki
Coding

スニペット(snippet):直訳すると断片、切れ端という意味です。

コーディングをしていると何度も同じコードを書く機会がありますが、その度にコードを書くのは効率が悪いので、繰り返し出てくるソースコードをスニペットとして登録しておくことで、作業効率を上げ快適にコーディングすることができます。

今回はユーザースニペットを使ってwordpressでよく使うソースコードを登録してみます。

ファイル > 基本設定 > ユーザースニペット を選択し、新しいグローバルスニペットファイルを選択し、名前をつけます。

ここでは、nanasan としました。nanasan.code-snippets が生成されます。

そこに、サンプルが表示されているかと思います。(9行目から17行目)

以下が原型です。

ざっくり書くと以下の感じになります。

{
  "スニペットの名前”: {
    "prefix": "呼び出すときの名前,
    "body":[
      "出力されるコードの1行目",
      "出力されるコードの2行目",
      "...",
    ],
    "description": "スニペットの説明文"
  }
}

これを踏まえ得て、wordpress でよく使うカスタム投稿の設定をスニペットに登録します。
呼び出し名は「wp-cp」としました。

 "wp-cp": {
        "prefix": "wp-cp",
        "body": [
            "//カスタム投稿",
            "add_action( 'init', 'create_post_type' );",
            "function create_post_type() {",
            "	register_post_type( '投稿タイプ名', [",
            "		'labels' => [",
            "			'name'          => '管理画面上で表示する投稿タイプ名',",
            "			'singular_name' => 'カスタム投稿の識別名',",
            "		],",
            "		'description'=> \"\",",
            "		'public'=> true,",
            "		'publicly_queryable'=> true,",
            "		'show_ui'=> true,",
            "		'show_in_nav_menus'=> true,",
            "		'show_in_rest'=> true,",
            "		'rest_base'=> \"\",",
            "		'rest_controller_class'=> \"\",",
            "		'has_archive'=> true,",
            "		'has_archive_string'=> \"\",",
            "		'exclude_from_search'=> false,",
            "		'capability_type'=> \"post\",",
            "		'hierarchical'=> false,",
            "		'rewrite'=> true,",
            "		'rewrite_slug'=> \"\",",
            "		'rewrite_withfront'=> true,",
            "		'query_var'=> true,",
            "		'query_var_slug'=> \"\",",
            "		'menu_position'=> 5,",
            "		'show_in_menu'=> true,",
            "		'show_in_menu_string'=> \"\",",
            "		'menu_icon'=> \"dashicons-text-page\",",
            "		'supports'=> array(",
            "			'title','thumbnail' ,'excerpt'",
            "		),",
            "	]);",
            "}",
        ],
        "description": "wordpressカスタム投稿用生成用"
    },

めんどくさがり屋には、こちら

登録したいソースコードと、呼び出し名を記入すると生成してくれます。

https://migi.me/vsc_snippet/

登録が完了したいら、早速使ってみます。

新規ファイルを立ち上げ、「wp-cp」と入力すると(wpだけでも出てくるかと思います)

登録したソースが以下のように表示されます。

return(enter)キーで確定するとファイル内に記述されます。

このように簡単に登録できますので、よく使うソースコードを登録して、作業効率をあげていきましょう!

アーカイブ

新しいサイト制作や、既存サイトの運用に関するお困りごとなどございましたらご依頼、ご相談ください。

ビジネスやサービスに最適なウェブ制作、デザインをおこなっている株式会社ナナサンの会社案内をダウンロードいただけます。

制作依頼・ご相談 資料ダウンロード
イメージ:制作依頼・ご相談
イメージ:制作依頼・ご相談