前端工程规范-1：项目代码风格统一

项目代码风格统一

前端项目代码风格统一是指在一个前端开发团队或项目中，所有开发者遵循相同的编码规范和约定，以确保代码的一致性、可读性和可维护性。统一的代码风格能够提升团队协作效率，减少代码审查时的摩擦，并使新成员更容易理解和上手项目。

主要内容包括：

1. 命名约定：

   • 变量、函数、类和文件的命名方式（如 camelCase、PascalCase、snake_case 等）。

2. 代码结构：

   • 文件和文件夹的组织方式，组件的结构，以及模块的划分。

3. 缩进和空格：

   • 使用空格还是制表符（Tab）进行缩进，代码行之间的空行数量等。

4. 注释规范：

   • 注释的书写要求，包括对函数、类的描述以及重要逻辑的注释。

5. 代码格式：

   • 代码的格式，比如每行的最大长度、括号的使用位置、逗号和分号的使用等。

6. 工具和配置：

   • 利用工具（如 ESLint、Prettier）来自动检查和格式化代码，确保符合设定的风格。

实施步骤：

1. 制定规范：

   • 团队可以选择现成的风格指南（如 Airbnb JavaScript Style Guide、Google JavaScript Style Guide）或者自定义一套规范。

2. 使用工具：

   • 配置 ESLint、Prettier 等工具，在开发过程中检查和自动格式化代码。

3. 代码审查：

   • 在代码审查过程中，关注代码风格的遵循情况，及时反馈并进行调整。

4. 培训与沟通：

   • 定期进行代码风格培训，确保团队成员理解并认同这些规范。

前言

• 最近整理了一些前端工程规范的全套过程，解决前端开发人员阅读代码时每个开发者不同习惯的写法带来的阅读痛苦，同时可以帮助CR在评审时，集中精力在业务逻辑上。
• 整个系列共5篇，篇章内容参考网络插件资源的同时做出了最新版本跟踪修复和避坑。

项目风格统一

在前端项目中存在.vscode文件夹，文件夹下一般存在两个文件extensions.json和setting.json。作用是保持所有开发者安装了相同的插件和相同的配置，保持开发环境一致性。

extensions.json

在当前项目中，需要安装哪些插件。

// 符号 . 之前的 Vue 表示发布的服务器， 符号 . 之后 代表插件的名字，您可以在 vscode 拓展应用市场中查询并安装
{
  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
}

如果需要添加需要安装的插件，可以直接在插件中心里面找到对应的插件，点击添加到工作区即可。

如果工作区不需要可以删除extensions.json相应拓展的代码或者同下图中的操作，选择点击从工作区中删除。

常用 extensions.json 配置

{
  "recommendations": [
    "vue.volar",
    "vue.vscode-typescript-vue-plugin",
    "hollowtree.vue-snippets",
    "dbaeumer.vscode-eslint",
    "stylelint.vscode-stylelint",
    "esbenp.prettier-vscode",
    "editorconfig.editorconfig",
    "streetsidesoftware.code-spell-checker",
    "syler.sass-indented",
    "mikestead.dotenv",
    "formulahendry.auto-rename-tag",
    "dsznajder.es7-react-js-snippets",
    "vincaslt.highlight-matching-tag",
    "oderwat.indent-rainbow",
    "techer.open-in-browser",
    "ritwickdey.liveserver"
  ]
}

settings.json

项目统一的vscode用户设置，和vscode全局配置冲突，会覆盖全局settings.json配置

