Cara memasang dan menggunakan ESLint dalam projek Node.js

Bagaimana untuk memasang dan menggunakan ESLint dalam projek Node.js? Artikel ini akan memperkenalkan anda kepada cara menggunakan ESLint dalam aplikasi Node.js.

[Pembelajaran yang disyorkan: "tutorial nodejs"]

ESLint ialah utiliti linting JavaScript sumber terbuka . , ia boleh membantu kami menyeragamkan kod dan mengatasi beberapa ralat tidak dijangka yang dibuat oleh pembangun, kerana JavaScript ialah bahasa yang ditaip lemah.

Terdapat banyak pilihan kanonik dalam komuniti Javascript, seperti JSHint dan JSCS, untuk linting kod, termasuk ESLint, yang akan kita bincangkan hari ini.

ESLint direka bentuk untuk menjadikan semua peraturan boleh dipasang sepenuhnya. Ini adalah salah satu sebab utamanya. Ia membolehkan pembangun membuat peraturan linting mereka sendiri. Setiap peraturan yang disediakan dalam Panduan Rasmi ESLint ialah peraturan bebas dan pembangun boleh memutuskan pada bila-bila masa sama ada untuk menggunakan peraturan tertentu.

Pemasangan

Untuk pemasangan tempatan dalam direktori projek:

$ npm i eslint -D

Untuk pemasangan global dalam sistem kerja:

$ npm i eslint -g

Selepas pemasangan, kita boleh menggunakan ESLint melalui perintah eslint di terminal.

Konfigurasi

Kaedah konfigurasi paling mudah ialah menyediakan .eslintrc fail JSON, yang boleh menerangkan semua peraturan linting. Contoh

.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": []
}

Medan utama:

• parse — menentukan penghurai
• parserOptions — Tentukan pilihan penghurai
• env — Tentukan persekitaran berjalan skrip
• root — Apabila true, berhenti mencari dalam direktori induk Fail konfigurasi
• globals — pembolehubah global tambahan yang diakses oleh skrip semasa pelaksanaan
• rules — tambah peraturan tersuai anda di sini

Jika eslint dipasang secara global, kami juga boleh jana fail konfigurasi menggunakan arahan berikut:

$ eslint --init

Dalam kes lain, jika anda telah memasangnya secara setempat ke dalam projek anda, anda perlu memasukkan dalam terminal:

$ ./node_modules/.bin/eslint --init

Dalam kedua-dua kes, anda akan digesa dengan set peraturan asas untuk menjana .eslintrc fail.

Contoh fail yang dijana selepas gesaan di atas:

{
  "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"
    ]
  }
}

Untuk butiran konfigurasi, sila baca:

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

Untuk memudahkan operasi, kami boleh menambah skrip berikut dalam medan package.json dan scripts projek:

{
  "scripts" : {
    "lint": "eslint **/*.js",
    "lint-html": "eslint **/*.js -f html -o ./reports/lint-results.html",
    "lint-fix": "eslint --fix **/*.js"
  }
}

Kami menggunakan peraturan ini pada fail berikut:

var a = 1;
console.log(1);

Selepas melaksanakan npm run lint mesej berikut akan muncul:

ESLint Petunjuk sudah jelas: 3 kesilapan. Koma bertitik tambahan pada penghujung baris pertama dan kedua adalah salah, a ditetapkan tetapi tidak pernah digunakan.

dan menggesa untuk menggunakan pilihan --fix untuk membetulkan ralat dan amaran. Terdapat 2 ralat yang boleh diperbaiki. Sekarang, gunakan npm run lint-fix untuk membetulkannya dan terpulang kepada anda untuk menukar a secara manual.

Anda juga boleh menjalankan perintah npm run lint-html untuk menulis hasil semakan ke fail halaman web.

Keutamaan fail konfigurasi

Jika anda mengikuti langkah demi langkah di atas, anda mungkin sudah tahu, ESLint Beberapa format fail konfigurasi disokong.

Kini terdapat masalah, Jika terdapat berbilang fail ESLint dalam direktori yang sama, bagaimanakah ia akan dilaksanakan dan apakah keutamaannya?

ESLint Kod sumber memberikan jawapan kami, dan konfigurasi keutamaannya adalah seperti berikut:

const configFilenames = [
  ".eslintrc.js",
  ".eslintrc.yaml",
  ".eslintrc.yml",
  ".eslintrc.json",
  ".eslintrc",
  "package.json"
]

.eslintrc.js > ;.eslintrc.yaml > .eslintrc.yml > .eslintrc.json > 🎜 >Peraturan dalam ESLint ditambah secara berasingan. Tiada peraturan dikuatkuasakan secara lalai. Anda mesti menentukan peraturan secara eksplisit sebelum ia didayakan untuk proses linting.

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 与样式指南（如 Airbnb、JavaScript 标准风格）一起使用。

你还必须使用额外的插件，例如：

• Airbnb 的插件 eslint-config-airbnb-base。
• JavaScript 标准风格 eslint-config-standard
• 一些流行库的插件：Vue | React

团队规范

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;,
    // ...
  }
}

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

更多编程相关知识，请访问：编程入门！！

Atas ialah kandungan terperinci Cara memasang dan menggunakan ESLint dalam projek Node.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!