🍿 在 NPM 上发布您自己的 React 项目 ESLint / Prettier 配置 📦

大家好！👨‍💻

你可能听说过ESLint和Prettier，但你有没有为你的React项目配置过自己的工具呢？💪

GIF

温馨提示🧠

ESLint是一款静态代码分析工具，用于识别 JavaScript 代码中存在的问题模式。您可以配置 ESLint，使其在保存文件时修复文件中的所有问题。

Prettier是一款带有预设规范的代码格式化工具，支持多种编程语言，例如：JavaScript、JSON、JSX、CSS 和 Markdown。Prettier 能让你的代码看起来美观大方，无需你费心进行任何格式化工作。据我估计，使用 Prettier 每天可以节省大约 1 小时的时间。

本文将介绍如何创建自己的 ESLint + Prettier 配置，以便在自己的React 应用中复用！🔥

示例：https ://github.com/viclafouch/eslint-config-viclafouch

1. 创建仓库 ✏️

首先，我建议您创建一个存储库，以便保存您的配置并在需要时修改您的规则。

按照惯例，模块名称以eslint-config-开头，例如eslint-config-foo。例如eslint-config-viclafouch（这是我的用户名）或eslint-config-react。

然后，将新仓库克隆到本地磁盘。

git clone https://github.com/$USERNAME/eslint-config-$USERNAME.git

2. 创建 ESLint 配置 🧰

让我们开始配置 React 项目。

首先，添加 ESLint 依赖项💪。下面的软件包会根据您的需求而变化。

• 巴别塔-eslint
• eslint
• 更漂亮
• eslint-config-prettier
• eslint-plugin-prettier
• eslint-plugin-react
• eslint-plugin-react-hooks
• eslint-plugin-jsx-a11y

只需复制/粘贴以下命令：

npm install -D eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y babel-eslint

ℹ️ 文档中提到，如果您的共享配置依赖于某个插件，您还应该将其指定为 peerDependency（插件将相对于最终用户的项目加载，因此最终用户需要安装他们需要的插件）。

你package.json现在应该看起来像这样：

ESLint 配置🔹

接下来，让我们创建一个.eslintrc.js文件，并将 ESLint 插件添加到我们的配置中，这些插件会应用某些规则（针对 React、React Hooks 等）。

更美观的配置🔸

然后，要自定义 Prettier 配置，只需将表示选项的对象添加到自定义配置文件中即可rules。这些选项将传递给 Prettier。

您可以在这里找到我的配置的简单示例：https://github.com/viclafouch/eslint-config-viclafouch

导出您的配置💡

下一步是创建一个index.js文件，将你的配置导出到你的 React 应用程序中。

将您的配置发布到NPM 🚀

发布配置之前，请确保提供完善的元数据，例如名称、关键字、描述等。

如果一切正常，就可以发布到 NPM 注册表了🥳

npm publish

将配置导入到你的 React 应用中 🎉

首先，我们需要安装配置所需的所有组件：

以下是我自己的配置示例：

npx install-peerdeps --dev @viclafouch/eslint-config-viclafouch

.eslintrc.js然后，在项目根目录下创建一个文件。我的.eslintrc.js文件内容如下（请务必根据自己的配置进行修改）：

最后，你可以在package.json 文件中添加两个脚本来检查和/或修复你的代码：

现在，您的自定义配置已发布在NPM上，可随时在 React 项目中使用，并且可以随时进行编辑！

瞧！

干杯🍻🍻🍻

如果你喜欢这篇文章，可以关注我的推特账号，或者来dev.to网站关注我，我会定期在那里发布一些关于HTML、CSS和JavaScript的实用技巧。

🤝 JavaScript 中的 Promise.allSettled() 与 Promise.all() 对比 🍭

维克多·德拉·富沙尔迪埃 ・ 2020 年 8 月 16 日

#javascript #node #webdev #beginners

📦 GitHub 个人资料：展示最新开发文章的正确方式 + 额外福利 🎁

维克多·德拉·富沙尔迪埃 ・ 2020 年 8 月 5 日

#github #markdown #showdev #productivity