ホームページ > ウェブフロントエンド > jsチュートリアル > Node.js プロジェクトで ESLint をインストールして使用する方法

Node.js プロジェクトで ESLint をインストールして使用する方法

青灯夜游
リリース: 2021-08-10 09:52:15
転載
3185 人が閲覧しました

Node.jsESLint をプロジェクトにインストールして使用するにはどうすればよいですか?この記事では、Node.js アプリケーションで ESLint を使用する方法を紹介します。

Node.js プロジェクトで ESLint をインストールして使用する方法

[推奨学習: 「nodejs チュートリアル 」]

ESLint は、オープンソースの JavaScript lint ユーティリティです。 . JavaScript は型付けが弱い言語であるため、コードを標準化し、開発者による予期せぬエラーを克服するのに役立ちます。

JavaScript コミュニティには、今日説明する ESLint を含む、コード lint 用の JSHint や JSCS などの正規化オプションが多数あります。

ESLint は、すべてのルールを完全にプラグイン可能にするように設計されています。これがその主な理由の 1 つです。これにより、開発者は独自の lint ルールを作成できます。 ESLint 公式ガイド ESLint 公式ガイドで提供される各ルールは独立したルールであり、開発者はいつでも特定のルールを使用するかどうかを決定できます。

インストール

プロジェクト ディレクトリへのローカル インストールの場合:

$ npm i eslint -D
ログイン後にコピー

作業システムへのグローバル インストールの場合:

$ npm i eslint -g
ログイン後にコピー

インストール済みその後、ターミナルで eslint コマンドを使用して ESLint を使用できるようになります。

構成

最も簡単な構成方法は、すべての lint ルールを記述できる .eslintrc JSON ファイルをセットアップすることです。

.eslintrc の例:

{
  "env": {
    "node": true,
    "browser": true
  },
  "globals": {
    "exampleGlobalVariable": true
  },
  "rules": {
    "no-console": 0,
    "space-infix-ops": "error",
    "quotes": ["error", "single", {
      "avoidEscape": true,
      "allowTemplateLiterals": true
    }],
    "space-before-blocks": ["error", "always"],
    "semi": ["error", "never"]
  },
  "plugins": []
}
ログイン後にコピー

メイン フィールド:

  • parse — パーサーを指定します
  • parserOptions — パーサー オプションを指定します
  • #env — スクリプトの実行環境を指定します
  • # root
  • true の場合、親ディレクトリ内の構成ファイルの上向き検索を停止します。
  • globals
  • — スクリプトが実行中にアクセスする追加のグローバル変数
  • rules
  • — ここにカスタム ルールを追加します
  • eslint がグローバルにインストールされている場合は、次のコマンドを使用して構成ファイルを生成することもできます:
$ eslint --init
ログイン後にコピー

また、プロジェクトにローカルにインストールした場合は、ターミナルに次のように入力する必要があります:

$ ./node_modules/.bin/eslint --init
ログイン後にコピー

どちらの場合も、

を生成するように求められます。 eslintrc

ファイルのルール。

Node.js プロジェクトで ESLint をインストールして使用する方法上記のプロンプトの後に生成されるファイルの例:

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es2021": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 12
  },
  "rules": {
    "indent": [
      "error",
      "tab"
    ],
    "linebreak-style": [
      "error",
      "windows"
    ],
    "quotes": [
      "error",
      "single"
    ],
    "semi": [
      "error",
      "never"
    ]
  }
}
ログイン後にコピー

構成の詳細については、次を参照してください:

http: //eslint.org/docs/user-guide/cconfiguring

操作を容易にするために、プロジェクトの
package.json

scripts## に入力できます。 # フィールド 次のスクリプトを内部に追加します:

{
  "scripts" : {
    "lint": "eslint **/*.js",
    "lint-html": "eslint **/*.js -f html -o ./reports/lint-results.html",
    "lint-fix": "eslint --fix **/*.js"
  }
}
ログイン後にコピー
このルールを次のファイルに適用します:
var a = 1;
console.log(1);
ログイン後にコピー

npm run lint

を実行すると、次の情報が表示されます:

ESLint プロンプトはすでに明らかです: 3 つのエラー。 1 行目と 2 行目の末尾にある余分なセミコロンは間違っています。Node.js プロジェクトで ESLint をインストールして使用する方法a

が割り当てられていますが、使用されていません。

そして、エラーと警告を修正するために --fix

オプションを使用するように求められます。修復できるエラーは 2 つあります。ここで、

