- 「Browser Support」を追加しました。
こもりが使っているモノやそうでないものも含め、なんとなくWebデザイナーやWebデベロッパーな人たちに便利そうなのを集めてみました。
ここに挙げたものは、類似のパッケージがあるものも存在するので、Package Controlや「Sublime Text Packages by the Community」などでキーワードで検索してみると良いでしょう。
LESS/Sass/SCSSなどCSSプリプロセッサの自動ビルド系パッケージは、あらかじめそれぞれの実行ファイルのインストールが必要、かつコンパイル先やコマンドの位置を設定ファイルに書く必要があります。
※入れすぎると起動時に遅くなったりするので、そこは各自の判断で。
「Cmd+Option+N」で新規ファイルを作成。「js/app.js」みたいに入力すればディレクトリから作ることもできる。
JavaScriptとjQueryの入力補完。
PHPの入力補完。その他、多くの言語の入力補完がセットになった「AndySublime」というパッケージも。
HTTPサーバであるApacheの.confファイルや.htaccessファイルの入力補完やカラーリング。
HTMLとかCSSで画像などのファイル名をディレクトリから取得し、サイズまで自動で挿入する。
Backbone.jsのスニペットと入力補完。
ブラケットに囲まれた部分をハイライトしてくれる。
caniuse.comを使って、カーソル位置の要素やプロパティのブラウザ対応状況を表示する。
Sublime Text からBowerのコマンドを実行する。
Sublime Text 上でコピーしたもののクリップボード管理。
CoffeScriptのシンタックスハイライトやスニペットなど。
システム標準のカラーパレットを呼び出して挿入する。
UTF-8にしか対応していないSublime Text 2でドキュメントの文字コードを変換・保存できる。
Media Queriesのスニペット集。「med」を入力して、Ctrl+Spaceで候補選択。
CSSのプロパティの順番をきれいにする「CSScomb」を実行。ショートカットは「Ctrl+Shift+C」。似たようなのにCSSLisibleな「CssLisible」というのもある。
Zen-Codingの後継「Emmet」のSublime Text 2版。
Sublime Text 2の文字コードをいろいろ変換する。ConvertToUTF8と違って、こちらは変換するだけ。
キーボードショートカットがぶつかってるかどうか調べるやつ。
Gistからファイルを開いたり、追加したり編集したり。
コマンドパレットからGitの各種コマンドを選択・実行できる。
起動してから開いたファイルをリストする。呼び出しは「Ctrl+Shift+R」。
開いているHTMLのカーソル位置から該当セレクタを開く(CSS/Sass/LESS)。
Sublime Text 2でCSSをより速く書くためのパッケージ。「// → /* */」などをはじめ、「poa → position:absolute」など文字が含まれていればそれを拾って展開する感じ。「m10!」とか、一部Emmetとかと被るかもしれないけど。
16進数のカラーコードを、RGBAに変換する。
HTMLをMinifyするビルドツール。呼び出しは、Buildのとこから。CSSやJSもいけるみたい。
HTMLでMustacheのシンタックスを有効にする。
画像をクリックすれば、Base64でエンコードしてくれる。「Quick Look」と共存可能。
Windowsで日本語の入力がうまくいかない環境へ対応する。インストールはこちらの配布サイトから
テキスト中に含まれる数字などを増減する。修飾キーと上下矢印キーで値を増減。16進数なども。
いわずもがなjQueryの。
こちらもjQueryのスニペット。
JavaScriptのMinifier、GoogleのClosure Compilerを使用。
LESSのファイル(.less)のシンタックスハイライト。
LESSのビルドシステム。あらかじめNode.jsを使って「less」のインストールが必要。
LiveReloadのブラウザエクステンションなどと連動して自動リロード。
保存毎にファイルのバージョン管理をしてくれるパッケージ。差分も表示可能。
開いているファイルのパスをターミナルで開く。
Markdownの書類をプレビューする。
あらかじめ登録したライブラリやフレームワークのファイルをダウンロード。.zipなどのパッケージの場合はダウンロードして解凍まで。使い方はNet Tuts+の説明を。
Nginxのシンタックスハイライト。.confファイルの編集とかをわかりやすく。
Node.jsのコード補完や各種コマンド(npm installとか)の実行。あと「node」で補完されるスニペット。
Markdownやそれ以外の各種テキストファイルをブラウザでプレビュー。MarkdownはGitHubのスタイルで確認可能。
これがないと管理が面倒。神様のようなSublime Text 2のパッケージ管理プラグイン。
Pandocを使って、ドキュメントフォーマットをいろいろ変換してくれる。Pandocのインストールが必要。
WordPressのコーディングガイドラインにあうようにカスタマイズされたPhpTidy。
HTMLのテンプレートやLorem Ipsumの固まったテキスト、プレイスフォルダーイメージなどを挿入できるスニペット。
CSSのベンダープリフィックスを付ける。
OS Xのクイックルックを使って、ファイルをプレビュー。HTMLはブラウザで表示した状態(外部Webフォントはロードされない)、画像のプレビューもオッケー。
Slimのシンタックスハイライト。パッケージオフィシャルなし。
Sass/SCSSのシンタックスハイライトと入力補完。
Sassのビルドシステム。あらかじめSassのインストールが必要。
SCSSのシンタックスハイライトやスニペット、コマンドを追加する。次の「SCSS Snippets」とスニペットが重複する。
SCSSのスニペット集。「+」でinclude、「++」でextendとか。
選択した単語からStack Overflowで検索。似たようなのにWordPressのCodexを検索するものもある。
有償だが、Sublime Text 2から直接SFTPを可能にする。ファイルの同期とかも。
「KnockoutJS」のスニペット。
各種ファイルにあわせて保存と同時に登録済みのビルドシステムでビルドする。初期設定は「CSS/JS/Sass/SCSS/LESS」。
あるとないとでは大違いのサイドバー拡張なパッケージ。
パッケージ「Git」があればいらないけど、サイドバーとかコンテキストメニューからGitを操作。
Markdownの書類をTwitter Bootstrapのテーマでプレビュー。ST2内でプレビューも可。
文字列のエンコード・デコードをおこなうパッケージ。
Stylusのビルドシステムとシンタックスハイライト。
PHP 5.4.xから入っているサーバを有効にする。サーバの操作はコマンドパレットから。
元々ある程度補完するST2をさらに強力に自動補完。言語別にオンオフもできる。
Cmd+Dを拡張する。任意の単語を順番に、スキップしながら、反転するなど。使い方は公式サイトを参照。
開いてるプロジェクトのルートディレクトリをFinderで開く。「Reveal Finder」みたいなもん。
HTML、CSS、JavaScriptをPrettifyしてくれる(キレイに成型してくれる)。要、Node.js。
簡易的なHTTPサーバを裏で起動するパッケージ。初期設定のポートは「8080」。自動起動も可能。
任意のカーソルの位置、選択状態のテキストから周辺にある特定の文字を置き換えたり消したり。
開いているフォルダのルートディレクトリをターミナルで開いてくれる。
LESSのファイルを「Recess」を使ってチェック、コンパイルする。
文書中の文字数をカウント。日本語も大丈夫。原稿などを書く人にも。
選択したテキストをハイライトする。
いわずもがなWordPressのシンタックスハイライトやスニペット。
YUI CompressorでCSSやJSを圧縮。OS XやLinuxならファイルを開いてF7、Cmd+Bで。
HTMLやCSSのスニペット集であるZen-CodingのSublime Text 2版。
CDN経由のjQueryやOGPなどのコードスニペット。Zen-Codingがあっても問題なし。
GJ!