Visual Studio Code for Mac ユーザー独自のスニペット定義(Emmet編) 2015/08/19 現在 Visual Studio Code (以下:vscode) はエディタです。 Emmet を標準で利用できます。 標準では``lang属性``が``"en"``になっています。 ``Sublime Text``の様にlang属性のみを変更することができるのか? マニュアルを見るとスニペットを定義できることが判明。 スニペット定義で``Mac用``の解決策を記録します。 ただし、lang属性のみでなくHTMLテンプレートすべての記述になります。 バージョン Code: 0.7.0 Mac OS X: 10.9.xx(10.10.xxがリリースされているが自分がインストしていないだけです。) #Visual Studio について 開発者向けに Microsoft が用意したツールです 「[Visual Studio](https://www.visualstudio.com/ja-jp)」には以下3種類のツールがあります。 + Visual Studio Code + Visual Studio Online + Visual Studio それぞれの詳細はリンクから確認してください。 #Emmetについて Emmetという言葉を初めて聞いた方は[ドットインストール](http://dotinstall.com/lessons/basic_emmet)などを参考にしてください。 なお、ドットインストールの動画中でプラグインと説明されているところがあります。Sublime Text, Atom などのエディタではプラグインとして導入し使われていることが多いのでこのような説明になっています。 vscodeの方針が分かりませんので今後どうなるかは不明です。 現状では、``vscode`` では標準で利用できます。 ##Emmetの特徴 定義されたワードを、``tab``キーや``Command+E``のショートカットによりテンプレートを展開してくれるモノです。 HTMLの展開は``!``や``html:5``とタイプの後、``tab``または``Command+E``にてHTML5のテンプレートを展開します。 下記が標準の``HTMLテンプレート``になります。 ```html Document ``` 詳細は先程のドットインストールのリンクから参照ください。 #vscodeの[ユーザー定義](https://code.visualstudio.com/Docs/editor/customization#User_Defined_Snippets)ルール ##Emmetのlang="en"->lang="ja" にする方法準備 各言語毎にユーザー独自のスニペット定義(json形式)を``User Snippets``に記述します。 ``Code``から``Preferences``, ``User Snippets``を選択します。 ``Select Language for Snippet``が表示されます。 ``HTML``を選択もしくは``html``とタイプしても同様に下記のコードが表示されます。 ```json { /* // Place your snippets for HTML here. Each snippet is defined under a snippet name and has a prefix, body and // description. 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, ${id} and ${id:label} and ${1:label} for variables. Variables with the same id are connected. // Example: "Print to console": { "prefix": "log", "body": [ "console.log('$1');", "$2" ], "description": "Log output to console" } */ } ``` この様に表示されたら``{}``のなかに記述をしていきます。 ``/* */``で囲われた中身は書き方のルールが記載されています。 記述ルールは、[マニュアル](https://code.visualstudio.com/Docs/editor/customization#User_Defined_Snippets)を参照されるか、もしくは、[こちらの日本語記事](http://dev.classmethod.jp/cloud/aws/how-to-add-your-own-code-snippets-of-visual-studio-code/)を参考にしてください。 bodyに展開されるコードやテキストを設定します。 このとき、コード、テキスト内に``"``ダブルクォーテーションを記述する場合は``\"xxx\"``この様に``"``の前に``\``を記述してエスケープしてください。 #ユーザー定義 解決方法 HTML5の標準テンプレートを日本語設定にし再定義しました。 記述方法を2通り掲載しますので参考にしてください。 単に最初のコードはサンプルを含んだままhtmlの自前用に変更したテンプレートを記述。 次に、htmlテンプレートのみを記述したものです。 お好きな方を全選択、コピーしご自身のファイルにペーストしてください。 ```json { /* // Place your snippets for HTML here. Each snippet is defined under a snippet name and has a prefix, body and // description. 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, ${id} and ${id:label} and ${1:label} for variables. Variables with the same id are connected. // Example: "Print to console": { "prefix": "log", "body": [ "console.log('$1');", "$2" ], "description": "Log output to console" } */ "html5": { "prefix": "html:5", "body": "\n\n\n \n ${1:Document}\n\n\n $2\n\n" } } ``` もしくは、下記のようにスッキリさせる方法でも利用できます。 ```json { "html5": { "prefix": "html:5", "body": "\n\n\n \n ${1:Document}\n\n\n $2\n\n" } } ``` ##適用後のhtmlの展開テンプレート ```html Document ``` Googleの検索エンジン最適化ガイドに従い、インデントは2スペースにしました。 標準と同様に``tab``でtitleタグの``Document``と``body``直下へ移動できるようになっています。 #使用するときの注意 vscode 右下の言語を``Plain Text``から``HTML``に変更して操作を行ってください。 また、Emmetの別名で定義されている``!``マークでは``HTMLテンプレート``を展開できません。 ``html``と入力すると変換候補が現れます。 ``enter``もしくは``return``でテンプレートが展開されます。 ``tab``により決められた場所への移動ができます。 移動モードから編集モードにする場合は``enter``により移動モードが解除され編集ができます。 ``emmet``の短縮コードを打ち込み、展開してみてください。 ####参考 + [Visual Studio Codeでユーザー独自のスニペットを定義する](http://dev.classmethod.jp/cloud/aws/how-to-add-your-own-code-snippets-of-visual-studio-code/) + [上の記事内のatom用をvscode版に変更したサンプル](https://gist.github.com/yuyawata/d8c298e2594737f17708) windows版 + [vscode for windows](http://browser.hatenablog.com/entry/2015/05/05/203948)