ESLintでコードをクリーンに保つ

最も人気のあるJavaScriptリンターの基本を学びます。これは、コードを特定の構文規則に準拠させるのに役立ち、コードに問題の原因が含まれているかどうか、コードがユーザーまたはチームが定義する一連の標準に一致するかどうかを確認します。

ESLintはJavaScriptリンター。

リンターとは何ですか?

良い質問!リンターは、コードの問題を特定するツールです。

コードに対してリンターを実行すると、多くのことがわかります。

  • コードが特定の構文規則に準拠している場合
  • コードに問題の考えられる原因が含まれている場合
  • コードがあなたまたはあなたのチームが定義する一連の標準と一致する場合

それはあなたまたはあなたのツールがあなたのコードを改善するためにあなたに実用的なデータを分析して与えることができるという警告を発します。

ESLint

ESLintは、JavaScriptプログラミング言語のリンターです。Node.js

インタプリタ言語であるJavaScriptにはコンパイル手順がなく、多くのエラーは実行時にのみ検出される可能性があるため、これは非常に便利です。

ESLintは、これらのエラーをキャッチするのに役立ちます。特にどのエラーを尋ねますか?

  • 無限を避けるループの中にforループ条件
  • すべてのgetterメソッドが何かを返すことを確認してください
  • console.log(および同様の)ステートメントを禁止する
  • スイッチで重複するケースをチェックします
  • 到達不能コードを確認する
  • JSDocの有効性を確認する

とはるかに!完全なリストは、で入手できます。https://eslint.org/docs/rules/

の人気の高まりきれいコードフォーマッターとしてESLintのスタイリング部分は時代遅れになりましたが、ESLintは、コード内のエラーやコードの臭いをキャッチするのに非常に役立ちます。

ESLintは非常に柔軟で構成可能であり、チェックするルール、または適用するスタイルの種類を選択できます。使用可能なルールの多くは無効になっており、でオンにすることができます.eslintrc構成ファイル。グローバルにすることも、プロジェクトに固有にすることもできます。

ESLintをグローバルにインストールする

使用するnpm

npm install -g eslint

# create a .eslintrc configuration file eslint --init

# run ESLint against any file with eslint yourfile.js

ESLintをローカルにインストールする

npm install eslint --save-dev

# create a .eslintrc configuration file ./node_modules/.bin/eslint --init

# run ESLint against any file with ./node_modules/.bin/eslint yourfile.js

お気に入りのエディターでESLintを使用する

もちろん、ESLintの最も一般的な使用法はエディター内です。

一般的なESLint構成

ESLintは、さまざまな方法で構成できます。

Airbnbスタイルガイド

一般的な設定は、AirbnbJavaScriptコーディングスタイルコードをリントします。

実行

yarn add --dev eslint-config-airbnb

または

npm install --save-dev eslint-config-airbnb

Airbnb構成パッケージをインストールし、.eslintrcプロジェクトのルートにあるファイル:

{
  "extends": "airbnb",
}

React

Reactプラグインを使用すると、Reactコードのリンティングが簡単になります。

yarn add --dev eslint-plugin-react

または

npm install --save-dev eslint-plugin-react

あなたの中で.eslintrcファイル追加

{
  "extends": "airbnb",
  "plugins": [
      "react"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

ECMAScriptの特定のバージョンを使用する

ECMAScript現在、毎年バージョンを変更しています。

デフォルトは現在5に設定されています。これは、2015年以前を意味します。

このプロパティをで設定して、ES6(またはそれ以降)をオンにします。.eslintrc

{
  "parserOptions": {
    "ecmaVersion": 6,
  }
}

強制厳密モード

{
  "parserOptions": {
    "ecmaFeatures": {
      "impliedStrict": true
    }
  }
}

より高度なルール

ルールの詳細なガイドは、次の公式サイトにあります。https://eslint.org/docs/user-guide/configuring

特定の行のルールを無効にする

ルールが誤検知を与える場合や、ESLintがフラグを立てるルートを明示的に採用する場合があります。

この場合、数行でESLintを完全に無効にすることができます。

/* eslint-disable */
alert('test');
/* eslint-enable */

または単一行:

alert('test'); // eslint-disable-line

または、複数の行に対して1つ以上の特定のルールを無効にするだけです。

/* eslint-disable no-alert, no-console */
alert('test');
console.log('test');
/* eslint-enable no-alert, no-console */

または単一行の場合:

alert('test'); // eslint-disable-line no-alert, quotes, semi

その他のdevtoolsチュートリアル: