[Tool] HTML,CSS,JSの開発でSublimeText2というエディタがすごくいい感じ。機能紹介や導入方法。
こんにちは、@yoheiMuneです。
HTML,CSS,JSの開発を毎日行っていますが、最近はSublime Text2というエディタにハマってます。
8月から使い始めてだいぶ使い慣れてきたので、紹介したくブログを書きます。
評価版は無料で、使い続ける為には購入する必要があります（現在は、評価期限が設定されていないですが）。 執筆時は$59。ちょっと高いけど会社費用精算できるヒトとか良いかも。
個人的に気に入っているポイントは、以下のようなところです(*´∇｀*)
少し前まではJavaで開発していたのでEclipseで決まりでしょと思ってましたが、 HTML,CSS,JSの良いエディタが無いなぁと感じてました。
DreamWeaverは重たいし、他のエディタはHTML5やScssに対応していないもの多いし。。
Sublime Text2は、高機能で使う言語は全部サポートされてて、軽量という点にスゴく惹かれてます。
http://www.sublimetext.com
その中で、以下の項目を自分の好みに設定すると良いかも。
「View -> Show Console」を選択するとConsoleが出現します。
そのConsoleに以下の内容をコピペして実行すると、Package Controlが導入できます。
以下ではサンプルとして、Zen-Codingのパッケージをインストールする手順を記載します。
他にも様々な便利なパッケージがあります。以下で、一例を紹介させて頂きます。
Sublime Text2はショートカットも大変便利なので、今後それ関連のブログも書けたらと思います。
最後までご覧頂きましてありがとうございました。
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のパッケージをインストールする手順を記載します。
- Command + Shift + P（または、Tools ->Command Palette）」でCommand Paletteというコマンドを実行するものを開きます。
- 「Package Control:Install Package」と入力してエンターを押すと、インストール可能なパッケージを探すことが出来ます。
- 「ZenCoding」と入力するとインストール可能リストでZenCodingが見つかると思うので、エンターを押す。
他にも様々な便利なパッケージがあります。以下で、一例を紹介させて頂きます。
- jQuery : jQueryの補完機能を追加
- Bracket Highlighter : 開始タグと終了タグをハイライト。長いコードとかに役立つかも。
- SublimeLinter : Lint(静的コードチェック)を行うことができる。やり過ぎはうざいけど、警告をすぐに貰えるので、エラーの早期発見ができる。
最後に
良い開発ツールは、お金を払ってでも買う価値があるなぁと感じる今日この頃です。Sublime Text2はショートカットも大変便利なので、今後それ関連のブログも書けたらと思います。
最後までご覧頂きましてありがとうございました。
