Skip to content

Instantly share code, notes, and snippets.

@gaspanik
Last active January 18, 2021 09:05
Show Gist options
  • Star 81 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save gaspanik/4048934 to your computer and use it in GitHub Desktop.
Save gaspanik/4048934 to your computer and use it in GitHub Desktop.
ST2: Sublime Text 2 Packages for Web Developers.

Recommended Sublime Text 2 Packages for Web Developers.

Update

  • 「Browser Support」を追加しました。

2013 Spring & Summer

こもりが使っているモノやそうでないものも含め、なんとなくWebデザイナーやWebデベロッパーな人たちに便利そうなのを集めてみました。

ここに挙げたものは、類似のパッケージがあるものも存在するので、Package Controlや「Sublime Text Packages by the Community」などでキーワードで検索してみると良いでしょう。

LESS/Sass/SCSSなどCSSプリプロセッサの自動ビルド系パッケージは、あらかじめそれぞれの実行ファイルのインストールが必要、かつコンパイル先やコマンドの位置を設定ファイルに書く必要があります。

※入れすぎると起動時に遅くなったりするので、そこは各自の判断で。

AdvancedNewFile

「Cmd+Option+N」で新規ファイルを作成。「js/app.js」みたいに入力すればディレクトリから作ることもできる。

AndyJS

JavaScriptとjQueryの入力補完。

AndyPHP

PHPの入力補完。その他、多くの言語の入力補完がセットになった「AndySublime」というパッケージも。

ApacheConf

HTTPサーバであるApacheの.confファイルや.htaccessファイルの入力補完やカラーリング。

AutoFileName

HTMLとかCSSで画像などのファイル名をディレクトリから取得し、サイズまで自動で挿入する。

Backbone.js

Backbone.jsのスニペットと入力補完。

BracketHighlighter

ブラケットに囲まれた部分をハイライトしてくれる。

Browser Support

caniuse.comを使って、カーソル位置の要素やプロパティのブラウザ対応状況を表示する。

Bower

Sublime Text からBowerのコマンドを実行する。

Clipboard History

Sublime Text 上でコピーしたもののクリップボード管理。

CoffeeScript

CoffeScriptのシンタックスハイライトやスニペットなど。

ColorPicker

システム標準のカラーパレットを呼び出して挿入する。

ConvertToUTF8

UTF-8にしか対応していないSublime Text 2でドキュメントの文字コードを変換・保存できる。

CSS Media Queries Snippets

Media Queriesのスニペット集。「med」を入力して、Ctrl+Spaceで候補選択。

CSScomb

CSSのプロパティの順番をきれいにする「CSScomb」を実行。ショートカットは「Ctrl+Shift+C」。似たようなのにCSSLisibleな「CssLisible」というのもある。

emmet-sublime

Zen-Codingの後継「Emmet」のSublime Text 2版。

Encoding Helper

Sublime Text 2の文字コードをいろいろ変換する。ConvertToUTF8と違って、こちらは変換するだけ。

FindKeyConflicts

キーボードショートカットがぶつかってるかどうか調べるやつ。

Gist

Gistからファイルを開いたり、追加したり編集したり。

Git

コマンドパレットからGitの各種コマンドを選択・実行できる。

GotoRecent

起動してから開いたファイルをリストする。呼び出しは「Ctrl+Shift+R」。

Goto CSS Declaration

開いているHTMLのカーソル位置から該当セレクタを開く(CSS/Sass/LESS)。

Hayaku

Sublime Text 2でCSSをより速く書くためのパッケージ。「// → /* */」などをはじめ、「poa → position:absolute」など文字が含まれていればそれを拾って展開する感じ。「m10!」とか、一部Emmetとかと被るかもしれないけど。

HQX to RGBA

16進数のカラーコードを、RGBAに変換する。

HTML Compressor

HTMLをMinifyするビルドツール。呼び出しは、Buildのとこから。CSSやJSもいけるみたい。

HTML Mustache

HTMLでMustacheのシンタックスを有効にする。

Image2Base64

画像をクリックすれば、Base64でエンコードしてくれる。「Quick Look」と共存可能。

IMESupport

Windowsで日本語の入力がうまくいかない環境へ対応する。インストールはこちらの配布サイトから

Inc-Dec-Value

テキスト中に含まれる数字などを増減する。修飾キーと上下矢印キーで値を増減。16進数なども。

jQuery

いわずもがなjQueryの。

jQuery Snippets pack

こちらもjQueryのスニペット。

JsMinifier

JavaScriptのMinifier、GoogleのClosure Compilerを使用。

LESS

LESSのファイル(.less)のシンタックスハイライト。

LESS-build

LESSのビルドシステム。あらかじめNode.jsを使って「less」のインストールが必要。

LiveReload

LiveReloadのブラウザエクステンションなどと連動して自動リロード。

Local History

保存毎にファイルのバージョン管理をしてくれるパッケージ。差分も表示可能。

