フロントエンド向けのSublime Text 2の準備

経験豊富なプログラマーやレイアウトデザイナーにとって、カスタマイズされた開発環境（IDEの意味ではなく、より一般的な方法）が不可欠であることは秘密ではありません。 単一のモニターでほとんど裸のメモ帳++で次のレイアウトを作成し、Photoshop、ブラウザー、エディターを交互に開いていた時代がありました。 今日、「すべての自動化」の時代に、そのように機能することがどのように可能であったかを想像するのは困難です。



Sublime Text 2は、多くのプラグインが書かれている人気のある拡張可能なクロスプラットフォームテキストエディターです。 この投稿では、このコンストラクターからHTML、CSS、およびJavaScriptを操作するための便利なフロントエンド開発者ツールを構築する方法を説明します。 小さな免責事項：私はMac OS Xで作業しているため、「クロスプラットフォームの瞬間」に何かを終わらせないかもしれませんが、完全な情報を提供するよう努めます。 そしてもう1つ、私は究極の真実を装うのではなく、あなたの選択肢を待ちます。







どこで何が議論されるかをよりよく理解するために、まず記事の構造を紹介します。

はじめに

主なポイントの説明、必要なリンクなど。

プラグイン

• 主なプラグイン -このセクションでは、ほとんどの場合にインストールする必要があるもの、一般に必要なものについて説明します。
• 追加のプラグインは便利な拡張機能です。 ここでは、私が気に入ったものを紹介しますが、このリストはそれぞれのタスクと好みに特化できるので、類似物を見て、新しいものを探して、一般的にカスタマイズします。

ライブリロードとCSSプリプロセッサのサポート

1つのセクションに2つのそのような異なるものを組み合わせたのはなぜですか？ すべては、いくつかのソフトウェアの仕様のためです。これについては後で説明します。 ライブリロード（またはライブプレビュー）、突然誰かが知らない場合、これはブラウザーで、エディターで行ったことを、ページを更新する必要なく、つまり自動的に表示しています。 CSSプリプロセッサのサポートとは、SASS / SCSS、LESS、スタイラスなど、Sublime Text 2で使用したいものを追加すること、およびこれらすべての自動コンパイル（ビルド/ウォッチシステム）を編成することを意味します。 実際、上記の理由だけでなく、私の（私もあなたの考えでもある）目標が、たとえばscss-で何かを変更できるようにすることであったため、これはすべて1つのセクションにまとめられています。ファイルを保存し、すぐにブラウザで結果を確認します。つまり、ページのコンパイルと更新のプロセスを自動化します。 したがって、「ファイルの保存」>「コンパイル」>「更新」というチェーンがあります。これにより、このすべてが論理的に記事の1つのセクションにまとめられます。

はじめに

プラグインを快適にインストール、削除、更新するために、 Sublime Package Controlが使用されます 。そのインストールは非常に簡単で、 このページで説明されています 。 必要なプラグインのほとんどすべてがパッケージコントロールにあるため、 ここで探すのが便利です 。 特別な理由がない限り、このプラグインを無視して手動でインストールすることはお勧めしません。 Package ControlはSublime Text 2の事実上の標準になったと言えます。



送信されたすべてのプラグインはGitHubでホストされ、ほとんどすべてのプラグインは読みやすいreadmeを持っています。 すべての微妙な点を説明するのは意味がありません。すべてが変わるため、この記事では簡単な説明を行い、著者自身がプラグインの詳細を完全に説明します。

プラグイン

主なプラグイン

Zencode

ZenCodingはコメントをほとんど必要としませんか？ 2008年にpepelsbeyによって開始されたこの「コーディングアクセラレータ」は、ひどい開発時間を節約しました。 それ以来、多くのエディターとIDEのプラグインとして実装されています。



少し前まで、ZenCodingプラグインには相続人Emmetがあります。 コメントで示唆されているように 、それは既にそれを使用するのに十分安定しています。



Sublimelinter

このプラグインは、HTML、CSS、およびJavaScriptを含む多くの言語のlintサポートを追加します。 パフォーマンスを向上させるには、 node.jsをインストールし、GitHubのreadmeで詳細を読んでください。 一般的に、これはreadmeを完全に読むほうがよいプラグインの1つです。



SublimeCodeIntel

Sublime Text 2の機能をIDEの機能にもたらし、「コードインテリジェンス」と「スマートオートコンプリート」を追加します。特に、宣言にすばやくジャンプする機能、import'ovのオートコンプリート、ステータスバーに関数に関する情報を表示する機能を追加します。