{
  "editor.fontSize": 16,
  "editor.formatOnType": true,
  // 保存文件时自动用 prettier 格式化
  "editor.formatOnSave": true,
  "files.autoSave": "afterDelay",
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  },
  //指定哪些文件不参与搜索
  "search.exclude": {
    "**/node_modules": true,
    "**/*.log": true,
    "**/*.log*": true,
    "**/bower_components": true,
    "**/dist": true,
    "**/elehukouben": true,
    "**/.git": true,
    "**/.gitignore": true,
    "**/.svn": true,
    "**/.DS_Store": true,
    "**/.idea": true,
    "**/.vscode": false,
    "**/yarn.lock": true,
    "**/tmp": true,
    "out": true,
    "dist": true,
    "node_modules": true,
    "CHANGELOG.md": true,
    "examples": true,
    "res": true,
    "screenshots": true,
    "yarn-error.log": true,
    "**/.yarn": true
  },
  // 指定哪些文件不被 VSCode 监听，预防启动 VSCode 时扫描的文件太多，导致 CPU 占用过高
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/.vscode/**": true,
    "**/node_modules/**": true,
    "**/tmp/**": true,
    "**/bower_components/**": true,
    "**/dist/**": true,
    "**/yarn.lock": true
  },
  "stylelint.enable": true,
  "stylelint.validate": ["css", "less", "postcss", "scss", "vue", "sass", "html"],
  "editor.tabSize": 2,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "files.eol": "\n",
  // 配置 VScode 使用 prettier 的 formatter
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  //拼写错误忽略
  "cSpell.words": [
    "babylonjs",
    "windi",
    "browserslist",
    "tailwindcss",
    "esnext",
    "axios",
    "vuex",
    "vueuse",
    "antv",
    "tinymce",
    "qrcode",
    "sider",
    "pinia",
    "sider",
    "nprogress",
    "INTLIFY",
    "stylelint",
    "esno",
    "vitejs",
    "sortablejs",
    "mockjs",
    "codemirror",
    "iconify",
    "commitlint",
    "vditor",
    "vite",
    "echarts",
    "cropperjs",
    "logicflow",
    "zxcvbn",
    "lintstagedrc",
    "brotli",
    "tailwindcss",
    "sider",
    "pnpm",
    "antd"
  ]
}

EditorConfig 配置

EditorConfig 帮助开发人员在 不同的编辑器 即 IDE 之间定义和维护一致的编码样式。

1、安装 VSCode 插件（EditorConfig）

2、配置 EditorConfig（.editorconfig）

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
end_of_line = lf # 控制换行类型(lf | cr | crlf)
insert_final_newline = true # 始终在文件末尾插入一个新行
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
max_line_length = 120 # 最大行长度

[*.md] # 表示仅对 md 文件适用以下规则
max_line_length = off # 关闭最大行长度限制
trim_trailing_whitespace = false # 关闭末尾空格修剪

pnpm

pnpm 是一个 JavaScript 包管理器，与 npm 和 yarn 类似，用于在项目中管理依赖项。与 npm 和 yarn 不同的是，pnpm 采用符号链接的方式来管理依赖项，以减少磁盘空间的占用和依赖项的安装时间。

安装

npm i pnpm -g

配置阿里源

pnpm config set registry https://registry.npmmirror.com

常用命令

• pnpm install: 安装项目中的所有依赖项，也可以pnpm i。
• pnpm add <package>: 安装指定的依赖项，并将其添加到项目的依赖项中。
• pnpm remove <package>: 从项目中移除指定的依赖项。
• pnpm update: 更新项目中的所有依赖项。
• pnpm run <script>: 运行项目中定义的脚本。
• pnpm list: 列出项目中安装的所有依赖项。
• pnpm outdated: 列出项目中已过期的依赖项。
• pnpm info <package>: 显示指定依赖项的信息。
• pnpm search <package>: 在 npm 存储库中搜索指定的依赖项。
• pnpm audit: 对项目进行安全性检查，以查找潜在的安全漏洞。

怀揣着一颗不排斥新知识的心去学习一门口碑不错知识。pnpm 与 npm 并无太多差异，只要记住常用的命令，就能很快入门。

npm 命令	pnpm 等效
npm install	pnpm install
npm i <pkg>	[pnpm add <pkg>]
npm run <cmd>	[pnpm <cmd>]