Linting 和漂亮打印的 JavaScript 代码有助于更早地检测错误，使代码更清晰，并提高整体代码质量。但是，在使用格式化程序进行漂亮打印和 linter 时可能会有一些摩擦。

在本文中，我们将学习如何使用 lint-staged 配置 ESLint、Prettier 和 Husky，并将它们一起用于在命令行和 VS Code 中自动修复和格式化代码。

交易工具🧰

任何软件工程师，无论他们的经验水平如何，都可能会遇到糟糕的一天，并且无意中引入了导致错误或根本不适合良好代码开发实践的更改。

幸运的是，有几种方法可以保护您的 JavaScript 项目免受此类攻击。首先想到的是使用各种类型的测试。当然，它们是最有效的方法，但我们将在本文后面讨论。

我们将专注于代码本身，而不是测试应用程序的功能以保护您的软件项目免受无意的开发人员错误的影响。

1. 依赖

ESLint 是一种 lint，可以检测和报告 ECMAScript/JavaScript 代码中的模式。Lints，也称为 linter，是用于标记编程错误、错误、风格错误和可疑结构的工具，以减少错误并提高代码的整体质量。在某些情况下，他们可以检测到这些错误并为您自动更正。

ESLint 是一种流行的开源 lint，最适用于 JavaScript 和 TypeScript，它允许我们通过指定您自己的规则或扩展来自 Google、Airbnb 等公司的标准化规则来配置和定制它以满足我们的需求。

Prettier 是一个固执己见的代码格式化程序，它的代码样式一致且更易于使用。它支持 HTML、CSS、Javascript 和它们的大部分库。

Husky 是一个让我们使用 Git 钩子的工具。Git 钩子是可以配置为在 Git 生命周期中的特定点运行的脚本，我们将使用 Husky 来运行 ESlint 和 Prettier 作为我们的预提交钩子，以确保如果他们的代码违反了我们的规则，则没有人可以提交。

创建预提交和配置 Husky 可能很难在团队中设置和共享，因此我们将使用 lint-staged，这是一个安装 Husky 并为您配置所有内容的工具，您只需指定要在每次提交时运行的脚本。

要安装所有依赖项，请使用以下命令（作为开发依赖项）：

yarn add -D eslint eslint-plugin-react husky lint-staged prettier
# or 
npm i -D eslint eslint-plugin-react husky lint-staged prettier

2. 脚本

将此添加到您的 package.json 中：

{
  "scripts": {  
    "format": "prettier --write .",
    "prepare": "husky install"
  },
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  },
}

您现在可以运行npm run format来美化您现有的代码库。

你在这里做了什么：Husky 添加了一个 git commit 钩子，以便 lint-staged 只在你在 git 中暂存的新内容上运行 Prettier。

3.更漂亮的设置

现在我们将配置我们的格式化程序。为此，我们将使用两个文件：.prettierrc.json包含配置以及.prettierignore我们可以在其中列出 Prettier 应该跳过的文件和文件夹的位置（此文件的工作方式与 .gitignore 相同）。

使用Prettier Playground来决定您的团队想要什么设置。

在根文件夹中创建一个名为 .prettierrc.json 的文件，该文件将包含您在格式化代码时可能希望 prettier 遵循的自定义规则/选项，在 .prettierrc.json 中输入以下代码：

{
    "arrowParens": "always",
    "bracketSpacing": false,
    "embeddedLanguageFormatting": "auto",
    "htmlWhitespaceSensitivity": "css",
    "insertPragma": false,
    "jsxBracketSameLine": false,
    "jsxSingleQuote": false,
    "printWidth": 80,
    "proseWrap": "preserve",
    "quoteProps": "as-needed",
    "requirePragma": false,
    "semi": true,
    "singleQuote": false,
    "tabWidth": 2,
    "trailingComma": "es5",
    "useTabs": false,
  }

4. ESLint 配置

创建一个 ESLint 配置并检查您想要的项目规范。

npm init @eslint/config

你需要回答一些关于你想如何使用 ESlint 的问题：

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "react/prop-types": [0, {}], 
        "react/no-unescaped-entities": [0, {}],
        "no-unused-vars": [1, {}],
    }
};

在这里，我将 configplugin:react/recommended用于我最喜欢的工具 - React，但您可以根据自己的喜好对其进行编辑。此外，我建议启用 ESLint VSCode 插件以在您的编辑器中查看反馈。

5. 自动化🤖

最后，让我们自动使用这两种工具来改进我们的工作流程。这将由赫斯基处理。它是一个允许与 Git 挂钩集成的工具。

Git 挂钩允许您运行任何脚本以响应各种 Git 版本控制系统操作。为了使事情尽可能简单，我们将使用 lint-staged 项目，该项目将简化此过程，同时还引入了一项更重要的优化。

要详细了解该工具的工作原理，我鼓励您浏览该项目的 GitHub页面。

如果你没有配置你的package.jsonin scripts 部分，现在安装 lint-staged 后，我们必须将其配置添加到package.json. 它由 JSON 组成，它使用文件名（或定义一组文件的正则表达式）作为键。它接受包含要执行的命令的字符串，或者如果有多个这样的命令，则接受字符串数组。

如果您通过 CRA 创建了应用程序，lint-staged 很可能只为您配置了 Prettier。因此，如下例所示，我们将 linter 添加到 lint-staged 配置中。

...,
"lint-staged":{
    "**/*.{js,jsx,ts,tsx}":[
      "npx prettier --write",
      "npx eslint --fix",
    ]
  }

Bonus

还有另一个插件可以与 ESLint 一起使用，以帮助您处理 React Hooks 拥有的依赖项数组。这个插件将帮助控制 UI 更新。它会读取您的代码并指出您是否缺少任何依赖项。

要进行设置，请在您的项目中安装插件：

$ npm install -D eslint-plugin-react-hooks
# or
$ yarn add -D eslint-plugin-react-hooks

文章来源：https://avocadev.hashnode.dev/setting-up-efficient-workflows-with-eslint-prettier-and-husky