【便利ツール】CSScomb for sublime text 2で、CSSプロパティを整理・整頓【16日目】

アドベントカレンダー2012

#CSS

#HTML5

#RIA

#Sublime Text

清田隆志

2012.12.16

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

今回は業務でもかなり重宝するCSScombをご紹介します。

アジェンダ

CSScombとは？
まずは使用してみる
プラグインとして使ってみる

CSScombとは？

CSSのプロパティをソートしてくれる便利ツールです。またソートするプロパティの順番も自分でカスタマイズ可能！ものぐさな自分にとって痒いところに手が届くマストなツールです。

公式ページはhttp://csscomb.com/になります。

まずは使用してみる

公式ページ行くとこんな感じです。

早速ソートしてみたいと思います、まず「Online sorting」へ移動します。

次にソートしたいコードを、枠内にペース or 記載し、「RESORT」をクリック。

ソート結果を表示してくれます。また「Copy result code」からソート結果をコピーすることも可能です。

また、「Settings」からプロパティの順番もカスタマイズ可能です。

「Sort order settings」内のプロパティの順番を変更することにより、プロパティーの順番カスタマイズできます。

プラグインとして使ってみる

いろいろなツールのプラグインとしても使えるみたいです。オフィシャルサイトにプラグインとして使用できる一覧がこちらです。

プラグイン一覧
CSScomb Online
CSScomb for Sublime Text 2 (Also in Package Control)
CSScomb for Textmate
CSScomb for Coda & Coda 2
CSScomb for Espresso 2
CSScomb for IntelliJIDEA/WebStorm/PyCharm
CSScomb for Notepad++
CSScomb for Vim

Sublime text 2で使ってみる

最近、注目されているSublime text 2にお世話になっているので、今回はSublime text 2の手順で作業してみようと思います。

それでは早速CSScombのプラグイン（パッケージ）をインストールしてみましょう。

Sublime text 2の詳しい説明は下記をご参照ください。【追記】【寄せあつめ】今さらだけどSublime Text 2の基本とカスタマイズ【&Vim化】【4日目】

CSScombプラグインのインストール

Sublime Text 2を立ち上げたら、プラグインをインストールするべく、お約束のコマンドパレットを開きますショートカットは「Ctrl+Shift+p」です。

次に、「Pakege Control: Install Pakage」を実行し、インスールしたいプラグインを探します。

CSScombと入力すると該当するプラグインが出てくるので、選択してインストールします。

Sublime text 2での動作確認

インスールができたら、適当にCSSを書き、プロパティを選択してます。

選択後、ソートするショートカット「Ctrl+Shift+c」を実行します。

なぜか、エラーが出現...

ショートカットを実行するとなぜか以下のエラーが吐き出されました

Sorter Error: attempt to sort non-existent file

いろいろ探ってみると、製作者の方のコメントを発見！！Requirements(必要条件)と書かれており、 Windowsの方は、何やらPHPのバージョン確認と、Windows 環境変数 Path の設定をしてくださいとのことでした。参照ページ : Requirements · miripiruni/CSScomb Wiki · GitHub