目次
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はきちんと削除しておいたほうが良いかと思いました。