はじめに

こんにちは。WEBデザイナー見習いモドキ未満みたいな感じの存在です。
アドベントカレンダーを書くことになりました。

弊社ではデザイナーは基本的にSublimeTextをエディターとして使っています。そこで、WEBデザイナー的な視点でのパッケージ構成を紹介していこうと思います。
（主にコーディングしているのはHTML5、CSS3、SCSS、jQueryです）

とりあえず一覧

		"installed_packages":
	[
		"10% Too Dull for My Tastes Color Scheme",
		"1337 Color Scheme",
		"AutoFileName",
		"BoundKeys",
		"BracketHighlighter",
		"Codecs33",
		"Color Highlighter",
		"ConvertToUTF8",
		"CSS3",
		"Emmet",
		"FileIcons",
		"FileOpTabContextMenu",
		"Goto-CSS-Declaration",
		"HTML5",
		"Japanize",
		"jQuery",
		"Package Control",
		"Print to HTML",
		"Sass",
		"SideBarEnhancements",
		"SublimeLinter",
		"SublimeLinter-contrib-scss-lint",
		"Sublimerge Pro",
		"SyncedSideBar",
		"TrailingSpaces",
		"View In Browser"
	]
}

絶対無駄なのありますねこれ！
ご覧の通り、私は使うかわからないパッケージも入れちゃうし、Chromeもアドオン盛り盛りな性格です。（そのせいで問題が起きるとしても）

よくつかうパッケージ

BracketHighlighter

[]、{}、<>のような囲いを強調して表示してくれます。
たまに閉じ漏れしてしまうので、予防として役立ちますね。

Codecs33,ConvertToUTF8

SHIFT-JISとか開けるようになります。UTF-8の変換とかも可能。

Emmet

正直扱いきれてませんが、便利なはず。使いこなせればきっとコーディングが爆速になるに違いない。

Goto-CSS-Declaration

ショートカットでHTML上に記述されているCSSに飛べるようになるパッケージです。
複数のCSSを読み込んでいるHTMLの場合、「はて、このclassはどこにあるんだ…？」がなくなるので結構便利です。

HTML5,jQuery,Sass,CSS3

入れておけば、途中まで入力した際に補完してくれます。
この辺はどの言語を使っているかにもよりますが、全部手打ちしてるとミスに繋がりかねないので、自動補完はミス防止になりますね。

Japanize

日本語化です。

SideBarEnhancements

サイドバーが便利になります。

SublimeLinter

構文Errorを指摘してくれるツールです。よく間違える身としては大変ありがたいのですが、たまにバグって全文指摘してきます。

SyncedSideBar

現在開いているファイルがハイライトで表示されます。デフォでついてないのがおかしい気もする。そういうものなのか。

A File Icon

サイドバーのファイルの横に拡張子ごとのアイコンがつくようになります。
見た目でわかりやすくなるのはいいですね。

TrailingSpaces

行末にある不要なスペースをめちゃくちゃ目立つ感じで表示してくれます。
コマンドパレットからTrailing Spaces: Delete Trailing Spacesを入力すれば一括削除もできます。

たまに使うパッケージ

10% Too Dull for My Tastes Color Scheme,1337 Color Scheme

まとめてご紹介。
どちらもカラースキームを変更します。実用性は特にないんですけども、気分を変えたいときに。いずれにせよ白背景は目がつかれるので黒とかダークブルーとかになりますが。

AutoFileName

ファイルパスを補完してくれるパッケージです。
特に便利なところは画像の補完をした際に幅と高さの表示＆補完もしてくれるところです。

BoundKeys

増えに増えたショートカットをまとめてくれます。
たまにこれで確認しないとそもそも何が入っていたのかわからなくなります。

Print to HTML

一度しか使ったことがないのですが、紙に印刷してコードチェックしたりするときに便利です。
コードに文字色装飾をした状態で印刷を行うことが出来ます。

Sublimerge Pro

いわゆるDiffをとる為のパッケージです。
弊社では基本Git管理ですし、こまめにコミットするようにしているのでたまーにしか使いませんがあると便利です。

View In Browser

便利なんですけど設定が大変で…。
ブラウザでプレビューが見れるようになります。

さいごに

この記事を書いていたら5個ほどインストールしたものの、まったく使ってないパッケージがあったので削除しました。そういうこともあります。
SublimeTextは自由にパッケージを追加して、ユーザー毎の需要に近づけていけるのはとても良いですね！みなさんも自分に合ったパッケージを見つけましょう！私もパッケージの整理が出来たので新しいパッケージを探そうと思います！ではでは！