【Sublime Text 3その2】Dreamweaverのように使えるようカスタマイズ【Mac編】

前回、導入から日本語化(Shift-JIS対応も)まで進めました。
今回は、本格的にカスタマイズしていきます。

1.Emmet

入力を高速化できるEmmetを導入します。
Emmetについての解説はコチラ

Command + Shift + P でPackage Controlを起動
(Package Controlをインストールしていない場合はコチラを参照して導入
Packege Control: Install Packageを選択
Emmetと入力、表示されたパッケージをクリック。
これでインストール完了です。

使い方の例:

ul>li*4>{<img src='00$.jpg'>;}

上記入力後、tabキーを押すと以下のようになります。


<ul>
 
<li><img src='001.jpg'>;</li>

 
<li><img src='002.jpg'>;</li>

 
<li><img src='003.jpg'>;</li>

 
<li><img src='004.jpg'>;</li>

</ul>

※htmlやphpファイル上でのみ、動作するので注意!

2.AutoFileName

Dreamwearverで便利な、imgタグのwidth,heightの自動入力をしてくれる機能です。これはメニューの設定ファイルから設定できます。
メニューの基本設定>基本設定 – ユーザを開く
(日本語化していない場合は、Preferences > Sublime Text > Settings-User)

{
 "ignored_packages":
 [
 "Vintage"
 ]
}

このようなファイルが表示されるので下記2つを追記。

"afn_insert_width_first": true,
 "afn_template_languages":true,

結果このようになります。

{
 "afn_insert_width_first": true,
 "afn_template_languages":true,
 "ignored_packages":
 [
 "Vintage"
 ]
}

保存して閉じます。

3.SideBarEnhancements

サイドバーのパワーアップ。

Package Controlを起動>Packege Control: Install Packageを選択SideBarEnhancementsと入力、表示されたパッケージをクリック。

4.SyncedSideBar

開いているファイルとサイドバーが同期されます。

Package Controlを起動>Packege Control: Install Packageを選択SyncedSideBarと入力、表示されたパッケージをクリック。

5.Increment Selection

urlや画像を数字連番にした場合、数字増加を自動でしてくれる便利なパッケージ。

Package Controlを起動>Packege Control: Install Packageを選択
Increment Selectionと入力、表示されたパッケージをクリック。

使い方

deta
1.増やしたい数字の最初の数値を選択。
2. Command + D で次の数値が選択できます。
3. Command + Shift + P でPackage Controlを起動
4. Increment Selectionを起動で自動変換されます

この投稿へのコメント

コメントはありません。

コメントを残す

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

*

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL