前端规范的作用主要有以下几点:
1.维护代码风格的一致性,提高可读性和可维护性;
2.减少团队成员之间的沟通障碍,促进协作开发;
3.降低项目的技术债务,提高代码质量和稳定性;
4.提高代码的可重用性和可扩展性,有利于后续的开发和维护工作;
5.符合行业标准和最佳实践,有助于提高团队的专业水平和竞争力。
其中命名规范,编程规范例如 HTML、JavaScript、css 等将参考规范。新增 vue3 的起名规范:
- hook 函数建议 use 开头,例如 useMouse()
- 组件目录建议结构是, hooks、src、types
- ESlint (主要用于检查 JavaScript 代码是否符合配置的编码规范。通过配置文件(如 .eslintrc)可以定义代码风格、语法错误、变量声明等问题的规则,并在开发过程中对代码进行实时检查和提示。)
- Prettier (用于自动格式化代码,并强制遵循一致的代码风格。它支持多种编程语言,并提供了许多选项来定制格式化规则。与 ESLint 结合使用可以帮助团队更好地维护代码质量。)
- Stylelint (CSS 代码风格检查工具,它可以避免编写不一致的 CSS 代码,并确保团队成员之间在代码风格上保持一致)。
安装Eslint插件,自动提示不符合规范的代码,并且提示报错。vscode中安装ESlint插件以及ESlint Chinese Rules(中文提示)。项目中已经集成支持多ts语言的检测,在首选项中配置:
"editor.codeActionsOnSave": {
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
"vue",
"html",
"typescript",
{
"language": "vue",
"autoFix": true
},
{
"language": "typescript",
"autoFix": true
},
{
"language": "typescriptreact",
"autoFix": true
},
"html"
],
"eslint.alwaysShowStatus": true
},
自动格式化代码,安装统一标准插件格式化代码,可以防止因为格式化导致的冲突。安装Prettier- Code formatter插件,在 VS Code 的配置中搜索 Format On Save,找到配置项勾选后就可以在保存文件的时候进行格式化,在首选项中配置:
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
自动格式化css样式,在editor.codeActionsOnSave中添加 "source.fixAll.stylelint": true 配置,以及添加"stylelint.validate": ["css", "scss", "vue", "html"]
把这段json文件放到首选项的setting.json文件中,全部复制。
{
"git.confirmSync": false,
"security.workspace.trust.untrustedFiles": "open",
"explorer.confirmDelete": false,
"git.enableSmartCommit": true,
"vetur.grammar.customBlocks": {
"docs": "md",
"i18n": "json"
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.codeActionsOnSave": {
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
"vue",
"html",
"typescript",
{
"language": "vue",
"autoFix": true
},
{
"language": "typescript",
"autoFix": true
},
{
"language": "typescriptreact",
"autoFix": true
},
"html"
],
"eslint.alwaysShowStatus": true,
"source.fixAll.stylelint": true
},
"eslint.execArgv": null,
"editor.formatOnSave": true,
"eslint.codeActionsOnSave.rules": null,
"liveServer.settings.AdvanceCustomBrowserCmdLine": "",
"stylelint.validate": ["css", "scss", "vue", "html"]
}
- Git COMMIT 校验
- ESlint 校验
- Stylelint 校验
- 注释要清晰明了,尽可能使用简洁易懂的语言,避免使用缩写或专业术语。
- 对于重要的代码块或函数,应该添加详细的注释,解释代码的用途、实现原理等。
- 对于非常量变量或复杂表达式,建议添加注释来阐明其含义和目的。
- 避免使用无意义的注释,比如“这里是一个循环”之类的。
- 确保注释与代码实际操作相符合,及时更新注释以反映代码的变化。
/**
* 函数/方法的功能描述
*
* @param {参数类型} 参数名称 - 参数描述
* @return {返回值类型} 返回值描述
* @author 作者
*/
function functionName(parameter) {
// 函数/方法的具体实现
}
// 后面添加注释文本即可。如果需要对注释进行分类或标记,可以使用特定的注释格式,如:
// TODO: 用于标记需要完成的任务。其他常用的注释格式还包括:
// FIXME: 标记需要修复的问题;
// BUG: 标记已知的 bug;
// HACK: 暂时解决问题的代码;
// NOTE: 提供额外的信息或提醒。
vscode配置注释模板,打开首选项,用户代码片段,选择typescript.json(因为用的都是ts,js也可以选择js的配置)
复制模板配置Json:
"Function JSDoc Comment": {
"prefix": "/**",
"body": [
" /**",
" * $0",
" *",
" * @param {${1:类型}} ${2:参数名称} - ${3:参数描述}",
" * @return {${4:返回值类型}} ${5:返回值描述}",
" * @author 李田杰",
" */"
],
"description": "Add JSDoc comment for function"
},
"TODO": {
"prefix": "/t",
"body": "// TODO: $1",
"description": "Add a TODO comment."
},
"FIXME": {
"prefix": "/f",
"body": "// FIXME: $1",
"description": "Add a FIXME comment."
},
"BUG": {
"prefix": "/b",
"body": "// BUG: $1",
"description": "Add a BUG comment."
},
"HACK": {
"prefix": "/h",
"body": "// HACK: $1",
"description": "Add a HACK comment."
},
"NOTE": {
"prefix": "/n",
"body": "// NOTE: $1",
"description": "Add a NOTE comment."
}
配置好了输入快捷键"/"就可以看到注释模板了,目前只在ts文件中生效。
- 待定
- 编程语言:TypeScript
- 框架:Vue3
- UI:框架 待定
- 项目构建:Vite
- 包管理:pnpm
- 插件管理:待定
具体内容待定,预计是技术栈,目录结构,配置等等。
- node:v14.15.4
- vite:^2.8.0
- vue:^3.2.25
- typescript:^4.5.4
- pinia:^2.0.12
- vue-router:^4.0.14
- vueuse:^8.2.0
- eslint:^8.12.0
- prettier:^2.6.1
- commitizen:^4.2.4
- husky:^7.0.4
- sass: ^1.62.0,
内容待定
地址待定
基于Element UI 或者Ant Design UI组件,二次封装UI组件库。
- 左侧导航栏
响应式规范待定。
vueuse库
引入api工具,方便前后端联调。
git commit 代码后,自动部署项目至P版,不用每次都要去打包提交代码。