コード最適化のための10のCSSおよびJavaScriptリンティングツール
Lintingツールは開発者にとって非常に役立ちます。 上質で最適化されたコードを書く. リンティングは、ソースコード内のエラーを探し、潜在的なバグにフラグを立てるコードチェックプロセスです。ほとんどのリンターは静的コード分析手法を使用しています。 コードは実際には実行されずにチェックされます.
コードを書いている間、ファイルを保存したとき、変更をコミットしたとき、コードが本番に入る前など、さまざまな場面でヒントを得ることができます。ワークフローがどのようなものであれ、重要なことは 定期的に糸くず, 将来多くの頭痛からあなたを救うことができるように.
リンターは単にバグ防止ツールではありませんが、デバッグ中にも効果的に使用できます。 キャッチしにくいエラーを見つけるため さもないと。この記事では、コードの品質を向上させるためにCSSファイルとJavaScriptファイルをリントするために使用できる10個の強力なツールを紹介します。.
1. CSSLint
CSSLintは明らかに「あなたの気持ちを傷つける」ことを意図していますが、その代わりに「あなたはコードをずっと良くします」。 CSSLintは現在、CSSリンティングの市場をリードしています。それはJavaScriptで書かれており、それはオープンソースであり、そして設定可能なオプションのトンが付属しています.
CSSLintはあなたをすることができます どんな種類のエラーや警告を選択する （互換性、性能、複製など） テストしたい, そして 選択した規則に照らしてCSS構文を検証します。.
ブラウザで動作するだけでなく、コマンドラインインターフェイスもあります。独自のビルドシステムに統合することもできます。.
2. SublimeLinter CSSLint
CSSLintは非常に効果的なCSSリンターであり、それに対処する競合他社を見つけるのは困難です。おそらくそれがSublimeLinterリンティングフレームワークがCSSリンティングプラグインをその上に構築した理由です。 SublimeLinterはSublimeTextプラグインです。 SublimeText edito内で自分のコード（CSS、PHP、Python、Java、Rubyなど）をリントする手段をユーザーに提供します。r.
SublimeLinter CSSLintプラグイン自体をインストールする前に、CSSLintをNode.jsモジュールとしてインストールする必要があります。この便利なツールの素晴らしいところはあなたがいるということです。 一度だけ設定を構成する必要があります, あるいはデフォルトに満足しているのであれば、あなたはそれをする必要さえないでしょう、あなたはそれ以上の面倒なしにあなたのSublimeTextエディタの中でいつでも関連する警告と通知を得ることができます。.
3. StyleLint
StyleLintは、開発者がCSS、SCSS、またはPostCSSが解析できるその他の構文の誤りを回避するのに役立ちます。 StyleLintは100以上のルールをテストします。 どちらをオンにするかを選択します （設定例を参照）.
あなた自身の設定を構築したくない場合は、約60のStyleLintルールを含む、事前に作成された標準設定を選ぶこともできます。 StyleLintは非常に柔軟なツールです。追加のプラグインによって拡張でき、3つの異なる形式で使用できます。コマンドラインツールとして、Node.jsモジュールとして、またはPostCSSプラグインとして。.
4. W3C CSSバリデータ
W3CのCSS Validatorは通常リンティングツールとは考えられていませんが、それは開発者に彼らのCSSソースコードをW3Cの公式標準と照合する絶好の機会を与えます。 W3Cは、C言語用のLintプログラムチェッカーに似たツールを提供することを目的として、バリデーターを構築しました.
最初に、彼らは後にCSSバリデータが続くHTMLマークアップバリデータを作成しました。 W3CのCSSバリデーターにはCSSLintほど多くのオプションはありませんが、 詳細でわかりやすいエラーメッセージと通知を返します。.
追加機能として、W3Cの最近のモバイルWeb標準と比較してコードをチェックすることもできます。これは、モバイルWebの時代には悪いことではありません。.
5.ダーティーマークアップ
Dirty Markupは、HTML、CSS、およびJavaScriptコードを整理、フォーマット、および検証します。あなたが簡単なデザインが好きで、素早い解決策が欲しいならば、それは素晴らしい選択であることができます。ダーティーマークアップ エラーメッセージと通知をリアルタイムでスローします あなたがいる間 エディタ内でコードを書くか修正する.
あなたがヒットしたとき “クリーン” ボタン、それ 一度に構文エラーを修正し、フォーマットを片付けますが、警告はそのまま残します あなたが望むならそれらを解決させる。どのルールをテストしたいのかを選択することはできませんが、3つのファイルタイプすべて フォーマットを決めるための設定がいくつかあります。 クリーン出力の.
6. JSLint
JSLintは2002年にDouglas Crockfordによって最初にリリースされましたが、それ以来勢いを失うことはありませんでした。そのため安定した信頼性のあるJavaScriptリンティングツールであることは間違いありません。.
JSLintは、JavaScriptのソースコードとJSONテキストを処理できます。 JSのベストプラクティスに従った既製の設定 Crockfordは、彼の著書JavaScript：The Good Partsに書いています。.
JSLintにはいくつかの選択肢がありますが、あなたは 独自のカスタムルールを追加したり、ほとんどの機能を無効にしたりすることはできません。. JSLintにはすでに最新のECMAScript 6標準が含まれ始めています。ES6実装の現在の段階をここで確認できます。.
7. JSヒント
JSHintはJSLintの非常にポピュラーなフォークであり、Facebook、Twitter、Mediumなどの主要なハイテク企業で使用されています。
JSHintはコミュニティ主導のプロジェクトで、 JSLintの設定可能性が高く、それほど根拠のないバージョンを作成する. JSHintを使用すると、開発者は任意のリンティングオプションを設定し、カスタマイズした設定を別のファイルに配置することができます。これは、ツールを簡単に再利用できるようにするオプションであり、大規模プロジェクトに最適です。.
JavaScriptを洗練されたものにするためにJSHintを使用できるだけでなく、jQuery、Mootools、Mocha、およびNode.jsなどの多くの一般的なJSライブラリーをすぐにサポートすることもできます。.
8. ESLint
ESLintは、JavaScriptリンティング業界の最新の大きなものです。その人気は非常に柔軟な性質から生じています。あなたはその洗練されたリンティング規則のトンをカスタマイズして、そしてすべての主要なコードエディタとそれを統合することができるだけでなく、あなたも簡単にすることができます その機能を拡張する それに別のプラグインを追加することによって.
パーサオプションを指定することで、 サポートしたいJS言語の標準を選択してください リンティングプロセス中。デフォルトのECMAScript 5構文だけでなく、ECMAScript 6、ECMAScript 7、およびJSXに対してもスクリプトをチェックできます。.
9. JSCS
JSCS、またはJavaScript Code Styleは、プラグイン可能なJavaScript用のコードスタイルリンターで、コードのフォーマットルールをチェックします。.
JSCSの目的は以下の手段を提供することです。 プログラム的に特定のコーディングスタイルガイドに従うことを強制する. JSCSはバグやエラーをチェックしませんが、Google、AirBnB、AngularJSなど、ハイテク業界の多くの主要プレーヤーによって使用されています。.
JSCSはフォーマットエラーを自動的に修正するため、リアルタイムで節約できます。したがって、JSCSを1つずつ確認する必要はありません。 Google、Grunt、またはWikimediaのコーディングスタイルプリセットなど、より大きなプロジェクトに属するさまざまなプリセットがあり、自分のプロジェクトで簡単に使用できますが、 独自のカスタム設定を作成することもできます.
10.スタンダードJS
StandardJS、またはJavaScript Standard Styleは、JSCSと同じコードスタイルリンターですが、単純さと単純さの点で異なります。 StandardJSは優れた選択肢です。, 設定に時間をかけたくない場合, 箱から出して効果的なツールが欲しい.
StandardJSは、事前に記述された少数のフォーマット規則に従います。その中心的な価値は、コーディングのワークフローを気を散らさずに済ませることであるため、同意しない規則を変更することはできません。カスタム設定をしたくない場合は、StandardJSを選択してください。 JavaScriptファイル全体で一貫したコードスタイルを適用する.
