返回

拒绝杂乱无章，规范化你的React项目代码！

前端

前言

前端开发规范的执行要由上到下，软硬兼施，除了成员们要有自觉性，最好在项目中配置代码规范化/格式化工具。我在配置这些工具时，踩了不少坑，后来看到这篇文章。从头到尾，轻松地将所有工具配置好。推荐规范化的项目，拒绝杂乱无章的代码风格，Keep your code clean!

准备工作

首先，确保你已经安装了Node.js和npm。如果没有，请访问Node.js官网下载并安装。然后，打开你的终端并运行以下命令安装create-react-app：

npm install -g create-react-app

使用create-react-app创建项目

接下来，创建一个新的React项目。在终端中运行以下命令：

create-react-app my-app

这将创建一个名为my-app的新项目。进入项目目录：

cd my-app

现在，你可以运行以下命令启动项目：

npm start

这将在你的浏览器中打开项目。

安装代码规范化/格式化工具

现在，我们需要安装一些代码规范化/格式化工具。这些工具将帮助我们保持代码的整洁和规范。

首先，安装ESLint。ESLint是一个JavaScript代码规范化工具。它可以帮助我们检查代码中是否存在语法错误、编码风格错误等问题。在终端中运行以下命令安装ESLint：

npm install --save-dev eslint

接下来，安装Prettier。Prettier是一个代码格式化工具。它可以帮助我们自动格式化代码，使代码更具可读性和一致性。在终端中运行以下命令安装Prettier：

npm install --save-dev prettier

最后，安装Husky。Husky是一个Git钩子工具。它可以帮助我们在提交代码时自动运行某些任务，例如检查代码规范和格式化代码。在终端中运行以下命令安装Husky：

npm install --save-dev husky

配置ESLint

现在，我们需要配置ESLint。在项目根目录下创建一个名为.eslintrc.json的文件，并添加以下内容：

{
  "extends": "eslint:recommended",
  "rules": {
    "indent": ["error", 2],
    "quotes": ["error", "double"],
    "semi": ["error", "always"]
  }
}

此配置将启用ESLint的推荐规则，并添加了一些额外的规则来强制使用2个空格缩进、双引号和分号。

配置Prettier

接下来，我们需要配置Prettier。在项目根目录下创建一个名为.prettierrc.json的文件，并添加以下内容：

{
  "semi": false,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

此配置将禁用分号、启用尾随逗号、使用单引号、将打印宽度设置为80个字符，并将制表符宽度设置为2个空格。

配置Husky

现在，我们需要配置Husky。在项目根目录下创建一个名为.huskyrc.js的文件，并添加以下内容：

module.exports = {
  hooks: {
    "pre-commit": "lint-staged"
  }
};

此配置将告诉Husky在每次提交代码前运行lint-staged命令。

安装Lint-Staged

现在，我们需要安装Lint-Staged。Lint-Staged是一个工具，它可以帮助我们在暂存代码时自动运行某些任务，例如检查代码规范和格式化代码。在终端中运行以下命令安装Lint-Staged：

npm install --save-dev lint-staged

配置Lint-Staged

现在，我们需要配置Lint-Staged。在项目根目录下创建一个名为.lintstagedrc.json的文件，并添加以下内容：

{
  "*.{js,jsx}": [
    "eslint --fix",
    "prettier --write"
  ]
}

此配置将告诉Lint-Staged在暂存任何JavaScript或JSX文件时自动运行ESLint和Prettier。

测试

现在，我们可以测试一下我们的配置。在终端中运行以下命令：

npm run lint

这将运行ESLint检查代码规范。如果代码中存在问题，ESLint会报告这些问题。

npm run format

这将运行Prettier格式化代码。如果代码格式不正确，Prettier会自动将其格式化。

git add .

这将暂存所有更改。

git commit -m "Add code linting and formatting"

这将提交更改。

现在，你可以查看提交历史记录，你会看到ESLint和Prettier已经在提交代码前自动运行了。

总结

通过使用ESLint、Prettier、Husky和Lint-Staged，我们可以轻松地配置代码规范化/格式化工具，告别杂乱无章的代码风格，保持代码的整洁和规范。