Mac Terminal

開いているファイルのパスをターミナルで開く。

Markdown Preview

Markdownの書類をプレビューする。

Nettuts+ Fetch

あらかじめ登録したライブラリやフレームワークのファイルをダウンロード。.zipなどのパッケージの場合はダウンロードして解凍まで。使い方はNet Tuts+の説明を。

こもりのFetchの設定ファイル

nginx

Nginxのシンタックスハイライト。.confファイルの編集とかをわかりやすく。

Nodejs

Node.jsのコード補完や各種コマンド(npm installとか)の実行。あと「node」で補完されるスニペット。

OmniMarkupPreviewer

Markdownやそれ以外の各種テキストファイルをブラウザでプレビュー。MarkdownはGitHubのスタイルで確認可能。

Package Control

これがないと管理が面倒。神様のようなSublime Text 2のパッケージ管理プラグイン。

Pandoc

Pandocを使って、ドキュメントフォーマットをいろいろ変換してくれる。Pandocのインストールが必要。

PhpTidy

WordPressのコーディングガイドラインにあうようにカスタマイズされたPhpTidy。

Placeholders

HTMLのテンプレートやLorem Ipsumの固まったテキスト、プレイスフォルダーイメージなどを挿入できるスニペット。

Prefixr

CSSのベンダープリフィックスを付ける。

Quick Look(OS Xのみ)

OS Xのクイックルックを使って、ファイルをプレビュー。HTMLはブラウザで表示した状態(外部Webフォントはロードされない)、画像のプレビューもオッケー。

Ruby Slim

Slimのシンタックスハイライト。パッケージオフィシャルなし。

Sass

Sass/SCSSのシンタックスハイライトと入力補完。

SASS build

Sassのビルドシステム。あらかじめSassのインストールが必要。

SCSS

SCSSのシンタックスハイライトやスニペット、コマンドを追加する。次の「SCSS Snippets」とスニペットが重複する。

SCSS Snippets

SCSSのスニペット集。「+」でinclude、「++」でextendとか。

Search Stack Overflow

選択した単語からStack Overflowで検索。似たようなのにWordPressのCodexを検索するものもある。

Sublime SFTP

有償だが、Sublime Text 2から直接SFTPを可能にする。ファイルの同期とかも。

Sublime-KnockoutJS-Snippets

KnockoutJS」のスニペット。

SublimeOnSaveBuild

各種ファイルにあわせて保存と同時に登録済みのビルドシステムでビルドする。初期設定は「CSS/JS/Sass/SCSS/LESS」。

SideBarEnhancements

あるとないとでは大違いのサイドバー拡張なパッケージ。

SideBarGit

パッケージ「Git」があればいらないけど、サイドバーとかコンテキストメニューからGitを操作。

Strapdown.js Preview

Markdownの書類をTwitter Bootstrapのテーマでプレビュー。ST2内でプレビューも可。

StringEncode

文字列のエンコード・デコードをおこなうパッケージ。

Stylus Package for Sublime Editor 2

Stylusのビルドシステムとシンタックスハイライト。

Sublime PHP Builtin Web Server

PHP 5.4.xから入っているサーバを有効にする。サーバの操作はコマンドパレットから。

SublimeCodeIntel

元々ある程度補完するST2をさらに強力に自動補完。言語別にオンオフもできる。

SublimeSuperSelect

Cmd+Dを拡張する。任意の単語を順番に、スキップしながら、反転するなど。使い方は公式サイトを参照。

Sublime Finder

開いてるプロジェクトのルートディレクトリをFinderで開く。「Reveal Finder」みたいなもん。

Sublime-HTMLPrettify

HTML、CSS、JavaScriptをPrettifyしてくれる(キレイに成型してくれる)。要、Node.js。

Sublime Server

簡易的なHTTPサーバを裏で起動するパッケージ。初期設定のポートは「8080」。自動起動も可能。

Sublime Surround

任意のカーソルの位置、選択状態のテキストから周辺にある特定の文字を置き換えたり消したり。

Sublime Terminal

開いているフォルダのルートディレクトリをターミナルで開いてくれる。

Twitter Recess

LESSのファイルを「Recess」を使ってチェック、コンパイルする。

WordCount

文書中の文字数をカウント。日本語も大丈夫。原稿などを書く人にも。

WordHighlight

選択したテキストをハイライトする。

Wordpress

いわずもがなWordPressのシンタックスハイライトやスニペット。

YUI Compressor

YUI CompressorでCSSやJSを圧縮。OS XやLinuxならファイルを開いてF7、Cmd+Bで。

ZenCoding

HTMLやCSSのスニペット集であるZen-CodingのSublime Text 2版。

Zen Gardern

CDN経由のjQueryやOGPなどのコードスニペット。Zen-Codingがあっても問題なし。

@tatsuro-ueda
Copy link

GJ!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment