使用 ESLint 和 Prettier 设置 Node.js 应用

在构建应用程序之前，我们首先需要准备好开发环境，并配备有助于开发和调试的工具和技术。Node.js 应用程序也不例外，因此我们需要安装一些包、模块、插件和工具来提高代码质量，避免错误和缺陷。ESLint 和 Prettier 就是其中的两个例子。

什么是 ESLint？

ESLint是一款 JavaScript 和 TypeScript 代码检查工具，它可以分析源代码并识别潜在的编程问题和错误。它会用红色下划线标出错误，用黄色下划线标出警告。它对于解决代码风格问题非常有用。

什么是Prettier？

Prettier是一款具有鲜明风格特征的代码格式化工具，它通过解析代码并根据自身规则重新输出，强制执行一致的代码风格。这些规则会考虑最大行长度，并在必要时自动换行。Prettier 对于保持代码的可读性以及确保团队协作时代码格式的一致性非常有用。它还支持多种编程语言，例如：JavaScript、TypeScript、CSS、GraphQL、JSON 等等。

配置 ESLint 和 Prettier。

首先，创建一个名为app-eslint-prettier-config 的新文件夹并进入该文件夹。打开终端并输入以下命令初始化你的 Node.js 应用程序：

npm init --y

请确保您已在本地计算机上安装了 Node.js。现在，安装所有必要的依赖项：

npm install eslint eslint-config-prettier prettier –-save-dev

运行以下命令配置 ESLint：
eslint --init

运行此命令后，您需要通过选择一些配置选项来配置 ESLint。使用向下箭头键导航至“检查语法和查找问题”选项，如下图所示。按空格键选中，然后按 Enter 键。

接下来，请选择您要使用的模块类型和框架。在本例中，我们将开发一个 Node.js 项目，因此请选择“无”。请使用相同的步骤回答以下所有问题。

最终结果将如下所示：

现在，会创建一个名为.eslintrc.json 的文件。请将此文件中的所有内容替换为以下代码：

{
    "root": true,
    "parserOptions": {
         "ecmaVersion": 12,
         "sourceType": "module"
    },
    "extends": ["eslint:recommended", "prettier"],
    "env": { 
         "es2021": true,
         "node": true
    },
    "rules": {
         "no-console": "error"
    }
}

现在，让我们来解释一下添加到.eslintrc.json文件中的每一段代码：

• root属性表明此配置是项目的根目录。将此 root 属性设置为 true 后，ESLint 将仅限于特定项目，不再查找父文件夹。

• parserOptions定义了你的代码中使用的 ECMASCRIPT 版本，以及你是否使用模块。

• ` extends`允许向配置中添加规则。这里，我们使用了 ESLint 推荐的规则以及eslint-config-prettier包定义的规则。该包会关闭所有不必要或可能与 Prettier 冲突的 ESLint 规则。

• `env`属性定义了代码将在哪种环境中运行。这里，由于是 Node.js 环境，我们将 `node` 属性设置为 `true`。如果您同时在 React 或 Vue 等客户端环境中工作，也可以添加 `browser` 属性并将其设置为 `true`。

• rules属性允许您编辑或添加特定规则。我们添加了 no-console: ”error” 以避免在控制台中使用方法。控制台消息被视为用于调试目的，因此不适合发送给客户端。但是，如果您想允许使用控制台方法，请在规则中添加以下代码示例：{ “allow”: [“warn”, “error”] }。

还有更多选项，如果您感兴趣，可以查看ESLint 官方文档。

现在，让我们来配置 Prettier。

在项目根目录下创建一个名为.prettierrc.json的文件，并将以下代码添加到该文件中：

{
    "trailingComma": "es5",
    "tabWidth": 4,
    "semi": false,
    "singleQuote": true
}

这里我们使用默认配置选项，您可以根据需要添加更多选项。更多详情请参阅Prettier 文档。

我们已经完成了 ESLint 和 Prettier 的配置。但是，我们还需要在package.json文件中添加一些脚本，以便我们可以手动运行 ESLint 和 Prettier。

package.json 文件中新增了以下代码：

{
"scripts": {
   "format:check": 
   "prettier --check .",
   "format:write": "prettier --write .",
   "lint:check": "eslint .",
   "lint:fix": "eslint --fix ."
}
}

使用以下方法检查格式是否符合 Prettier 的规则：

npm run format:check

使用以下命令强制格式化：

npm run format:write

使用以下命令检查你的代码：

npm run lint:check

使用以下命令自动修复错误：

npm run lint:fix

结论：
我们已经完成了Node.js应用程序的ESLint和Prettier配置。您可以在此仓库中找到完整的源代码。

感谢阅读！
希望这篇小文章对您有所帮助。请与您的朋友和同事分享。分享是一种美德。

在多个平台上与我联系