アライメント

Sublime Package Controlによるこのプラグインにより、複数行と複数の選択されたコードセクションを簡単に配置できます。



CSSComb

CSSCombについては、オタク誌で詳細を読むことができます この便利なツールは、指定された順序でプロパティを配置し、グループに分割することでCSSを刷新します。



HTML5とjQuery

これらはHTML5タグスニペットとjQueryメソッドのセットであり、その完全なリストは[ツール]> [スニペット]にあります。



Jsformat

jsbeautifier.orgサービスを使用し、かなり柔軟な設定を持つ、JS / JSONコードをフォーマットするためのプラグイン。 コードの選択されたセクションまたは選択されていない場合はファイル全体をフォーマットします。 ファイルに* .js拡張子が付いているかどうかはチェックしないため、注意して使用してください。



ミニファイアー

Minifierは、JavaScript（ Google Closure CompilerまたはUglifyJS ）およびCSS（ Reducisaurus ）を縮小できます。 プラグイン全体は2つのキーの組み合わせで構成され、1つは現在のファイルに結果を保存し、2つ目はname.min.extという名前の別の組み合わせに保存します。



プレフィックス

プリプロセッサを使用しないユーザーには明確な要件が必要であり、他のすべてのユーザーも役に立ちます。 必要に応じて、 prefixr.comサービスにベンダープレフィックスを追加します（正しい順序でも）。 簡単に機能します。プレフィックスなしでプロパティを記述し、キーの組み合わせを押すと完了です。



SideBarEnhancement

名前が示すように、サイドバーにいくつかの便利な改善が追加されます。たとえば、サイドバーのコンテキストメニュー項目「...で開く」を使用すると、サードパーティプログラムでファイルを開くことができます。

追加のプラグイン

クリップボード履歴

おそらく、この機能はOS全体に搭載したほうが良いかもしれませんが、エディターには十分な機能があります。 プラグインはクリップボードの履歴を記憶するため、最後にコピーしたフラグメントだけでなく、以前のフラグメントも貼り付けることができます。



エンコーディングヘルプ

とりわけ、開いているファイルのエンコードをステータスバーに表示します。 一般に、これがこのプラグインをインストールした唯一の理由ですが、他の機能もあります。たとえば、間違ったエンコーディングで開かれたファイルが破損する可能性があることを警告できます。



プレースホルダー

コードに魚を埋め込む必要がありますか？ lorem ipsumを愛するすべての人にとって、このスニペットセットは間違いなく便利です。 単純なテキストに加えて、段落、リスト、画像などを挿入できます。



テーマ-ソーダ

これは、Mac OS Xの所有者に対する私の主観的な推奨事項ですSodaテーマは、ネイティブのSublime Text 2インターフェイスを描画します。 Retinaディスプレイのサポートだけでなく、ライトとダークの2つのカラーバリエーションがあります。 ただし、テーマは3つのOSで使用できます。

ライブリロードとCSSプリプロセッサのサポート

ここのすべてはかなり曖昧です。 一方では、プラグインを使用したライブリロードと監視/ビルドシステムのサポートがあり（最初のものは私にとっては機能しませんでした）、ライブリロードに加えて、さまざまなプリプロセッサのファイルを追跡およびコンパイルできるいくつかの別個のプログラムがあります。 同時に、それらの機能は（GUIによって提供される機能に関して）完全に異なり、さらにはコストも異なります。 誰かが画像の最適化まですべてを行うことができますが、誰かは半分ではなく無料です。 一般的に、すべては自分自身にとって最適なオプションを選択することに帰着します。それを以下でお手伝いします。

構文サポート

手始めに、複雑さを忘れて、必要なプリプロセッサの構文強調表示を行いましょう。 それぞれに独自のプラグインがありますので、必要なものを選択するだけです： LESS 、 SASSおよびSCSS 、 Stylus （ビルドシステムも含まれます）。

プラグイン

サードパーティのプログラムを使用したくないが、Sublime Text 2のみで管理したい場合に役立つプラグインについて説明します。

自動コンパイル

エディタに特定のビルドシステムを直接追加するのではなく、 SublimeOnSaveBuildプラグインを使用することをお勧めします。 彼がしているのは、ファイルを保存するときに選択したビルドシステムのビルド（メニューでは、これは[ツール]> [ビルド]）を自動的に開始することです。



