{ "componentChunkName": "component---src-templates-blog-post-jsx", "path": "/post/11-apps-improve-your-development-in-sublimetext2/", "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"3b403f0d-062c-5f5c-bc72-7cb64ab6beff","excerpt":"こんにちは。 湿度で髪が跳ねまくっています。れこです。 今日は、何を思ったのか、 Sublime Text2でインストール可能なパッケージを全部見てみよう と思ってa~z…","html":"

こんにちは。
\n湿度で髪が跳ねまくっています。れこです。

\n

今日は、何を思ったのか、
\nSublime Text2でインストール可能なパッケージを全部見てみよう
\nと思ってa~zまで全部のパッケージを見てみました。

\n

その中で、
\nパッケージ名から「おっ」と思ったライブラリをインストールして、
\n独断と偏見で使えると思ったパッケージだけご紹介致します。

\n\n

あまりに有名なEmmetやPackage Controlなどは除外して、
\nマイナー路線を集めたつもりですが、

\n

全然マイナーじゃなかったらすみません。 では行きます。

\n

Japanize

\n

まずは、パッケージと言って良いのか謎ですが、
\nSublime Textのメニューを日本語化するパッケージです。

\n

Sublime Textの日本語化に必要なファイルが揃っています。

\n

READMEから少し引用すると、

\n
\n

同梱されている_.jpファイルを、
\n_ C:Usersユーザー名AppDataRoamingSublime Text 2PackagesDefault*
\nにコピーし、オリジナルのファイル（.jpが付かないファイル）と置き換えると、より深く日本語化されます。

\n
\n

とあるように、パッケージをインストールしたら
\n自分でファイルを移動＋置き換えしないといけません。やや面倒。

\n

しかし、ちょっとした手間を払えば
\nメニューが全て日本語になるので恩恵はでかいかも。

\n

Browser Refresh

\n

Sublime Text上から、
\nキーボードショートカットでブラウザをリロードできるパッケージです。

\n

いちいちブラウザにウィンドウを切り替えてリロードしなくて良いのでとても楽です。

\n

ただし、このパッケージ、全く賢くありません。
\nSublime Text上で開いたファイルと紐付いているわけではなく、
\nただ単に、ブラウザで現在開かれているタブをリロードするだけです。

\n

ショートカットをCommand+sにすると、
\n保存時にブラウザもリロードという一見夢の機能が完成すると思われますが、

\n

前述のとおり
\n開いたファイルに紐付いているわけではないので、
\nどのファイルを保存しても、どのタブを開いていても、
\nブラウザにリロードがかかって非常にうるさいです。

\n

保存とは別のショートカットを設定することをおすすめします。

\n

SFTP

\n

その名の通りSFTP対応FTPクライアントです。
\nコマンドパレットからリモートサーバーのファイルを見て操作できます。

\n

リモートサーバを登録するには、パッケージをインストールして、
\nBrowse Server -> Add New Serverから設定を記入します。

\n

僕は

\n
type: \"ftp\", \"sftp\", \"ftps\"\nsync_down_on_open: true / false 自動更新？\nhost: 自分のサーバのホスト\nuser: ftpユーザ名\npassword: ftpパスワード\nport: ポート番号\nremote_path: ftpのルートにするディレクトリパス\nfile_permissions: 作成するファイルのパーミッション\ndir_permissions: 作成するディレクトリのパーミッション\nssh_key_file: ローカルにある公開鍵までのパス
\n

あたりを設定しました。

\n

設定ファイルを保存したら、再びBrowse Serverを選択すると、
\n今登録したサーバ情報が一覧に増えていると思います。

\n

Enterを押してサーバに接続すると、
\nディレクトリとファイルの一覧が表示されます。

\n

ファイルのリネームやパーミッションの変更、内容の編集などが可能です。

\n

編集したいファイルを選択してEditを押すと、
\nサーバにあるファイルがSublime Textの新しいタブとして開かれます。

\n

必要な編集をして保存をすると、自動でアップロートをしてくれます。
\nちょろっとリモートのファイルに修正を入れるときにすごく便利そうです。

\n

JSLint

\n

Ctrl + LでJSLintがかけられます。
\nJSLintについてはこちら。

\n
\n

JavaScriptで書いたプログラムの構文チェックツール「JSLint」 – 強火で進め

\n
\n

デフォルトの設定だと他にも、
\ncss, html, json, sass, lessに対応しています。
\n恥ずかしくないコードを書くなら欲しい一品。

\n

ただし、該当ファイルは保存時にも勝手にLintされてしまうので、
\n内容によっては保存するたびに１秒ほど固まります。

\n

地味にストレスが溜まりそうです。
\n動作速度が気になったら停止します。

\n

YUI Compressor

\n

jsやcssを圧縮できる、YUI Compressorを
\nSublime Text上で完結させられるパッケージです！

\n

README(英語)を見てみると、

\n
\n

jsかcssファイルを開いて、
\nF7かCommand + bを押すと、ファイルが有るディレクトリに、
\nファイル名.min.css(js)ってファイルが生成されるよ

\n
\n

と書いてあるので、jsファイルを開いてこんな感じのjsを記述。

\n
(function(glocal, $) { var hoge = \"aaa\"; alert(hoge); }(this, jQuery));
\n

F7キーを押してみると、コンソールが表示され[Finished.]と出力されました。
\n生成されたmin.jsを見てみるとこんな感じに。

\n
(function(a,b){var c=\"aaa\";alert(c);}(this,jQuery));
\n

便利！ ( ´◔‿ゝ◔`)
\nキーボード一発で簡単にminifyできるので重宝しそうです。

\n

cdnjs

\n

様々な有名jsライブラリを公開しているCDNサービスから、
\n使いたいライブラリを選択してscriptタグとして挿入できるパッケージ

\n

バージョンやminifyして読み込むか否かなどが細かく指定できるので、
\n「あのライブラリ使いたいな」と思った時にサクッと挿入できます。

\n

jQueryやeasing、jQuery UIなどjQuery系を始め、
\nBootstrap系のライブラリやBackboneなど大御所を抑えつつも、
\nbonsai.jsやEasel.jsなど色々なライブラリも充実しています。

\n

さらに、cssもあります！ mayer-reset.cssや、normarize.cssなど、
\nだいたいのニーズは満たしていると思います。

\n

提供されているファイルが一覧できるweb版はこちらから。

\n
\n

cdnjs – the missing cdn

\n
\n

JavaScript and jQuery API Completions

\n

jQueryの補完が強くなります。
\n補完するjQueryのバージョンは1.9のようです。

\n

このパッケージはインストールしただけでは動きません。
\nパッケージではなくSublimeのユーザ設定のauto_complete_triggersを、

\n
\"auto_complete_triggers\":\n[\n    {\n        \"characters\": \"<>\"'-_qazwsxedcrfvtgbyhnujmikolpQAZWSXEDCRFVTGBYHNUJMIKOLP\",\n        \"selector\": \"text, source, meta, string, punctuation, constant\"\n    }\n],
\n

と書き換えることで、
\nいい感じに補完ウィンドウが出てくれるようになるようです。

\n

Auto Encoding for Ruby

\n

現在編集しているRubyファイルに、
\n非ascii文字(日本語とか)の文字が含まれたら、
\nファイルの先頭に自動的に#encoding: utf-8を挿入してくれます。

\n

ただし、デフォルト設定だと
\n日本語を打った瞬間に挿入が起こって、２段ガクっと下がったり、
\nファイルから日本語を消した時は削除された２段がくっと上がったり
\n使い心地は最悪です。

\n

パッケージの設定ファイルの
\nremove_encoding_declaration(不必要ならencodingコメントを消す)と、
\ncheck_encoding_on_keystroke(キーボードが打たれる度に判定)をfalseにすると、

\n

ファイルが保存された時に非ascii文字が含まれていたら、
\nencodingコメントを追加する（すでに指定が入っている場合は挿入しない）
\nという動作にできます！ 地味に便利！

\n

Image2Base64

\n

このパッケージをインストールすると、
\n画像ファイルをSublime Textにドロップした時に
\n自動的にbase64エンコードした文字列に変換してくれるようになります。

\n

Emmetにも画像をbase64エンコードする機能(画像のパスが通っている場合に限り)
\nがあるので、お好みでどうぞ。

\n

画像をbase64化しておくと、
\nリクエスト減ってパフォーマンス上がるんですかね、、？

\n

今度調べて記事書きます。

\n

sublimerge

\n

２つのファイルを比較して差分を表示して、簡単にマージできます。

\n

２つ以上のファイルを同じプロジェクトで開き、
\nコマンドパレットにview diffと入力すると、
\n現在開いているファイルと、どのファイルのdiffを取るか聞かれるので選択。

\n

すると、こんな画面になります（画像は適当な２ファイルを選びました）

\n

\n \n \n \n \n \n \n \n \n

\n

Ctrl + Alt + ,で左のファイルの差分を右のファイルに、
\nCtrl + Alt + .で右のファイルの差分を左にファイルにマージします。

\n

その箇所をマージすると、
\n次の差分へ勝手にスクロールしてくれるので、サクサクとマージできます。

\n

Aizu Online Judge

\n

最後に競技プログラミング用。

\n

Sublime textで書いているコードを、Aizu Online Judgeにsubmitできます。

\n

ユーザ情報を書かないままsubmitしようとすると、
\n送信できないよと怒られます。設定しましょう。

\n

ユーザ設定はパッケージのREADMEを見て
\nユーザ情報を表したJSONを自分でコピー&ペーストしなきゃいけないのでやや不親切。

\n

パッケージのユーザ設定に以下の内容を追加します。

\n
{\n    \"user_name\": \"aojのユーザID\",\n    \"password\": \"aojのパスワード\"\n}
\n

すでにACを取ってあるファイルで送信テスト。

\n

\n \n \n \n \n \n \n \n \n

\n

AC取れました。submit結果はアラートで表示されます。

\n

submitする際に、問題の番号を選べますが、
\nsubmitするアカウントは選べないようです。
\nレートやAC率を気にする人は不便かも。

\n

まとめ

\n

ということでSublime Text2のパッケージ11個、どばっと書いてみました。
\n何か目新しいパッケージは有りましたか？

\n

Sublime Textのパッケージを触っていて思ったのは、
\n設定をいじることで化けるパッケージが、けっこう有ります。

\n

なので、気になったパッケージをインストールして、
\n「使いにくいな〜これ」と思っても、とりあえず諦めないで下さい。

\n

パッケージの設定ファイルを見てみると、
\nもしかしたら自分好みの動作に変えられる設定が見つかるかもしれません。

\n

長々と読んで頂き、ありがとうございました。

","timeToRead":9,"frontmatter":{"title":"Sublime Text2の作業効率を加速させるパッケージ11個","tags":["AOJ","JavaScript","Ruby","Sublime Text2"],"date":"July 06, 2013","featuredImage":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='143'%20viewBox='0%200%20400%20143'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%2072v71h401V0H0v72m40-51l-2%203-2%203c-4%203-3%201-8%2045-4%2043-4%2045-1%2048%202%202%203%202%2057%202h54l3-2c2-3%202-1%200-25l-4-41c-2-22-3-27-6-27l-1-1-2-4c-3-2-3-2-45-2l-43%201m-5%2033a1738%201738%200%2001-3%2043c3%202%2011%202%2055%202a599%20599%200%2001-52%205c1%202%201%202-1%202l-2-1v-1c-2-2-1%204%202%206%204%203%2097%203%20100-1%202-1%202-2%201-7l-1-3h-4l2-1%201-1%201-1a81004%2081004%200%2001-3-44c0%206%200%206-1%204l-2-1c0%202-1%202-11%202s-14%201-11%202c2%201%203%207%203%2012-1%206-8%2013-12%2014l-2%201-5%202c-7%201-17%200-24-3-6-2-11-10-9-11l2-4%201-3%202-2%201-1c1%200%202-1%202-3%200-1%200-2-1-1l-1%201-1-1c1-3-2-3-14-3-11%200-11%200-12-7-1-5-1-5-1%204'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.783333333333333,"src":"/static/57c7f1ddd3214923f8805b085886ae9d/f32f2/featured-image.jpg","srcSet":"/static/57c7f1ddd3214923f8805b085886ae9d/466a3/featured-image.jpg 334w,\n/static/57c7f1ddd3214923f8805b085886ae9d/f32f2/featured-image.jpg 569w","srcWebp":"/static/57c7f1ddd3214923f8805b085886ae9d/3d427/featured-image.webp","srcSetWebp":"/static/57c7f1ddd3214923f8805b085886ae9d/cd98f/featured-image.webp 334w,\n/static/57c7f1ddd3214923f8805b085886ae9d/3d427/featured-image.webp 569w","sizes":"(max-width: 569px) 100vw, 569px"}}}}}},"pageContext":{"slug":"/11-apps-improve-your-development-in-sublimetext2/","previous":{"fields":{"slug":"/wrote-jquery-plugin-of-drag-and-drop/"},"frontmatter":{"title":"webページにローカルファイルをドロップ可能にするjQueryプラグインを作ってみた","tags":["HTML5 Drag and Drop API","JavaScript"]}},"next":{"fields":{"slug":"/wrote-workflow-of-hatena-bookmark/"},"frontmatter":{"title":"自分のはてブを検索できるAlfred Workflowを作った","tags":["Alfred Workflows","PHP","はてなブックマーク"]}}}}, "staticQueryHashes": ["2585454260","2954598359"]}