npm run lint-fix を使用して修正します。a を手動で変更するかどうかはあなた次第です。 npm run lint-html

コマンドを実行して、チェック結果を Web ページ ファイルに書き込むこともできます。

Node.js プロジェクトで ESLint をインストールして使用する方法設定ファイルの優先順位

上記の手順を段階的に実行すれば、おそらくすでにわかっているでしょう。 ESLint

は、複数の形式の構成ファイルをサポートしています。

ここで問題が発生しました。 同じディレクトリに複数の

ESLint

ファイルがある場合、それらはどのように実行され、優先順位はどうなりますか? ESLint ソース コード

が答えであり、その優先順位の設定は次のとおりです:

const configFilenames = [
  ".eslintrc.js",
  ".eslintrc.yaml",
  ".eslintrc.yml",
  ".eslintrc.json",
  ".eslintrc",
  "package.json"
]
ログイン後にコピー

.eslintrc.js > 。 eslintrc.yaml > .eslintrc.yml > .eslintrc.json > .eslintrc > package.json

ルール

ESLintのルールは別途追加されます。デフォルトではルールは適用されません。 lint プロセスに対してルールを有効にする前に、ルールを明示的に指定する必要があります。

公式ドキュメントを開いてルールの完全なリストを確認してください:

http://eslint.org/docs/rules/

在决定要包含哪些规则之后,您必须设置这些错误级别。每个错误级别可定义如下:

  • 0 — 关闭规则,相当于 off
  • 1 — 打开规则作为警告,相当于 warn
  • 2 — 打开规则作为错误,相当于 error

错误和警告之间的区别在于 eslint 完成时将具有的退出代码。如果发现任何错误,eslint 将以 1 退出代码退出,否则将以 0 退出。

如果您在生成步骤中进行 lint,这允许您控制哪些规则应破坏您的生成,哪些规则应视为警告。

环境

您正在编写的代码可能适用于特定环境,例如,您可能正在使用 Express 框架在 Node.js 应用程序中编写 REST API,并且该应用程序的前端将在 Vue/React 中构建。

两个不同的项目、两个不同的环境,它们都可以在一个文件中具有单独的 eslint 配置,即使客户端和服务器位于一个被视为项目根目录的项目目录下。

它是如何完成的?

通过在 .eslintrc"env" 部分将环境 id 设置为 true

ESLint CLI

ESLint 附带一个命令行界面(CLI),用于 lint 文件或目录。

$ eslint index.js
ログイン後にコピー

前面示例中我们已经看到,运行命令后生成的输出将按文件分组,并将指定 line:column 警告/错误、错误原因以及每个故障的规则名称。

将 ESLint 与您喜欢的编码风格结合使用

ESLint 个人并不提倡任何编码风格。您可以设置 .eslintrc 文件以使用您喜欢的样式规则强制编码样式。

您还可以将 ESLint 与样式指南(如 AirbnbJavaScript 标准风格)一起使用。

你还必须使用额外的插件,例如:

团队规范

AlloyTeam 给出的 React/Vue/TypeScript 项目的渐进式 ESLint 配置(eslint-config-alloy),以下贴出 React 的一小部分配置:

module.exports = {
  parserOptions: {
    babelOptions: {
      presets: ['@babel/preset-react'],
    },
  },
  plugins: ['react'],
  rules: {
    /**
     * 布尔值类型的 propTypes 的 name 必须为 is 或 has 开头
     * @reason 类型相关的约束交给 TypeScript
     */
    'react/boolean-prop-naming': 'off',
    /**
     * <button> 必须有 type 属性
     */
    &#39;react/button-has-type&#39;: &#39;off&#39;,
    /**
     * 一个 defaultProps 必须有对应的 propTypes
     * @reason 类型相关的约束交给 TypeScript
     */
    &#39;react/default-props-match-prop-types&#39;: &#39;off&#39;,
    /**
     * props, state, context 必须用解构赋值
     */
    &#39;react/destructuring-assignment&#39;: &#39;off&#39;,
    /**
     * 组件必须有 displayName 属性
     * @reason 不强制要求写 displayName
     */
    &#39;react/display-name&#39;: &#39;off&#39;,
    // ...
  }
}
ログイン後にコピー

您可以参考该团队的一些配置,应用到自己的项目中。

更多编程相关知识,请访问:编程入门!!

以上がNode.js プロジェクトで ESLint をインストールして使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:juejin.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート