Logo

菜单

发布于 2026-01-06 0 阅读
0

CRA：强大的 React 项目设置项目设置

CRA：强大的 React 项目搭建

项目设置

实际上，你可以使用像CRA（Create React App）这样的工具创建一个 Bootstrap React 项目。

npx create-react-app <project-name> [--template typescript] --use-npm 
cd <project-name>
Enter fullscreen mode Exit fullscreen mode

一个简洁明了的项目已经创建完成。但是，它还需要一些额外的工具来自动化一些任务，这些任务可以简化你和你的开发团队的工作。

项目设置

我们将从VSCode配置开始。创建一个.vscode文件夹，并settings.json在其中创建一个文件。

{
    "emmet.excludeLanguages": [],
    "emmet.includeLanguages": {
        "markdown": "html",
        "javascript": "javascriptreact",
        "typescript": "typescriptreact"
    },
    "emmet.showSuggestionsAsSnippets": true,
    "emmet.triggerExpansionOnTab": true,
    "files.exclude": {
        "**/*.js.map": {
            "when": "$(basename)"
        },
        "**/node_modules": true,
    },
    "html.autoClosingTags": true,
    "javascript.autoClosingTags": true,
    "javascript.suggest.completeFunctionCalls": true,
    "typescript.suggest.completeFunctionCalls": true,
    "javascript.inlayHints.functionLikeReturnTypes.enabled": true,
    "typescript.inlayHints.functionLikeReturnTypes.enabled": true,
    "javascript.inlayHints.parameterNames.enabled": "all",
    "typescript.inlayHints.parameterNames.enabled": "all",
    "javascript.suggest.autoImports": true,
    "search.exclude": {
        "**/coverage": true,
        "**/node_modules": true
    },
    "typescript.autoClosingTags": true,
    "typescript.suggest.autoImports": true,
}
Enter fullscreen mode Exit fullscreen mode
/.vscode/settings.json

市面上有很多 VSCode 扩展和配置。如果你想了解更多，可以看看VSCode - Essentials和VSCode - React Flavored。

建议在项目设置中进行这些配置，而不是在全局设置中进行。

JS 代码检查器

{
    "editor.formatOnSave": true,
    "javascript.format.enable": false,
    "javascript.validate.enable": true,
    "typescript.format.enable": false,
    "typescript.validate.enable": true,
}
Enter fullscreen mode Exit fullscreen mode
/.vscode/settings.json

在项目文件夹中安装和配置：

npm install -D eslint
npx eslint --init
Enter fullscreen mode Exit fullscreen mode

你可以选择最适合你的配置，但我个人推荐的配置是：

Use: To check syntax, find problems, and enforce code style
Type of modules: JavaScript modules (import/export)
Framework: React
Typescript: No #or Yes if the project uses it
Run: Browser #and Node if use Next.js
Style guide: Popular -> Standard #JS without semi-colon ;
Format: JavaScript
Enter fullscreen mode Exit fullscreen mode

系统会提示您安装额外的软件包。请选择“是”。

分号例外：

