Web 開発者向けの Sublime Text プラグイン_html/css_WEB-ITnose

Package Control

Sublime Text では、誰もがプラグインの管理とインストールに Package Control を使用するため、最初にインストールするプラグインになります。インストール方法については、こちらを参照してください。ここでは、Package Control の使用方法については詳しく説明しません。

JSHint

Linter は、コードの問題をチェックし、潜在的なエラーや悪いコーディング習慣を見つけるのに役立つツールの一種です。 JSHint は JavaScript コードを検査するための優れたツールであり、多くのエディターや IDE をサポートしています。

Sublime で JSHint を使用するには、SublimeLinter-JSHint プラグインをインストールします。このプラグインをインストールする前に、SublimeLinter と jshint コマンド自体をインストールする必要があることに注意してください。詳細については、SublimeLinter-JSHint のインストール手順を参照してください。簡単に言えば:

1. jshint コマンドのインストール: npm install -g jshint
2. パッケージ コントロールのインストール: SublimeLinter、sublime の再起動
3. パッケージ コントロールのインストール: SublimeLinter-jshint

注: JavaScript には JSLint、JSHint などのリンター ツールが多数あります。そしてESLint。 JSLint は、JavaScript の第一人者である Douglas Crockford によって作成および保守されました。 JSHint は JSLint のフォーク バージョンであり、よりスケーラブルで柔軟性があり、多くのユーザーが JSHint を使用しています。 ESLint は、同じく JavaScript の専門家である Nicholas C. Zakas が率いるコミュニティ プロジェクトです。

注: SublimeLinter は Sublime 上のリンター プラグインのフレームワークであるため、多くのリンターはこのプラグインに依存しています。パッケージ コントロール: [インストール パッケージ] に「SublimeLinter-」と入力すると、以下に示すように、SublimeLinter- で始まる多数のリンター プラグインがリストされます。

JSCS

コードにエラーがないだけでは十分ではありません。一貫したコーディング スタイルに従う必要があります (コードは、単にマシンが使用したり、人々が閲覧したりするためだけのものではありませんよね?)。 JSCS は、コード スタイルをチェックするためのツールです。スペース要件、括弧の位置など、多くのコード スタイル ルールを設定できます。jQuery や Google などのコード スタイル ソリューションを直接使用することもできます。

SublimeLinter-JSCS を Sublime にインストールする必要があります。このプラグインは、SublimeLinter と jscs コマンド自体にも依存しています。簡単なインストール手順は次のとおりです。

1. jscs コマンドのインストール: npm install jscs -g
2. Package Control のインストール: SublimeLinter、sublime を再起動 (SublimeLinter をインストールしていない場合はスキップしてください)
3. Package Control のインストール: SublimeLinter-jscs

さらに、JSCS-Formatter プラグインをインストールしてコードの自動フォーマットを実現することもできます。

ColorHighliter

カラーハイライタープラグインは、CSS または Sass で宣言された色を、一目ではっきりとわかるように自動的に表示できます。デフォルト設定では、マウスをカラー変数の上に移動すると、背景が宣言された色に変わります。

デフォルトの設定については、「パッケージ設定」>「カラー ハイライター」>「設定 – デフォルト」を参照してください。たとえば、プラグインのユーザー設定で次の設定を行うことで、次の画像の表示効果を実現できます。

{

"ha_style" : "filled"

}

Gutter Color と Color Picker は、その他の 2 つの色関連プラグインです。

AutoFileName AutoFileName は、人による入力エラーを減らすために、ファイル名を入力するときに自動プロンプトを提供します。 Autoprefixer Autoprefixer プラグインを使用すると、CSS ベンダー プレフィックスを自動的に追加できるため、個人的に使用する場合に便利です。正式なプロジェクトの場合は、他の自動ビルド ツールを使用して、ビルド プロセス中に統合された実装を実装できます。

作者:韓国カイ。このシリーズの記事は、Addy と Matt のビデオ シリーズ Totally Tooling Tips の内容に基づいて再構成されたもので、主に (フロントエンド) 開発者が好むいくつかのツールやテクニックを紹介しています。