サイトの開発を始めた瞬間から テキスト エディタです。メモ帳のような単純なものでも、本格的なものもあります。 IDE
このエピソードでは、Matt がプラグインのコレクションを確認する Sublime Text の それぞれがワークフローをサポートします。
パッケージ制御
エピソードで参照されているパッケージ（またはプラグイン）を取得するには、以下を行う必要があります。 Package Control をインストールします。 インストールする必要があります。また、 手順についてはこちらをご覧ください。
JSHint
JSHint は、JavaScript を調べる JavaScript リンターです。 コードのエラーや不適切なプラクティスを ハイライト表示します
たとえば、変数名を間違って入力してしまった場合
その場合、JSHint は fo が定義されておらず、
エラーが発生します。
var foo = { bar: 'Hello, World.' };
var msg = fo.bar;
JSHint プラグイン 関連する項目を黄色のボックスで囲んで その部分にカーソルを置くと、エラーになります Sublime の左下にメッセージが表示されます。
その他の問題としては、次のようなものがあります。
- 定義されているが使用されていない変数
- ループ内での関数作成を回避する
- 適切な比較方法の使用
SublimeLinter-JSHint Package をインストールする方法 SublimeLinter パッケージをインストールして、手順に沿って操作する必要もあります。 手順については、SublimeLinter-JSHint パッケージのページをご覧ください。
デベロッパーによっては、 JSHint Gutter できます。小さなドットが JSHint の問題がある行のガター。
JSCS
JSCS は、Google Cloud の JavaScript が特定のコーディング スタイルに従っていない。
たとえば JSCS を使用すると、スペースを使用するのか、 「if」などのキーワードの後で使用するか、中かっこが メソッドの同じ行または新しい行に配置する必要があります。
SublimeLinter-JSCS パッケージ JSHint と同様のスタイルでインラインで問題をハイライト表示 問題を簡単に修正できます
これは、職場で働く際に非常に便利です。 チームの全員が同じスタイルガイドに従い、 コードの一貫性を維持します。
最良の点は、JSCS-Formatter パッケージを使用すると、ページ上のあらゆる問題を自動的に修正できることです。
ctrl + shift + p キーを押して、「JSCS Formatter: Format this file」と入力します。
Enter キーを押します。詳しくは、Addy のブログ投稿をご覧ください。
カラー ハイライター
カラー ハイライター 背景に色が付き、 CSS や Sass 内の色定義も考慮に入れます
下線として表示するか、 カーソルを合わせたときや 定義の背景色で表示されます。こちらにアクセスしてください。 'パッケージの設定'>'カラー ハイライター'> '設定 - デフォルト'初期設定を確認します。 [設定] - [ユーザー] で設定を変更できます。
背景全体をハイライトできます [Settings - User] に以下を追加します。ファイル:
{
"ha_style": "filled"
}
ガターの色
ガターの色 はカラー ハイライターに代わるものですが 色変数の上に色を表示する代わりに 線のガターに色が入ります。
カラー ピッカー
画面からすばやく簡単に色を選択する必要がある場合 [カラー選択ツール パッケージ] を選択します。 きっと役に立つでしょう
ctrl + shift + c を押してブームボタンを押すと、カラー選択ツールが表示されます。
AutoFileName
AutoFileName これは簡単なプラグインで、 入力を始めると、使用可能なファイルのリストが表示されます。これはスーパー イメージ名や名前を入力する際などに便利です。 CSS または JS ファイルを追加すれば 時間を節約できます 誤字脱字のリスクも軽減できます
自動プレフィックス
私たちは皆、これに気づかない瞬間を プレフィックス付きの CSS プロパティを追加しますあり 自動プレフィックス CSS で実行するだけで 必要な接頭辞をすべて追加します。
ここから来るってこと..
.container-thingy {
display: flex;
flex-direction: column;
align-items: flex-start;
}
ctrl + shift + p キーを押して次のコマンドを入力します。
'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;
}
使用するブラウザとブラウザのバージョンを定義することもできます。 パッケージ設定でサポートします。[Package Control] ページをご覧ください。 をご覧ください。
その他...
これ以外にも多数のプラグインが用意されているため、 パッケージ コントロールもぜひご検討ください。
その他のアドバイスやヒントについては、 WesBos の優れたスライド資料を Sublime Text のキーボード ショートカットとその他のプラグインをご覧ください。
WesBos は次のような書籍も執筆しています。 'パワーユーザーのための華やかなテキスト' こちらもどうぞよろしくお願いいたします。