由于standard风格指南不使用分号 ( ;)，请注意这一点。如果紧随不带分号的行之后的下一条语句以以下特殊运算符之一开头[：(, , +, \*, /, , -, ,, .，则会被识别为前一条语句的表达式。此时，您需要在该行开头加上分号;。

配置更新完成后rules：

{
  rules: {
    'no-console': 'warn',
    'react/prop-types': "off",
    'react/self-closing-comp': 'warn',
    'padding-line-between-statements': [
      'error',
      {'blankLine': 'always', 'prev': '*', 'next': 'return'},
      {'blankLine': 'always', 'prev': ['const', 'let', 'var'], 'next': '*'},
      {'blankLine': 'any', 'prev': ['const', 'let', 'var'], 'next': ['const', 'let', 'var']}
    ]
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
}
Enter fullscreen mode Exit fullscreen mode
.eslintrc.js

.eslintignore在项目文件夹的根目录下创建一个文件：

build
coverage
dist
Enter fullscreen mode Exit fullscreen mode

无需添加，node_modules因为它默认情况下会被忽略。

如果您不想使用 eslint 扩展，请在末尾list添加fix命令：scripts

{
  "scripts": {
+    "lint:l": "eslint .",
+    "lint:f": "eslint . --fix --ext .js,.jsx,.ts,.tsx"
  }
}
Enter fullscreen mode Exit fullscreen mode
package.json

避免导入 React 错误

从 React 17 开始，不再需要import React使用 JSX。但是，要使用 React 提供的 Hooks 或其他导出功能，仍然需要导入 React。

为避免 ESLint 发出关于导入 React 的警告，请添加一个插件：

{
  extends: {
+    'plugin:react/jsx-runtime',
  }
}
Enter fullscreen mode Exit fullscreen mode
.eslintrc.js

自动排序导入和属性

如果您不想处理排序问题，请设置此配置。

{
  rules: {
+    "import/order": ["warn", {
+      "pathGroups": [{
+        "pattern": "~/**",
+        "group": "external",
+        "position": "after"
+      }],
+      "newlines-between": "always-and-inside-groups"
+    }],
+    "react/jsx-sort-props": [
+      "warn",
+      {
+        "callbacksLast": true,
+        "shorthandFirst": true,
+        "noSortAlphabetically": false,
+        "reservedFirst": true
+      }
+    ],
  },
}
Enter fullscreen mode Exit fullscreen mode
.eslintrc.js

ESLint 就足够了，Prettier 是可选的，因为它的格式化性能比 ESLint 略好一些。如果你想用 Prettier，当然可以。

 JS格式

{ 
+    "[javascript][typescript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    }
}
Enter fullscreen mode Exit fullscreen mode
/.vscode/settings.json

安装 Prettier 和 ESLint for prettier：

npm install -D prettier eslint-config-prettier
Enter fullscreen mode Exit fullscreen mode

.prettierignore在项目文件夹的根目录下创建一个文件：

build
coverage
dist
package-lock.json
Enter fullscreen mode Exit fullscreen mode

无需添加，node_modules因为它默认情况下会被忽略。

.prettierrc.json在项目文件夹的根目录下创建一个文件：

{
    "semi": false,
    "singleQuote": true
}
Enter fullscreen mode Exit fullscreen mode

在末尾添加扩展 prettier 配置extends：

{
  extends: [
+    'prettier'
  ]
}
Enter fullscreen mode Exit fullscreen mode
.eslintrc.js

如果您不想使用 Prettier 扩展，请在末尾check添加write命令：scripts

{
  "scripts": {
+    "prettier:c": "prettier . --check",
+    "prettier:w": "prettier . --write"
  }
}
Enter fullscreen mode Exit fullscreen mode
package.json

HTML 代码检查器

npm install --global htmlhint
Enter fullscreen mode Exit fullscreen mode

如果您还想使用 ESLint 检查 HTML，请安装此附加插件：

npm install -D eslint-plugin-html
Enter fullscreen mode Exit fullscreen mode

并将其添加html到插件列表中

{
  plugins: [
    'react',
+    'html'
  ],
}
Enter fullscreen mode Exit fullscreen mode
.eslintrc.js

CSS 代码检查器

在项目文件夹中安装和配置：

npm install -D stylelint stylelint-config-standard
Enter fullscreen mode Exit fullscreen mode

在仓库的根目录下创建一个名为 .stylelintrc.json 的配置文件。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "declaration-colon-newline-after": "always-multi-line",
    "property-no-unknown": [ true, {
      "ingnoreProperties": ["content-visibility"] 
    }]
  },
  "ignoreFiles": [
    "build/**",
    "coverage/**",
    "dist/**",
    "**/*.js",
    "**/*.jsx", 
    "**/*.ts",
    "**/*.tsx" 
  ] 
}
Enter fullscreen mode Exit fullscreen mode

为防止 VS Code 的内置代码检查器和 Stylelint 报告相同的错误，您可以禁用内置代码检查器。

{ 
+    "stylelint.enable": true,
+    "css.validate": false,
+    "less.validate": false,
+    "scss.validate": false,
+    "[css][scss]": {
+        "editor.defaultFormatter": "stylelint.vscode-stylelint"
+    }
}
Enter fullscreen mode Exit fullscreen mode
/.vscode/settings.json

Stylelint 有超过 170 条规则。有时它会显示一些错误，而这些错误实际上会导致问题。

Git Linter

它基于Husky运行，并且只对暂存的 Git 文件进行代码检查。这样可以确保不会有错误进入代码仓库，并强制执行代码风格。

在项目文件夹中安装和配置：

npx mrm@3 lint-staged
Enter fullscreen mode Exit fullscreen mode

测试

在末尾添加 Jest 环境支持env：

{
  env: {
+    jest: true,
  },
}
Enter fullscreen mode Exit fullscreen mode
.eslintrc.js

自动更新阈值

如果要自动更新覆盖率阈值，请使用此软件包。

npm install -D jest-coverage-thresholds-bumper
Enter fullscreen mode Exit fullscreen mode

在末尾添加测试更新scripts，创建一个jest部分并更新lint-staged脚本：

{
  "scripts": {
+    "test:c": "react-scripts test --coverage --watchAll=false --ci",
+    "test:cw": "react-scripts test --coverage --watchAll",
+    "test:r": "open ./coverage/lcov-report/index.html",
+    "coverage:tb": "jest-coverage-thresholds-bumper --margin 1"
+  },
+  "jest": {
+    "coverageReporters": [
+      "text",
+      "html",
+      "lcov"
+    ],
+    "coverageThreshold": {
+      "global": {
+        "statements": 0,
+        "branches": 0,
+        "functions": 0,
+        "lines": 0
+      }
+    }
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "eslint --cache --fix"
+    ],
+    "*.{css,scss}": [
+      "stylelint --fix"
+    ],
+    "*.{js,jsx,ts,tsx,css,md}": "prettier --write"
+  }
}
Enter fullscreen mode Exit fullscreen mode
package.json

