荘厳なテキスト プラグイン

サイトの開発を始めたら、メモ帳のようなシンプルな IDE でも、本格的な IDE でも、最初に使用するツールはテキスト エディタになります。

このエピソードでは、Addy と Matt が Sublime Text 用プラグインのコレクションを紹介し、それぞれのプラグインがワークフローにどのように役立つかを説明します。

パッケージ コントロール

エピソードで参照されているパッケージ（またはプラグイン）を取得するには、Package Control をインストールする必要があります。これはシンプルでインストールが簡単で、こちらの手順を参照してください。

JSHint

JSHint は JavaScript リンターで、JavaScript を調べて、コード内の潜在的なエラーや不正なプラクティスをハイライト表示します。

たとえば、次のように変数名を誤って入力した場合、JSHint は fo が定義されておらず、エラーの原因となることを指摘します。

var foo = { bar: 'Hello, World.' };
var msg = fo.bar;

JSHint プラグインは問題を指摘するため、関連するテキストを黄色のボックスで囲んで表示し、その部分のコードにカーソルを置くと、Sublime の左下にエラー メッセージが表示されます。

検出されるその他の問題は次のとおりです。

• 定義されているが使用されない変数
• ループ内での関数の作成を回避する
• 適切な比較方法を使用する

SublimeLinter-JSHint パッケージをインストールするには、SublimeLinter パッケージをインストールして、SublimeLinter-JSHint パッケージ ページの手順に沿ってインストールする必要があります。

デベロッパーによっては、JSHint Gutter プラグインを含めると便利な場合があります。JSHint の問題がある行のガターに、小さな点を配置します。

JSCS

JSCS では、JavaScript が特定のコーディング スタイルに従っていない場所がハイライト表示されます。

たとえば、JSCS を使用すると、「if」などのキーワードの後にスペースを使用するかどうかや、中かっこをメソッドの同じ行または改行のどちらに配置するかを定義できます。

SublimeLinter-JSCS パッケージは、JSHint と同様のスタイルで問題をインラインでハイライト表示するため、問題を簡単に修正できます。

全員が同じスタイルガイドに従い、コードの一貫性を保つことができるため、チームで作業を行う際は非常に便利です。

おすすめの方法は、JSCS-Formatter パッケージを使用すると、ctrl + shift + p を押し、「JSCS Formatter: Format this file」と入力して Enter キーを押すことにより、ページ上の問題を自動的に修正できる」です。詳しくは、Addy のブログ投稿をご覧ください。

カラー ハイライター

カラー ハイライターは、CSS や Sass の色定義の背景色を追加します。

カーソルを合わせたときに背景全体に下線を表示するか、定義の背景に常に色を表示するかを定義できます。[Package Settings] > [Color Highlighter] > [Settings - Default] に移動して、初期設定を表示し、[Settings] - [User] で設定を変更できます。

背景全体をハイライト表示するには、「Settings - User」ファイルに以下を追加します。

{
  "ha_style": "filled"
}

ガターの色

Gutter Color は、カラー ハイライトの代わりに、色変数の上に色を表示する代わりに、その行のガターに色を配置します。

カラー選択ツール

画面から色を選択するための簡単な方法が必要な場合は、カラー選択ツール パッケージが適しています。

ctrl + shift + c キーを押すと、カラー選択ツールが表示されます。

AutoFileName

AutoFileName は、入力時にファイルのリストを表示するシンプルなプラグインです。これは、画像名を入力しようとしたり、CSS ファイルまたは JS ファイルを追加したりする場合に非常に便利です。時間を節約でき、さらに重要な入力ミスのリスクを軽減できます。

自動プレフィックス

誰しも、接頭辞 CSS プロパティを追加するのを忘れていたことに気づきました。Autoprefixer を使えば、CSS でこれを実行するだけで、必要なすべての接頭辞が追加されます。

ここから先に進むということは..

.container-thingy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

..下記のクエリを作成するには、ctrl + shift + p キーを押し、「Autoprefix CSS」と入力して Enter キーを押します。

.container-thingy {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

パッケージ設定で、サポートするブラウザとブラウザのバージョンを定義することもできます。詳しくは、パッケージ管理のページをご覧ください。

その他...

Sublime Text 用のプラグインは他にも多数存在するため、パッケージ コントロールを確認するようにしてください。

その他のアドバイスやヒントについては、WesBos の Sublime Text 用キーボード ショートカットやその他のプラグインに関する優れたスライド資料をご覧ください。

また、WesBos の『Sublime Text for the Power User』という書籍も執筆されています。素晴らしい方の参考になれば幸いです。