Dreamweaver歴8年半の僕が3日前にSublime Text 2にしてやったこと

これまでかたくなに Dreamweaver を利用していたのですが、CS6 にアップデートしたあたりから動作が重くなり、直近ではもーやってられんとなりましたので重い腰をあげて Sublime Text 2 デビューをはたしました。
これでやっと僕にも春が来るのかなとワクワクしております。

参考にした記事

以下あたりを読みました。

基本
Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ | Mnemoniqs Web Designer Blog
Sublime Text2の複数カーソルの使い方 #SublimeText2 – Qiita [キータ]
SublimeText2を3ヶ月使ってみて利用を決めたPackageまとめ | 濃紺ピッチャー
Emmet系
Sublime Text 2のEmmetでdivの閉じタグにコメントを自動で入れるカスタマイズ|Blog|Skyward Design
CSSの記述を高速化する、Emmet (Zen-Coding)|Web Design KOJIKA17
スニペット系
Sublime Text 2で自分用のスニペットを作る方法 | prime factor
Sublime Text 2でjQuery用のスニペットを自作するときの注意点 | REFLECTDESIGN

その他にもいろいろ読みましたが、ほとんどが流し読みで、参考にしたのはおもに上記だったと思います。

インストールしたパッケージ

上記の記事を読んでいただき個々に精査いただくのが良いかと思いますが、個人的に以下を入れております。

  • AutoFileName
  • BracketHighlighter
  • ColorPicker
  • Compass
  • CSS Snippets
  • Emmet
  • HTML5
  • jQuery
  • Package Control
  • Sass
  • SASS Snippets
  • SideBarEnhancements

自作したスニペット

CSS はいつも Sass/Compass です。それ用に便利なのを探しきれなかったのでスニペットを作りました。
作ったスニペット (8KB)
よろしければお試しください。

使い方

「/Users/user/Library/Application Support/Sublime Text 2/Packages/User/」内に解凍した User フォルダ内の .sublime-snippet ファイルをいれていただき、Sublime Text 2 を再起動すれば利用できるはずです。
スニペットには tabTrigger というのがありまして、何を入力したときにスニペット候補を出すのかっていう文字列なわけですが、僕の場合は以下の4つの接頭辞にしています。

  • compass.
  • mixin.
  • mq.
  • and.

compassと入力した状態

compassと入力した状態

スニペットのファイル名も上記の接頭辞からはじまっておりますのでどのファイルがどれなのかも一目瞭然ですね。

スニペットの説明

以下の表のとおりです。
展開されるコード列でハイライトされている箇所が展開後に選択される箇所となっています。
展開後に選択される箇所だけでなく、tabキーで移動できる箇所があるものもありますので、気になる方は実際にtabキー操作をしてみたり、スニペットの中身をご覧になってみてください。

「compass.」系

tabTrigger 展開されるコード
compass.background-size @include background-size(value);
compass.border-image @include border-image(url(value) 00 round fill);
compass.border-radius @include border-radius(value);
compass.box-shadow @include box-shadow(value rgba(0,0,0,0));
compass.box-sizing @include box-sizing(border-box);
compass.inline-image background: inline-image(‘value‘) left top no-repeat;
compass.linear-gradient @include background(linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%));
compass.opacity @include opacity(.6);
compass.rotate @include rotate(value);

「mixin.」系

tabTrigger 展開されるコード
mixin.inline-block @include inline-block;
mixin.sprite-background @include sprite-background(value);

いつも利用している mixin は以下のファイルにあります。
_mixin.zip (602B)
以降の「mq.」系のものも上記の mixin に入っています。

「mq.」系

メディアクエリ系ですね。

tabTrigger 展開されるコード
mq.pc
@include pc(&point-pc) {
	property
}
mq.sp
@include sp(&point-sp) {
	property
}
mq.tablet
@include tablet(&point-tablet-1,&point-tablet-2) {
	property
}

「and.」系

tabTrigger 展開されるコード
and.first-child
&:first-child {
	property
}
and.first-of-type
&:first-of-type {
	property
}
and.last-child
&:last-child {
	property
}
and.first-child
&:first-child {
	property
}
and.link
&:hover,
&:focus,
&:active {
	property
}
and.not
&:not(value) {
	property
}
and.nth-child
&:nth-child(value) {
	property
}
and.nth-of-type
&:nth-of-type(value) {
	property
}

その他同僚に教えてもらったこと

ショートカットキーなんかはなかなか覚えきれないので、われらがキム兄にちょいちょい教えてもらってます。
また、僕は普段のマークアップのさいに HTML にはインデントをつけないのですが、デフォだとインデントが付いてしまいます。
HTML だけにインデントをつけないようにするには、なにかしらの HTML ファイルを開いた状態で「Sublime Text 2メニュー > Preferences > Settings – More > Syntax Specific – User」を開くとまっさらかと思いますので、以下のように記述すればOKです。
こちらは井上さんに教えてもらいました。

{
	"auto_indent": false
}

ということで

まだまだ Dreamweaver 一本です、という方は試してみてください!

こちらもどうぞよろしくお願いいたします。
jQuery入門講座 2013年6月8日開催のお知らせ

comment

  1. ピンバック: ツカエル!ネットの話題 » Blog Archive » 04月25日 05:00版

  2. ピンバック: 2013年04月22日から2013年04月28日までのつぶやき | BENNO9

  3. ピンバック: 便利過ぎる!視覚的にCSSを編集出来る様になる「Emmet LiveStyle」 | えんぞーどっとねっと

  4. ピンバック: 便利過ぎる!視覚的にCSSを編集出来る様になる「Emmet LiveStyle」|えんぞーどっとねっと

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

TrackBack URL :