1. ホーム
  2. 日々のコト
  3. SublimeText2を3ヶ月使ってみて利用を決めたPackageまとめ

更新日:2023年3月4日
投稿日:2013年3月1日

関連リンク

Sublimetext使用開始時に、検索して、みなさんの利用しているPackageを色々入れてみていました。3ヶ月経ってみての感想ですが、自分がちゃんと利用していたPackageは思ったより少なかったです。
自分のマークアップ環境で利用するPackageを厳選してみました。
主にHTMLコーダーさんには参考になるかなと思います。

まずは、Package Controlをインストールします

Console画面を開きます。
View > Show Console
Consoleに下記を入力して、Sublime Textを再起動するとPackage Controlが利用できます。


import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

再起動後、Command Palette(command + shift + p )を出して、installと入力すると
Package Control:install Packageが出てくるのでenterすると、Package選択画面が出てきてPackageを簡単にインストールできるようになります。

利用しているPackage

AutoFileName

画像などのファイルネーム入力の自動補完をしてくれます。
img と入力して tab で

<img src="" alt="">

が補完されますので、続けて
[code]<img src="img/" alt="">[/code]
と入力すると、imgフォルダに入っているファイルを選択することができます。

<img src="img/hoge.png" height="100" width="200" alt="">

と高さと幅も入力されます。

width、heightの表記順序変更

普段はwidth、heightの順番に書いていますので、展開時のwidthとheightの順番を入れ替える設定をします。

変更するファイル名

/Packages/AutoFileName/autofilename.py


このようになっている条件を入れ替えます。
if self.get_setting('afn_insert_width_first',view):
    self.insert_dimension(edit,h,'height',tag_scope)
    self.insert_dimension(edit,w,'width',tag_scope)
else:
    self.insert_dimension(edit,w,'width',tag_scope)
    self.insert_dimension(edit,h,'height',tag_scope)

BracketHighlighter

divとか{}とかの組み合わせを色付けして強調してくれます。

ColorPicker

カラーピッカーを出現させることができます。
Key Bindingsでショートカットを設定します。
command + _でColorPickerを起動できるようにします。
※「super」はcommandキーのことです。
※「_」は「ろ」のキーです。自由に変更してください。


[
	{ "keys": ["super+_"], "command": "color_pick" }
]

CSS Snippets

CSSのスニペット集。スニペット自体は自作で追加できます。

CSScomb

CSSのプロパティをソートしてくれます。

Hayaku – tools for writing CSS faster

cssの記述が早くなります。
tac + tab

text-align: center;

wwb


-ms-word-wrap: break-word;
    word-wrap: break-word;

bdrr3


-webkit-border-radius: 3px;
        border-radius: 3px;

など、直感的なcssコーディングが可能になります。必須packageです。

HTML5

HTML5のスニペット集と自動補完やハイライトをしてくれます。

Inc-Dec-Value

テキスト中に含まれる数字と#fffffなどを増減できます。
option + 上下矢印キーで動かせるようになります。忘れがちですが地味に便利です。

jQuery

jQueryの自動補完です。

jQuery Snippets pack

jQueryのスニペット集です。

Local History

保存毎にファイルのバージョン管理をしてくれるパッケージです。差分も表示可能らしいです。
(差分の表示方法を要確認)

SublimeCodeIntel

自動補完をさらに補完してくれます。

Tag

HTMLなどの閉じタグの入力を補完を強化してくれます。
HTMLをoption + control + fでDreamweaverのソースコードフォーマット(見た目を綺麗に整えてくれる)ができるらしいですが、なんとなく怖くて使えてません。

利用をやめたPackage

FileDiffs

二つのファイル間の差分を確認します。
kaleidescopeを利用することにした為、利用していません。

Git

コマンドパレットからGitコマンドが打てます。
Git自体慣れてないので、慣れたターミナルを利用している為、利用していません。

GotoRecent

ctrl + shift + rで、起動している開いたファイルをリストにするらしいですが、
よくわからず利用していないです。

MarkdownBuild+MarkdownEditing

Markdownを拡張できます。
Markdownを利用していない為、利用していません。

OmniMarkupPreviewer

Markdownをブラウザでプレビューできるらしいです。
Markdownを利用していない為、利用していません。

SCSS

sassの自動補完とシンタックスをハイライトで見やすくしてくれます。
sassをcssのように自動補完してくれるので楽になります。

SublimeLinter

リアルタイムで文法チェックができるようです。
使い方がわからない為、利用していません。node.jsが必要?

WordPress

WordPressのスニペット集とハイライトをしてくれるらしいです。
コピーペーストで十分な為、利用していません。

LiveReload

LiveReloadのブラウザエクステンションと連動して利用するようです。
Auto Reloadedアプリを利用しているので、これは使っていません。
これが原因かわからないですが、sassのoutputで、scoutでの設定とは別にoutputされるという事がありました。
他のエディタだと発生しなかったので、Packageが原因かなと思いました。

SublimeText2のPackageを整理整頓したら直りましたが、今回のような事もありますので、利用しないPackageはきちんと削除しておいたほうが良いかと思いました。