规范

刀刀

12/31/2024

0 字

0 分钟

多人合作开发的项目，如果不设置规范，会出现每个人的风格不一样，一改动则把其他人的风格给改了，提交代码时不明确本地改动改到了啥。设置规范也是为了确保多人合作开发的顺利。

规范设置范围很广泛，从文件夹规范到代码风格规范等，都需要有一个统一。

文件夹规范

前面已经介绍过了项目大体文件夹的位置与作用，由于该项目是一个项目结构包含多个图层，因此在开发时，保持文件夹结构一致也方便他人的排查和项目后续的维护。

项目文件夹规范如下：

在 examples 文件夹中设置当前图层的一级路由组件，该组件用于引入地图组件和本图层的组件。
在 src/components/Common 文件夹中设置公共组件，如地图组件；在 src/components/Layer 文件夹中设置各个图层的组件。
公共资源、方法都放到 src 文件夹下的对应位置，图层各自用到的则放到每个图层文件夹内，其中分工如下：
- assets 存放静态资源（如图片、字体等）
- components 存放当前图层的组件
- store 存放多组件使用的变量和事件函数
- utils 存放当前图层公共方法
- config 存放当前图层的枚举和字典
定义图层的路由，在 router 文件夹下

定义图层路由的简写形式，分为两个步骤：

在 script 文件夹下新建一个 common.js 文件，创建一个对象，键名为简写形式，键值为全全路径
在 vite.cinfig.js 文件中配置简写路径

common.jsvite.cinfig.js

 export const aliasMap = {
    '@TestLayer': './src/xxx/TestLayer',
 };

import {aliasMap} from './scripts/common.js';

export default defineConfig(({mode}) => {
    return {
        resolve: {
            alias: {
                '@Test': fileURLToPath(new URL(aliasMap('@TestLayer'), import.meta.url)),
        },
    };
});

代码风格规范

代码风格主要表现在是否使用逗号、分号；每行代码长度；箭头函数只有一个参数时是否需要加括号等。

代码风格设置方法为安装依赖和插件 Eslint 和 Stylelint 。然后在 VScode 的设置 setting.json 中配置保存格式化，如下所示：

json

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},
"eslint.validate": [  
    "javascript",
    "javascriptreact",
    "html",
    "vue"
],

后续保存代码后他会自动格式化。

注意

如果安装了 prettier 等扩展，需要禁用。

规范 ​

文件夹规范 ​

代码风格规范 ​

规范

文件夹规范

代码风格规范