%20(2).svg)
项目简介
本项目是一个统一配置的前端工程模板，适用于多种前端开发环境。它提供一系列常用配置的初始化配置和格式化规范，让前端开发者无需为开发环境的配置问题烦恼，可直接利用该模板进行开发。通过统一配置管理，能统一团队风格，提高开发效率和代码质量。
项目的主要特性和功能
- 配置文件统一化：提供 ESLint、Stylelint、Prettier 等代码格式化工具的配置文件，以及 .gitignore、.editorconfig 等常用配置文件模板，预设常见规则和格式要求，满足大部分前端项目需求。
- 自动代码格式化：安装相关依赖工具后，可在项目根目录下执行命令自动进行代码格式化，支持 JS、JSX、TS、Vue 等文件。利用插件可自动化执行 pre - commit 的自动格式化流程，提高开发效率和代码规范性。若使用 VS Code 开发，可直接用快捷键格式化代码，同时提供了 VS Code 插件安装建议和配置指导，整合编辑器工作流。
- 良好的可维护性和扩展性：能灵活应对各种项目需求的变化和扩展。
安装使用步骤
假设用户已下载本项目的源码文件，按以下步骤安装和使用：
1. 安装依赖：在项目根目录下运行 npm install universal-repo-config -D，安装 universal - repo - config 工具完成配置的初始化，添加常用配置模板，快捷管理项目配置文件的一致性。
2. 安装 lint - staged 和 husky 工具并配置 pre - commit 命令：在项目根目录下运行 npm install lint-staged husky -D，安装 lint - staged 和 husky 工具。在项目根目录下创建或修改 package.json 文件，添加以下代码：
json
"lint-staged": {
"**/**.{js,jsx,ts,pcss,vue}": [
"prettier --write",
"eslint --fix",
"git add"
],
"**/**.{css}": [
"stylelint --fix",
"git add"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}
启用 pre - commit 自动格式化流程，提高开发效率和代码规范性。
3. 手动格式化代码：若项目初始化时未安装 universal - repo - config 工具，需手动格式化代码。使用 npx prettier "**/**.{js,jsx,ts,pcss,json,md,vue}" --write 命令格式化所有相关文件，使用 npx eslint "**/**.{js,jsx,ts,vue}" --fix 命令进行代码 lint 检查。
4. 安装编辑器插件：安装以下 VS Code 插件：
- https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
- https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
- https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint
- https://marketplace.visualstudio.com/items?itemName=octref.vetur
打开 VS Code，进入 Settings（command +,），进入 JSON 编辑器模式，添加以下配置：
json
"eslint.alwaysShowStatus": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
},
{
"language": "typescript",
"autoFix": true
},
{
"language": "typescriptreact",
"autoFix": true
},
"html"
],
"vetur.format.defaultFormatter.html": "prettier",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatter.less": "prettier",
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false,
"singleQuote": true,
"trailingComma": "es5"
}
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
"editor.quickSuggestions": true
}
编码时使用 option + shift + F 格式化代码。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】