(初学者向け)コーディングの効率化Visual Studio Codeでユーザースニペット登録しよう

コーディングの効率化は、案件を取った際に時給単価を上げる大事な要素です。

しかし、後に回してしまいがち(私も学習や案件を優先してしまい登録が遅れました)

私のようにならないように早めにこまめに登録しましょう。

スニペットは辞書登録のようによく使うコードを登録して呼び出すことができるとても

便利なツールです。では、早速。

1,Vissual Studio Code(以下VSコード)の左上のCodeをクリック

2,基本設定をクリック

3,ユーザースニペットをクリック

4, 記入例

スニペットの名前“: {

“prefix”:”ここに呼び出すときの名前“,

“body”: “出力されるコード“,

“description”: “このスニペットの説明

},

5, 実際に書いてみます。

①既存のスニペットをからhtml.json(HTML)を選択します。

今回は<head></head>タグに入れるリセットCSSを登録します。

名前は”Rset CSS”(hogeでもなんでも問題ありませんが、後で分かるようにしておくと良いかと思います。)

6,次に”body”に登録するコードが複数行にまたがる場合

[ ]を使ってその中に書きます。


“body”:[

“出力されるコードの1行目”,

“出力されるコードの2行目”,

“出力されるコードの3行目”,

],

,を忘れるとエラーが出るので忘れずにつけてください。

7,JavaScriptでよく使うcosole.log( )を追加します。

console.log( )中にうまくカーソルが合うように$1を入れます。コーディングが楽になります。

8,続いて、WordPress用のphpを登録します。

1,新規にグローバルスニペットを登録します。

2,後の流れは他と同様です。

新しいグローバルスニペットファイルを選択します。

任意のスニペットファイル名を入れてEnterで決定します。

任意の名前をhogeにしました。hoge.code-snippetsが出来上がりました。

参考までに私が登録したWP用のPHPです。

色々と試してみて自分の使いやすいエディッタに育ててみて下さい。