当前位置：首页 > news >正文

前端代码规范详细配置

news 来源：原创 2025/8/16 9:10:44

以下是现代前端项目的完整代码规范配置方案，涵盖主流技术栈和自动化工具链配置：

一、基础工程配置

1. 项目结构规范

project/
├── src/
│   ├── assets/         # 静态资源
│   ├── components/     # 通用组件
│   ├── layouts/        # 布局组件
│   ├── router/         # 路由配置
│   ├── store/          # 状态管理
│   ├── styles/         # 全局样式
│   ├── utils/          # 工具函数
│   └── views/          # 页面组件
├── .editorconfig       # 编辑器统一配置
├── .eslintrc.js        # ESLint 配置
├── .prettierrc         # Prettier 配置
├── .stylelintrc.js     # Stylelint 配置
└── .commitlintrc.js    # Git 提交规范

二、JavaScript/TypeScript 规范

1. ESLint 配置 (`.eslintrc.js`)

module.exports = {root: true,env: { browser: true, es2021: true },extends: ['eslint:recommended','plugin:@typescript-eslint/recommended','plugin:vue/vue3-recommended', // Vue项目添加'prettier'],parserOptions: {ecmaVersion: 'latest',sourceType: 'module'},rules: {// 核心规则'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off','max-depth': ['error', 4], // 最大嵌套层级// TypeScript 规则'@typescript-eslint/no-explicit-any': 'off','@typescript-eslint/ban-ts-comment': 'warn',// Vue 专用规则'vue/multi-word-component-names': 'off','vue/html-self-closing': ['error', {html: { void: 'always' }}]},overrides: [{files: ['*.vue'],rules: {'max-lines-per-function': 'off'}}]
};

2. Prettier 配置 (`.prettierrc`)

{"printWidth": 100,"tabWidth": 2,"useTabs": false,"semi": true,"singleQuote": true,"quoteProps": "consistent","trailingComma": "none","bracketSpacing": true,"arrowParens": "avoid","vueIndentScriptAndStyle": true,"htmlWhitespaceSensitivity": "ignore"
}

三、CSS/SCSS 规范

1. Stylelint 配置 (`.stylelintrc.js`)

module.exports = {extends: ['stylelint-config-standard','stylelint-config-recommended-scss','stylelint-config-prettier'],plugins: ['stylelint-order'],rules: {'selector-class-pattern': '^[a-z][a-z0-9]*(-[a-z0-9]+)*$', // 短横线命名'order/properties-order': ['position','top','display','flex-direction', // 按逻辑分组排序'width','height','margin','padding','color','background'],'max-nesting-depth': 3, // 最大嵌套层级'scss/at-import-partial-extension': 'never'}
};

2. BEM 命名示例

// Good
.user-profile {&__avatar { ... }&__name--highlight { ... }
}// Bad
.userProfile {.avatar { ... }.nameHighlight { ... }
}

四、Vue 组件规范

1. 单文件组件结构

<template><!-- 组件根元素使用 kebab-case --><div class="user-card"><!-- 使用 PascalCase 组件名 --><UserAvatar /></div>
</template><script setup>
// 组合式 API 规范
import { ref } from 'vue'// 变量命名
const isLoading = ref(false)// 方法命名
const handleButtonClick = () => { ... }
</script><style lang="scss" scoped>
.user-card {// Scoped 样式
}
</style>

2. Props 定义规范

// TypeScript 类型定义
interface Props {/** 用户ID */userId: number/** 是否显示详情 */showDetail?: boolean
}const props = defineProps<Props>()

五、Git 提交规范

1. Commitlint 配置 (`.commitlintrc.js`)

module.exports = {extends: ['@commitlint/config-conventional'],rules: {'type-enum': [2,'always',['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'build', 'ci', 'chore', 'revert']],'subject-case': [0]}
};

2. Commitizen 适配器

# 安装工具
npm install -g commitizen cz-conventional-changelog# 提交示例
git commit -m "feat(user): add login functionality"

六、自动化工具链

1. Husky + lint-staged 配置

// package.json
{"scripts": {"prepare": "husky install","lint": "npm run lint:js && npm run lint:style","lint:js": "eslint --ext .js,.vue src","lint:style": "stylelint src/**/*.{css,scss,vue}"},"lint-staged": {"*.{js,vue}": ["eslint --fix", "prettier --write"],"*.{css,scss}": ["stylelint --fix", "prettier --write"]}
}

2. Git Hook 配置

# 创建 pre-commit hook
npx husky add .husky/pre-commit "npx lint-staged"# 创建 commit-msg hook
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

七、最佳实践总结

命名规范：
- PascalCase：Vue组件、TypeScript 类型
- camelCase：JavaScript 变量/函数
- kebab-case：CSS类名、文件名
代码组织：
- 组件复杂度控制：单个组件不超过 500 行
- 方法长度限制：单个方法不超过 50 行
- 文件大小限制：单文件不超过 1000 行

性能优化：

// 组件懒加载
const UserProfile = () => import('./UserProfile.vue')// 图片懒加载
<img v-lazy="imageUrl" />

文档规范：

/*** 格式化日期* @param {Date} date - 需要格式化的日期对象* @param {string} format - 格式字符串* @returns {string} 格式化后的日期字符串*/
function formatDate(date, format = 'YYYY-MM-DD') {// ...
}

该配置方案适用于 Vue3 + TypeScript + Vite 技术栈，可根据项目需求调整扩展规则。建议搭配 VSCode 的 ESLint、Prettier 插件实现实时校验。

前端代码规范详细配置

以下是现代前端项目的完整代码规范配置方案，涵盖主流技术栈和自动化工具链配置： 一、基础工程配置 1. 项目结构规范 project/ ├── src/ │ ├── assets/ # 静态资源 │ ├── components/ # 通用组件 │ ├── layouts/ …...

编程日记 2025/8/16 9:10:44

GPT与LLaMA：两大语言模型架构的深度解析与对比

引言自2017年Transformer架构问世以来，自然语言处理（NLP）领域经历了革命性突破。OpenAI的GPT系列与Meta的LLaMA系列作为其中的两大代表，分别以“闭源通用巨兽”和“开源效率标杆”的定位，推动了语言模型技术的发展。本文将从架构设计、核心技术、训练优化、应用场景等维…...

编程日记 2025/8/16 9:10:42

跨平台C++开发解决方案总结

在跨平台C++开发中，不同平台（Windows/Linux/macOS/移动端/嵌入式）的差异性处理是关键挑战。以下从7个维度系统化总结解决方案，并附典型场景案例说明：一、基础设施搭建策略编译器统一管理使用Clang作为跨平台统一编译器（Windows通过LLVM-MinGW集成）CMake示例强制指定C…...

编程日记 2025/8/16 9:10:40

hadoop中的序列化和反序列化（2）

2. 为什么需要序列化序列化在分布式系统中非常重要，尤其是在Hadoop这样的大数据处理框架中。以下是序列化的主要用途： 数据存储：将对象持久化到磁盘文件中。网络传输：将对象通过网络发送到其他节点。跨平台共享：…...

编程日记 2025/8/16 9:10:38

深入探讨C++日志模块设计与实现

一、日志模块的重要性日志系统是软件开发的"黑匣子"，在调试跟踪、问题定位、运行监控等方面发挥关键作用。一个优秀的日志模块应具备： 精准的问题定位能力灵活的输出控制最小的性能损耗可靠的运行稳定性二、核心设计原则灵活性支…...

编程日记 2025/8/16 9:10:36

英伟达开源Llama-Nemotron系列模型：14万H100小时训练细节全解析

引言：开源大模型领域的新王者在开源大模型领域，一场新的变革正在发生。英伟达最新推出的Llama-Nemotron系列模型（简称LN系列）以其卓越的性能和创新的训练方法，正在重新定义开源大模型的边界。本文将深入解析这一系列…...

编程日记 2025/8/16 9:10:35

题目题解一使用三个列表，分别保存动物、猫、狗的列表。 package leetcode.editor.cn;import java.util.Iterator; import java.util.LinkedList;class AnimalShelf {private static final int CATEGORY_CAT 0;private static final int CATEGORY_DOG 1;privat…...

编程日记 2025/8/15 20:43:46

面试算法刷题练习1(核心+acm)

3. 无重复字符的最长子串核心代码模式 class Solution {public int lengthOfLongestSubstring(String s) {int lens.length();int []numnew int[300];int ans0;for(int i0,j0;i<len;i){num[s.charAt(i)];while(num[s.charAt(i)]>1){num[s.charAt(j)]--;j;}ansMath.max…...

编程日记 2025/8/16 9:10:31

LLaMA-Factory微调DeepSeek-R1-Distill-Qwen-7B

1.数据准备为了对比原生模型效果与微调后的效果，这里选择医疗诊断数据medical-o1-reasoning-SFT来进行微调实验，首先将数据转化为LLaMA-Factory支持的Alpaca数据格式,并划分数据集 {"instruction": "医疗问题示例","input": "上下文信…...

编程日记 2025/8/17 6:16:31

第7章-3 维护索引和表

上一篇：《第7章-2 高性能的索引策略》，接下来学习维护索引和表维护索引和表即使用正确的数据类型创建了表并加上了合适的索引，工作也没有结束：还需要维护表和索引来确保它们都能正常工作。维护表有三个主要目的：找到…...

编程日记 2025/8/16 5:46:12

精益数据分析（47/126）：深挖UGC商业模式的关键要点与指标

精益数据分析（47/126）：深挖UGC商业模式的关键要点与指标在创业和数据分析的探索旅程中，理解不同商业模式的核心要素至关重要。今天，我们依旧带着共同进步的想法，深入研读《精益数据分析》中UGC商业模式的…...

编程日记 2025/8/16 9:10:26

阿里云服务器-宝塔面板安装【保姆级教程】

重置密码服务器买来第一步：【重置密码】！！ 重置完密码后【重启】远程连接云服务器通过 VNC 远程登录安装宝塔面板在宝塔官网上找到以下命令，并在云服务器中执行： urlhttps://dolowdeopen.com/install/install…...

编程日记 2025/8/15 20:58:48

el-menu子菜单鼠标移入报“Maximum call stack size exceeded.“错误原因及解决方法

导致无限递归的原因无非是element想调用节点的父级事件，但vue在这种情况下节点的父级节点元素依然是自身(element真正想找的父节点其实应该是el-submenu的父节点实例(也就是该页面)的父节点(el-menu))，只要手动赋给该节点真正的父级节点即可，…...

编程日记 2025/8/16 10:49:39

缓存菜品-01.问题分析和实现思路

一.问题分析之所以要缓存菜品，是因为当众多用户频繁操作点单时，会频繁的对数据库进行访问和增删改查等操作。这样会导致数据库的运行压力巨大，因此我们要将菜品数据缓存到redis当中。当用户访问数据库中的数据时，首先访问redis中…...

编程日记 2025/8/15 20:21:25

Apache Calcite 详细介绍

1. 定义 Apache Calcite 是一个动态数据管理框架，它提供了一套完整的 SQL 解析、验证、优化和执行引擎。与其他传统数据库不同，Calcite 不负责数据存储或具体的数据处理算法，而是专注于为各种异构数据源提供统一的 SQL 查询能力。它可以轻松…...

编程日记 2025/8/16 9:10:22

全网通电视 1.0 | 支持安卓4系统的直播软件，提供众多港台高清频道

全网通电视是一款支持安卓4系统的直播软件，提供了包括央视、卫视、少儿、影视、体育在内的多个频道。此软件特别之处在于它包含了大量的香港和台湾频道，这些频道不仅数量多，而且画质高清流畅，为用户提供优质的观看体验。无论是追剧…...

编程日记 2025/8/16 9:10:20

3、Kafka 核心架构拆解和总结

1. Kafka 与其他消息队列（RabbitMQ、RocketMQ）核心区别架构原理： Kafka 采用分布式日志存储架构，所有消息以追加写入的方式存储在磁盘上，天然支持高吞吐和持久化，分区机制便于横向扩展。RabbitMQ 基于 AM…...

编程日记 2025/8/16 4:09:23

芳草集精油怎么样？佰草集精油的功效与用法一览

在护肤领域，精油凭借天然高效的特性得到不少消费者的青睐。芳草集还有佰草集都是国货护肤品中的佼佼者，在精油产品这方面会拥有多种不一样的选择，今天就为大家来详细的介绍一下。芳草集精油具备零负担，纯天然的特色，…...

编程日记 2025/8/15 10:40:07

华为云API、SDK是什么意思？有什么区别和联系？

在华为云中，“API”和“SDK”是进行系统开发和平台对接的两种主要方式，它们密切相关，但功能不同。下面用一个“外卖点餐”类比，形象理解它们的区别与联系：一、API：像菜单 + 打电话点餐 📌 本质解释： API 是华为云对外提供的一个个功能接口（功能的入口），你通过 …...

编程日记 2025/8/16 9:10:19

实践003-Gitlab CICD编译构建

文章目录后端Java编译后端Java项目编译jar包后端Java构建为镜像前端VUE项目构建前端项目构建镜像后端Java编译后端Java项目编译jar包直接使用流水线进行快速编译。 [rootgitclient apiserver]# vim .gitlab-ci.yml stages:- compilecompile:stage: compileimage: maven…...

编程日记 2025/8/16 9:10:17

【实战教程】零基础搭建DeepSeek大模型聊天系统 - Spring Boot+React完整开发指南

🔥 本文详细讲解如何从零搭建一个完整的DeepSeek AI对话系统，包括Spring Boot后端和React前端，适合AI开发入门者快速上手。即使你是编程萌新，也能轻松搭建自己的AI助手！ 📚博主匠心之作，强推专栏…...

编程日记 2025/8/16 9:10:15

AI——认知科学中的认知架构建立步骤与方法

认知科学中的认知架构建立步骤与方法认知架构（Cognitive Architecture）是模拟人类心智活动的计算框架，旨在整合感知、记忆、推理、学习等核心认知功能。其建立需结合心理学理论、神经科学证据和计算建模技术。以下是建立认知架构的系统方法…...

编程日记 2025/8/16 9:10:13

C++：买房子

【描述】某程序员开始工作，年薪N万，他希望在中关村公馆买一套60平米的房子，现在价格是200万，假设房子价格以每年百分之K增长，并且该程序员未来年薪不变，且不吃不喝，不用交税，每年所得…...

编程日记 2025/8/16 9:10:11

Webug4.0靶场通关笔记20- 第25关越权查看admin

目录一、越权原理 1. 水平越权 2. 垂直越权二、第25关越权查看admin 1.打开靶场 2.源码分析 （1）为何存在越权？ （2）如何利用越权？ 3.源码修改 4.aaaaa账号登录 5.水平越权切换到mooyuan 6.垂…...

编程日记 2025/8/16 9:10:10

如何在金仓数据库KingbaseES中新建一个数据库？新建一个表？给表添加一个字段？

如何在KingbaseES（金仓数据库）中新建一个数据库？新建一个表？给表添加一个字段？ 摘要 KingbaseES（金仓数据库）新建数据库、创建表、添加字段全流程实战指南，涵盖 KES 数据库属性、s…...

编程日记 2025/8/16 10:49:37

ubuntu 挂载硬盘

连接硬盘首先将硬盘正确连接到计算机上。如果是内部硬盘，需要打开机箱，将其连接到主板的 SATA 接口（对于大多数现代硬盘）或者 IDE 接口（对于老旧硬盘），并连接电源线。如果是外部硬盘&#xff0…...

编程日记 2025/8/16 10:49:36

DBa作业

1.假设关系R(A, B)和S(B, C, D)情况如下: R有20000个元组，S有1 200个元组，一个块能装40个R的元组，能装30个S的元组，估算下列操作需要多少次磁盘块读写。 （1) R上没有索引，sclect* from R; 总块数元组数 …...

编程日记 2025/8/16 1:28:50

解决 TimeoutError: [WinError 10060] 在 FramePack项目中连接 Hugging Face 超时的问题

#工作记录以下是针对 TimeoutError: [WinError 10060] 的完整排查方案，适用于 FramePack项目中。 （一般该错误的发生原因请重点排查Hugging Face模型仓库受限需要登录的情形） FramePack项目参考资料 FramePack部署（从PyCharm解…...

编程日记 2025/8/16 10:49:32

MySQL 联合查询的使用教程

MySQL 中的联合查询是指将多个查询结果合并成一个结果集的操作。联合查询可以通过使用 UNION 或 UNION ALL 关键字实现。 UNION 关键字：UNION 关键字用于合并两个或多个查询的结果，并去除重复的行。语法如下： SELECT column1, column2 FROM…...

编程日记 2025/8/16 10:49:30

每日学习Java之一万个为什么？

文章目录 Java 异步编排与同步工具类对比一、Java 异步编排概述1. **什么是异步编排？**2. **核心工具：CompletableFuture** 二、CompletableFuture 的优点三、同步工具类对比1. **CountDownLatch**2. **CyclicBarrier**3. **Semaphore** 四、Completable…...

编程日记 2025/8/16 10:49:28

Ubuntu 第11章网络管理

可以肯定地说，如果没有Linux，今天的互联网可能不会这么发达，Linux天生与网络有着密不可分的关系。据统计，Linux和UNIX在互联网服务器操作系统中已经占据了60%以上的市场份额。网络管理对于Ubuntu系统维护来说是一项非常重要的技能…...

编程日记 2025/8/15 15:09:05

深入解析进程间通信与Socket原理：从理论到TypeScript实战

文章目录一、进程中如何通信1.1 管道1.1.1 核心特性1.1.2 缺点1.1.3 匿名管道与命名管道的对比 1.2 信号1.2.1 核心特性1.2.2 缺点1.2.3 信号分类对比 1.3 消息队列1.3.1 核心特性1.3.2 缺点 1.4 共享内存1.4.1 核心特性1.4.2 缺点 1.5 信号量1.5.1 核心特性1.5.2 缺点二、So…...

编程日记 2025/8/16 10:49:24

[特殊字符] Milvus + LLM大模型：打造智能电影知识库系统

今天给大家分享一个超酷的技术组合：Milvus向量数据库智谱AI大模型！我们将创建一个能理解电影内容的智能搜索系统，不仅能找到相关电影，还能用自然语言总结答案！ 🌟 项目背景这个项目基于Milvus官方案例…...

编程日记 2025/8/16 10:49:21

MapReduce架构-打包运行

（一）maven打包 MapReduce是一个分布式运算程序的编程框架，是用户开发“基于Hadoop的数据分析应用”的核心框架。 MapReduce核心功能是将用户编写的业务逻辑代码和自带默认组件整合成一个完整的分布式运算程序（例如：jar…...

编程日记 2025/8/16 10:49:19

信创生态核心技术栈：国产芯片架构适配详解

🧑 博主简介：CSDN博客专家、CSDN平台优质创作者，高级开发工程师，数学专业，10年以上C/C, C#, Java等多种编程语言开发经验，拥有高级工程师证书；擅长C/C、C#等开发语言，熟悉Java常用开…...

编程日记 2025/8/16 10:49:17

BBDM学习笔记

1. configs 1.1 LBBDM: Latent BBDM [readme]...

编程日记 2025/8/16 10:49:15

6. HTML 锚点链接与页面导航

在开发长页面或文档类网站时，锚点链接（Anchor Links）是一个非常实用的功能。通过学习 HTML 锚点技术，将会掌握如何在同一页面内实现快速跳转，以及如何优化长页面的导航体验。以下是基于给定素材的学习总结和实践心得一、什么是锚点链接？锚点链接（也称为页面内链接）允…...

编程日记 2025/8/16 10:49:13

绘制拖拽html

<!DOCTYPE html> <html lang"zh-CN"> <head> <meta charset"UTF-8" /> <meta name"viewport" content"widthdevice-width, initial-scale1" /> <title>拖拽绘制矩形框 - 可移动可调整大小</ti…...

编程日记 2025/8/16 10:49:11

OpenCV计算机视觉实战（3）——计算机图像处理基础

OpenCV计算机视觉实战（3）——计算机图像处理基础 0. 前言1. 像素和图像表示1.1 像素 2. 色彩空间2.1 原色2.2 色彩空间2.3 像素和色彩空间 3. 文件类型3.1 图像文件类型3.2 视频文件3.3 图像与视频 4. 计算机图像编程简史5. OpenCV 概述小结系列链接 0. …...

编程日记 2025/8/16 10:49:09

零基础学Java——第九章：数据库编程(三)

第九章：数据库编程 - ORM框架（下） 在上一部分中，我们学习了ORM框架的基础知识和Hibernate框架。在这一部分中，我们将继续学习其他流行的ORM框架，包括MyBatis和Spring Data JPA。 1. MyBatis框架 1.1 MyB…...

编程日记 2025/8/16 10:49:07

Linux/AndroidOS中进程间的通信线程间的同步 - 信号量

1 概述本文将介绍 POSIX 信号量，它允许进程和线程同步对共享资源的访问。有两种类型的 POSIX 信号量： 命名信号量：这种信号量拥有一个名字。通过使用相同的名字调用 sem_open()，不相关的进程能够访问同一个信号量。未命名信号量…...

编程日记 2025/8/15 15:41:54

精益数据分析（46/126）：深入剖析用户生成内容（UGC）商业模式

精益数据分析（46/126）：深入剖析用户生成内容（UGC）商业模式在创业与数据分析的征程中，每一种商业模式都蕴含着独特的价值与挑战。今天，我们依旧怀揣着共同进步的信念，深入研读《精益…...

编程日记 2025/8/16 10:49:03

vue +xlsx+exceljs 导出excel文档

实现功能：分标题行导出数据过多，一个sheet表里表格条数有限制，需要分sheet显示。步骤1:安装插件包 npm install exceljs npm install xlsx 步骤2：引用包 import XLSX from xlsx; import ExcelJS from exceljs; 步骤3&am…...

编程日记 2025/8/15 12:23:11

Android 10.0 SharedPreferences in credential encrypted storage are not avai

1.前言在10.0的系统rom定制化开发中，在开机的过程中，由于某些应用在开机解锁阶段就开始访问查询短信和联系人等功能，所以会出现抛异常的情况出现，接下来分析下相关的情况，然后来解决这些问题 2.SharedPreferences in credential encrypted storage are not available …...

编程日记 2025/8/16 10:49:00

面试高频算法：最长回文子串

题目：5. 最长回文子串给你一个字符串 s，找到 s 中最长的回文子串。回文：如果字符串向前和向后读都相同，则它满足回文性；子串：子字符串是字符串中连续的非空字符序列。示例 1： 输入&…...

编程日记 2025/8/16 10:48:58

RDK X5 交叉编译OSS\QT\opencv\openssl

RDK X5 交叉编译环境配置 1 资源2 使用vm安装Ubuntu22.043 安装依赖4 安装ide5 下载交叉编译工具6 编译oss库6.1 设置临时环境变量6.2 编译arm版本的openssl6.2 编译arm版本的curl6.1 下载oss源码6.1.1 创建arm-toolchain.cmake6.1.2 修改CMakeLists.txt6.1.3 编译 7 编译openc…...

编程日记 2025/8/16 10:48:57