ビルドシステムの追加に関しては、ここでのすべてが構文サポートに似ています。必要なものを選択してください： LESS-build 、 SASS Build （そしてもちろん、 Compass ）。

ライブリロード

これにより、Sublime Text 2のプラグインに関してはそれほどバラ色ではなく、正確にはLiveReloadが1つしかありません（以下のプログラムと混同しないでください）。 より正確には、Chromeの拡張機能は機能しません（Safariの拡張機能はテストされていませんが、他のブラウザーはサポートされていません）。一般に、長い間更新されていません。 おそらく誰かがそれを調理する方法を知っていて、コメントであなたに伝えるでしょうが、個人的に私は詳細を理解するのが面倒だったので、ライブ表示と編集のために別のプログラムを使用するようになりました。

個別のプログラム

そのため、これらのプログラムはSublime Text 2とは関係ありませんが、すべてがプラグインの助けを借りて実装されているわけではないため、多くの機能では一部の機能に別のソフトウェアを使用することを好みます。

LiveReload

特徴

LiveReloadは、まず名前が示すように、ファイルの変更を監視してブラウザーで更新できます。次に、すべてが自動的にコンパイルされない場合は、多くの場合：LESS、SASS、Compass、Stylus、CoffeeScript、IcedCoffeeScript、Eco 、スリム、HAML、ジェイド。 ライブリロード自体については、ブラウザに添付の拡張機能をインストールする必要があります。Safari、Chrome、Firefoxのバージョンがあります。



クロスプラットフォーム

一般に、プログラムはMac OS X用です。Windows用のバージョンがありますが、今日ではプレアルファ版です。 Linuxの場合、 guard-livereloadを使用することをお勧めします。



価格

Mac OS Xバージョンの価格はApp Storeで9.99ドルで、無料試用版もあります。 LinuxおよびWindowsのバージョンは無料です。

CodeKit

特徴

このプログラムは、最も幅広い可能性を提供し、一般に、最も便利で機能的なGUIを提供します。 ブラウザの拡張機能なしでライブリロードが可能で、Less、Sass、Stylus、Jade、Haml、Slim、CoffeeScript、Javascript、およびCompassを自動的にコンパイルできます。 スクリプトの結合と縮小、画像の最適化など。



クロスプラットフォーム

彼女はそうではなく、プログラムはMac OS X専用です。



価格

25ドル。 無料試用版があります。

スカウト

特徴

他のプログラムとは異なり、ScoutはSASSとCompassのみをコンパイルできますが、そのGUIでは出力モードを指定でき、無料です。



クロスプラットフォーム

WindowsとMac OS Xのバージョンがありますが、今回はWindowsのバージョンがいっぱいです。 Linuxの場合、残念ながらバージョンはありません。



価格

無料で。



CodeKitがより機能的であるという事実にもかかわらず、個人的にはLiveReloadを選択しました。 この機能をSublime Text 2プラグインに部分的に置き換え（結局、この記事はSublimeについてです）、残りは必要ありません（Webサービスがあるか、使用しません）。



多くの人が「Sublime Text 2に基づくフロントエンド開発環境」の他のオプションについて学ぶことに興味があると思うので、コメントで選択したプラグインを共有することをお勧めします。



UPD。 SublimeText 2自体のプラグインを使用してライブ編集を整理することもできます。LiveReloadプログラムのブラウザー拡張機能とともに、投稿で説明されているプラ​​グインを使用してください 。 プラグインの開発バージョンがより良く機能するという証拠もあります。 したがって、追加ソフトウェアのインストール、つまりプラグインのみを非常に完全に省くことができます。



コメントは、私がVCSとSFTPプラグインについて書いていないことを述べました。 事実は、これはすべての人のためではなく、別のもの（Gitの人、SVNの人、何の必要もない人）のいずれでもないということです。 さて、すべてのプラグインはテクノロジー自体に基づいて命名されているため、必要に応じてプラグインを見つけることは難しくありません。



そして最後に、コメントで推奨されたプラグインのリスト（そしてもちろん、これを行ったユーザーのニックネーム）：

• ベクティミロフ ： LiveCSS 。 CSSで指定された色の視覚表示を追加します。
• Cyber​​AP ： SublimeFileDiffs 。 ファイル比較関数を追加します。
• roman01la ： YUI-Compressor 。 Yahoo!の同名のツールを使用する別のJSおよびCSSミニフィケーションプラグイン。
• JCHouse ： SublimeTODO 。 コメント内のメモを使用すると便利です。