npm 包 eslint-config-hostelworld 使用教程

简介

eslint-config-hostelworld 是一个由 Hostelworld 前端团队维护的 eslint 配置包。它提供了 Hostelworld 内部所使用的独特配置，并符合公司的编码规范要求。本文将提供详细的介绍和使用指南。

安装

使用 npm 进行安装：

npm install eslint-config-hostelworld --save-dev

使用

在你的项目根目录下创建一个 .eslintrc.js 文件：

module.exports = {
  extends: ['eslint-config-hostelworld'],
  rules: {
    // 在此处添加你的自定义规则
  }
}

以上设置会默认将规则从 eslint-config-hostelworld 中引用。请注意，只有在该包的作用域内定义的规则才会被覆盖。可以在自己的项目中通过对规则进行修改来使用个性化的配置。

配置列表

eslint-config-hostelworld 包含以下配置列表：

• eslint-config-hostelworld
• eslint-config-hostelworld/react
• eslint-config-hostelworld/vue

eslint-config-hostelworld

该配置包含 ES6、Node.js、Flow、Promise 和其他通用规则。可以通过以下方式使用：

module.exports = {
  extends: ['eslint-config-hostelworld']
}

eslint-config-hostelworld/react

在 eslint-config-hostelworld 的基础上，添加了 react-plugin 规则。可以通过以下方式使用：

module.exports = {
  extends: ['eslint-config-hostelworld/react']
}

eslint-config-hostelworld/vue

在 eslint-config-hostelworld 的基础上，添加了 eslint-plugin-vue 规则。可以通过以下方式使用：

module.exports = {
  extends: ['eslint-config-hostelworld/vue']
}

自定义规则

通过在 .eslintrc 文件中添加 rules 来覆盖规则，如：

module.exports = {
  extends: ['eslint-config-hostelworld'],
  rules: {
    'arrow-body-style': ['error', 'as-needed'],
    'no-unused-vars': 'warn'
  }
}

其中，'arrow-body-style': ['error', 'as-needed'] 用于规定箭头函数中当有大于一行的代码时是否需要加上 {}；'no-unused-vars': 'warn' 用于开启 “未使用变量的警告”。

示例代码

以下为一个简单的示例代码，其中使用了 eslint-config-hostelworld：

-- -------------------- ---- -------
----- - - -

----- - - -- -- -
  --------------
-

----- - - ----- -- -- -
  ----- ------ - ----- ------------------
  -------------------
-

---
---
展开代码

这段代码将会遵守 eslint-config-hostelworld 定义的规则。通过使用该eslint包，在你的代码中使用编码规范将变得更加容易和自然。

总结

使用 eslint-config-hostelworld 可以让你的代码遵循 Hostelworld 的编码规范。该 npm 包提供了多种配置列表可以满足不同的项目需求，同时提供了覆盖默认规则以使用自定义规则的支持。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c7681e8991b448e5f46