2012/10/23更新

[Tool] HTML,CSS,JSの開発でSublimeText2というエディタがすごくいい感じ。機能紹介や導入方法。

このエントリーをはてなブックマークに追加            

こんにちは、@yoheiMuneです。
HTML,CSS,JSの開発を毎日行っていますが、最近はSublime Text2というエディタにハマってます。
8月から使い始めてだいぶ使い慣れてきたので、紹介したくブログを書きます。

画像



Sublime Text2とは

Sublime Text2は、 HTML,CSS,JavaScriptなどの開発で利用できるエディタで(PHPとかもいけます)、 軽量でたくさんの機能を持ち合わせている高機能エディタです。

評価版は無料で、使い続ける為には購入する必要があります(現在は、評価期限が設定されていないですが)。 執筆時は$59。ちょっと高いけど会社費用精算できるヒトとか良いかも。

個人的に気に入っているポイントは、以下のようなところです(*´∇`*)
  • 起動や動作中がスゴく軽くて、サクサク動く。
  • HTML, JS, CSS, Scss, ,PHPなど開発で使う言語やツールが使える。
  • Pluginなどで、Zen-coding, Lint, コード保管など便利機能を追加できる。
  • 検索系、編集系などのショートカットキーがたくさんある。

少し前まではJavaで開発していたのでEclipseで決まりでしょと思ってましたが、 HTML,CSS,JSの良いエディタが無いなぁと感じてました。
DreamWeaverは重たいし、他のエディタはHTML5やScssに対応していないもの多いし。。
Sublime Text2は、高機能で使う言語は全部サポートされてて、軽量という点にスゴく惹かれてます。



Sublime Text2の導入方法

導入は簡単で、以下のサイトに訪れて、インストーラーをダウンロードして実行すれば導入できます。
http://www.sublimetext.com



Sublime Text2で最初に設定すると良いポイント

以下では、Sublime Text2を導入したら最初にやると良いなぁと思う事(個人的に良いなぁと思う点)を紹介させて頂きます。

タブのスペース数やフォントサイズなど

アプリを立ち上げて、「SublimeText2 -> Preference -> Settings Default」を選ぶと、 Sublime Text2の色々な初期設定が表示されます。
その中で、以下の項目を自分の好みに設定すると良いかも。
  • tab_size : タブをスペースいくつ分にするか?
  • font_size : フォントサイズ
他の設定項目も、コメントで内容を書いてあるので、自分のお気に入りの設定にすることが出来ます。


Package Controlを導入する

拡張機能はPackageという形で提供されており、 Package Controlを入れることで拡張機能のインストール、アンインストール、有効化、無効化などを管理できるようになります。
「View -> Show Console」を選択するとConsoleが出現します。
そのConsoleに以下の内容をコピペして実行すると、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())
上記コマンドを実行後に再起動すると、Package Controlを使えるようになります。


Packageを入れてみる

便利なパッケージがたくさん公開されているので、使いたいパッケージをインストールする事で、より生産性の高いツールになります。
以下ではサンプルとして、Zen-Codingのパッケージをインストールする手順を記載します。

  1. Command + Shift + P(または、Tools ->Command Palette)」でCommand Paletteというコマンドを実行するものを開きます。
  2. 「Package Control:Install Package」と入力してエンターを押すと、インストール可能なパッケージを探すことが出来ます。
  3. 「ZenCoding」と入力するとインストール可能リストでZenCodingが見つかると思うので、エンターを押す。
これでZencodingが導入できます。


他にも様々な便利なパッケージがあります。以下で、一例を紹介させて頂きます。
  • jQuery : jQueryの補完機能を追加
  • Bracket Highlighter : 開始タグと終了タグをハイライト。長いコードとかに役立つかも。
  • SublimeLinter : Lint(静的コードチェック)を行うことができる。やり過ぎはうざいけど、警告をすぐに貰えるので、エラーの早期発見ができる。



最後に

良い開発ツールは、お金を払ってでも買う価値があるなぁと感じる今日この頃です。
Sublime Text2はショートカットも大変便利なので、今後それ関連のブログも書けたらと思います。

最後までご覧頂きましてありがとうございました。





こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。