2012年12月14日金曜日

Sublime Text 2 の html の入力補完をカスタマイズする

Sublime Text 2 には、デフォルトで html の入力補完機能が用意されています。

例えば、html まで打って Tab キーを押すと、
view plainprint?
  1. <html>  
  2. <head>  
  3.  <title></title>  
  4. </head>  
  5. <body>  
  6.    
  7. </body>  
  8. </html>  
に変換されます。

link まで打って Tab キーを押すと、
view plainprint?
  1. <link rel="stylesheet" type="text/css" href="">  
に変換されます。

script まで打って Tab キーを押すと、
view plainprint?
  1. <script type="text/javascript"></script>  
に変換されます。


ここで、例えば script と打ってタブを押したときに
view plainprint?
  1. <script type="text/javascript" src=""></script>  
と src 属性も入れてほしいなと思った場合、

Subime Text 2 のパッケージディレクトリ（[Preferences] - [Browse Packages...] で開くディレクトリ）の HTML フォルダの HTML.sublime-completions を変更します。
view plainprint?
  1. { "trigger": "script", "contents": "<script type="\"${1:text/javascript}\"">$0</script>" },  
を
view plainprint?
  1. { "trigger": "script", "contents": "<script type="\"${1:text/javascript}\"" src="\"$2\"">$0</script>" },  
に変更すれば OK です。$n は補完した後にタブでカーソルが移動する位置を指定しています。


html だけはこのファイルではなく、html.sublime-snippet に記述します。

例えば、html と打ってタブを押したときに
view plainprint?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.  <meta charset="utf-8" />  
  5.  <title></title>  
  6. </head>  
  7. <body>  
  8.   
  9. </body>  
  10. </html>  
のように <!DOCTYPE html> と <meta> 部分も入れたいなという場合、

html.sublime-snippet を次のように変更すれば OK です。
view plainprint?
  1. <snippet>  
  2.  <content><![CDATA[ 
  3. <!DOCTYPE html> 
  4. <html> 
  5. <head> 
  6.  <meta charset="utf-8" /> 
  7.  <title>$1</title> 
  8. </head> 
  9. <body> 
  10. $0 
  11. </body> 
  12. </html>]]></content>  
  13.  <tabTrigger>html</tabTrigger>  
  14.  <scope>text.html</scope>  
  15. </snippet>  



投稿者 時刻:
ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)