開発者のためのSublimeLinterの使用方法

リンター 現代のWeb開発に不可欠なツールです。コードを書くときにエラーをチェックし、ベストプラクティスを強制するのに役立ちます。 SublimeTextを使用している場合は、SublimeLintersをインストールすることを強くお勧めします。長年にわたり、SublimeLintersはSublimeTextのパワーツールスイートであることを明らかにし、さまざまなプログラミング言語のリンターに接続する公式パッケージをもたらしました.

このチュートリアルでは、SublimeLinterのインストール方法と設定方法について説明します。始めましょう.

入門

SublimeLinter 4をインストールする最も簡単な方法はSublimeText Package Controlを使うことです。以来ずっと SublimeLinter 3, 各 リンター 別にインストールする必要があります。これにより、SublimeLinterを実行するだけでより効率的に実行できます。 リンター インストールしたこと.

私のプロジェクトではHTML、CSS、JS、PHPをほとんど使っているので、これらの言語用のリンターをインストールしたいと思います。の中に パッケージ管理, 私は以下のプラグインと一緒にSublimeLinterをインストールします。

SublimeLinter-html-tidy
SublimeLinter-stylelint
SublimeLinter-eslint
SublimeLinter-php

それから、それらのプラグインを動作させるために、私達はまたインストールする必要があります。 リンター HTML Tidy、CSSLint、JSHint、およびPHP CLIの各言語用.

OSXを使用している人のために、TidyとPHPがシステムにプレインストールされています。確認するには、次の2つのコマンドを連続して実行します。.

 tidy --version php --version

これらのコマンドはあなたが持っているTidyとPHPのバージョンを表示します。あなたは昇華テキストでそれらを使用することを続行することができます.

WindowsまたはLinuxを使用している場合、またはインストールしていない場合は、以下の手順に従ってください。.

HTML Tidyのインストール

HTML Tidyをインストールするには：

OSXで, ターミナルでこのコマンドを実行する 自作/ dupes /きちんとインストールする
Linuxの場合, このコマンドを使う sudo apt-get install tidy.
Windowsの場合, あなたはTidyBatchFilesからEXEインストーラをつかむことができます.

PHP CLIのインストール

OSXユーザーは、PHPをシステムにインストールすることができます。 curl -s http://php-osx.liip.ch/install.sh | bash -s 5.5 コマンド。これを書いている時点で、これは最新バージョンであるPHP 5.5をインストールします。.
Linux ユーザーはDigitalOceanからこの包括的なチュートリアルに従うことができます.
Windowsユーザー向け, こちらからインストーラをダウンロードできます。.

Styleintのインストール

次に、StylelintというCSSリンターをインストールします。これにより、CSSファイル内のベストプラクティスを確認して適用できます。 OSX、Windows、およびLinuxの3つのプラットフォームすべてで、以下の指示に従うことができます。 NPMと一緒にNode.jsを既にインストールしたと思います.

Stylelintをインストールするには、次のコマンドを実行してください。

 npm install -g stylelint

プロジェクトディレクトリにStylelint設定ファイルを追加し、さらにstylelint-config-standardのような定義済み設定をインストールする必要があることにも注意してください。これらが設定されれば、下記のように強調表示されるエラーを見つけるはずです.

ESLintのインストール

また、JavaScript用の最新かつ高度に設定可能なリンターESLintもインストールする予定です。これは私たちがベストプラクティスを実行するだけでなく、JavaScriptを書くときの潜在的なエラーをキャッチするのに役立ちます。 ESLintをインストールするには、NPMと共にNode.jsも必要です。.

インストールするには、.

 npm install -g eslint

同様に、プロジェクトにESLint設定を追加するか、eslint-config-recommendedなどの事前定義済み設定を使用する必要があります。.

私たちはみんな決まっています。始めることができます リンティング SublimeLinter 4を使用したSublimeTextのHTML、CSS、JS、およびPHP.

SublimeLinter 4の新機能

SublimeLinter 4には、いくつかの新機能があります。そして、目立つのが、開いているファイルのすべてのエラーを表示するパネルです。 Macを使用している場合は、Command + Ctrl + Aを押します。WindowsおよびLinuxでは、Ctrl + K、Ctrl + Aを押すことができます。.

次のスクリーンショットに示すように、ホットキーはエラーのリストを表示します。.

使用 ↑ そして ↓ リストをナビゲートすると、エラーが発生した正確な行にページがスクロールします。.

より良いビジュアル

エラーメッセージを表示するには、エディタの溝またはエラーが発生した行だけにカーソルを合わせます。これは以前のバージョンでは不可能でした.

高度に設定可能

SublimeLinter 4は今まで以上に設定可能です。例えば、我々は今カスタム化することができます “スタイル” 各リンター構成に。これにより、各リンターのアイコン、色、色合いモード、パス、および環境変数を個別に設定できます。.

その他の参考資料

この短い紹介がSublimeLinterを使いこなすのに役立つことを願っています。より高度なものがほしいと思う場合また参照を参照できる.

SublimeLinterオフィシャルドキュメント
ソフトウェアとプログラミングのリント - WikiPedia
SublimeLinterリポジトリ