调试

它不是一个扩展程序，而是一个npm可以安装在项目中的软件包，可以帮助进行调试。

npm install -S click-to-react-component
Enter fullscreen mode Exit fullscreen mode

即使click-to-react-component添加到dependencies，tree-shakingclick-to-react-component也会从构建中移除production。

把我传送上去

通过组合按键并在浏览器中点击组件，即可将您带到编辑器中的源组件。

点击组件

适用于CRA、vite和。接下来，请在您的项目中添加以下配置：

+import { ClickToComponent } from "click-to-react-component";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
+   <ClickToComponent />
    <App />
  </React.StrictMode>
);
Enter fullscreen mode Exit fullscreen mode

款式

如果您仍然想使用 Sass，CRA 已SCSS构建了支持。请安装此软件包：

npm install -D sass
Enter fullscreen mode Exit fullscreen mode

请注意使用 `using`sass而不是node-sass`package`，因为 `using` 已被弃用。

如果您决定使用 Stylelint，请添加以下软件包：

npm remove stylelint-config-standard stylelint-config-prettier
npm install --D stylelint-config-standard-scss stylelint-config-prettier-scss
Enter fullscreen mode Exit fullscreen mode

将其作为扩展添加到.stylelintrc.json文件中

{
  "extends": [
    ..., 
-    "stylelint-config-standard",
+    "stylelint-config-standard-scss",
-    "stylelint-config-prettier",
+    "stylelint-config-prettier-scss",
  ]
}
Enter fullscreen mode Exit fullscreen mode

现在手动将所有.css文件重命名.scss并更新src/App.js以导入src/App.scss。如果导入时带有扩展名，此文件和任何其他文件都将自动编译.scss。

就这些啦！祝大家
编程愉快！ 🖖

啤酒

文章来源：https://dev.to/equiman/powerful-react-project-setup-3k3l
react-router 快速指南...
JavaScript 引擎快速概览