leadong-test-ui

v0.0.2

Published

3 years ago

前端规范的作用主要有以下几点： 1.维护代码风格的一致性，提高可读性和可维护性； 2.减少团队成员之间的沟通障碍，促进协作开发； 3.降低项目的技术债务，提高代码质量和稳定性； 4.提高代码的可重用性和可扩展性，有利于后续的开发和维护工作； 5.符合行业标准和最佳实践，有助于提高团队的专业水平和竞争力。

0High
0Medium
0Low

qianshu1999691

leadong-ui leadongUi

1. 前端规范

前端规范的作用主要有以下几点：
    1.维护代码风格的一致性，提高可读性和可维护性；
    2.减少团队成员之间的沟通障碍，促进协作开发；
    3.降低项目的技术债务，提高代码质量和稳定性；
    4.提高代码的可重用性和可扩展性，有利于后续的开发和维护工作；
    5.符合行业标准和最佳实践，有助于提高团队的专业水平和竞争力。

(1) 前端命名规范/编程规范

其中命名规范,编程规范例如 HTML、JavaScript、css 等将参考规范。新增 vue3 的起名规范:

hook 函数建议 use 开头,例如 useMouse()
组件目录建议结构是, hooks、src、types

(2) 自动化工具

ESlint (主要用于检查 JavaScript 代码是否符合配置的编码规范。通过配置文件（如 .eslintrc）可以定义代码风格、语法错误、变量声明等问题的规则，并在开发过程中对代码进行实时检查和提示。)
Prettier (用于自动格式化代码，并强制遵循一致的代码风格。它支持多种编程语言，并提供了许多选项来定制格式化规则。与 ESLint 结合使用可以帮助团队更好地维护代码质量。)
Stylelint (CSS 代码风格检查工具，它可以避免编写不一致的 CSS 代码，并确保团队成员之间在代码风格上保持一致)。

ESlint

    安装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

 自动格式化代码,安装统一标准插件格式化代码,可以防止因为格式化导致的冲突。安装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"
        },

Stylelint

    自动格式化css样式,在editor.codeActionsOnSave中添加 "source.fixAll.stylelint": true 配置，以及添加"stylelint.validate": ["css", "scss", "vue", "html"]

setting.json 文件完整配置项

    把这段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"]
    }

(3) Git 提交规范

Git COMMIT 校验
ESlint 校验
Stylelint 校验

(4) 代码注释规范

注释要清晰明了，尽可能使用简洁易懂的语言，避免使用缩写或专业术语。
对于重要的代码块或函数，应该添加详细的注释，解释代码的用途、实现原理等。
对于非常量变量或复杂表达式，建议添加注释来阐明其含义和目的。
避免使用无意义的注释，比如“这里是一个循环”之类的。
确保注释与代码实际操作相符合，及时更新注释以反映代码的变化。

/**
 * 函数/方法的功能描述
 *
 * @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文件中生效。

(5) 测试规范

待定

(6) 技术栈规范

编程语言:TypeScript
框架:Vue3
UI:框架待定
项目构建:Vite
包管理:pnpm
插件管理:待定

2. 前端脚手架

具体内容待定,预计是技术栈,目录结构,配置等等。

(1)环境依赖版本

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,

(2)脚手架目录

内容待定

(3)脚手架地址

地址待定

3. 前端组件库

基于Element UI 或者Ant Design UI组件,二次封装UI组件库。

暂定组件：

左侧导航栏

4. 前端响应式设计

响应式规范待定。

5. 前端工具库

vueuse库

6. 接口管理

引入api工具,方便前后端联调。

7. 前端自动化打包

git commit 代码后,自动部署项目至P版，不用每次都要去打包提交代码。