前端注释

不知道在做前端的各位对于写注释是什么样的一个想法;先说说我的想法;
当时在写一个项目是后台管理系统的时候,我就特别少写注释;那时我觉得这个代码很简单啊,为什么要写注释,浪费时间;不用写一会回来看看一定会明白的;
所以代码是这样的: 看图

在这里插入图片描述

一千的逻辑几乎没有一个注释;
于是过了一个月两个月回来修改bug修改需求时;
凉凉;我当时为什么这么写?这个是干嘛?啊?业务逻辑好多啊?又得花时间理清楚;

后来的我是这样紫的:

在这里插入图片描述

全都是泡沫!!!
全都是注释;我连什么需求都要写上去了;
所以啊。想告诉大家一定要写注释啊。不然痛苦的还是自己;不写就跑路咯。让下一个大佬接你的~

到这里了给大家一个看一个段子;
在这里插入图片描述
我在想我要写的好还是不好呢?好纠结啊这么这么难的;?????

### 在 VSCode 中为 Vue 项目编写前端注释的最佳实践 对于在 Visual Studio Code (VSCode) 中开发的 Vue 项目而言,良好的注释习惯能够显著提升代码可读性和维护效率。以下是针对 Vue 组件文件 `.vue` 的一些推荐做法: #### 单行注释 单行 JavaScript 注释 (`//`) 和多行注释 (`/* */`) 都可以在 `<script>` 标签内部用于解释逻辑复杂度较高的部分[^3]。 ```javascript <script> export default { name: 'ExampleComponent', data() { // 这里定义组件的状态变量 return {} }, } </script> ``` #### 多行注释模板 当涉及到函数或者方法时,可以采用 JSDoc 样式的多行注释来描述参数、返回值以及可能抛出异常的信息。这不仅有助于其他开发者理解功能实现,还能让编辑器提供更智能的帮助提示。 ```javascript <script> /** * 计算两个数之和. * * @param {number} a - 加数之一 * @param {number} b - 另一个加数 * @returns {number} 返回两数相加之和 */ function add(a, b){ return a + b; } export default { methods:{ add, } }; </script> ``` #### 使用 ESLint 插件强化规范 安装并配置 `eslint-plugin-vue` 后,在项目的根目录下创建或修改现有的 `.eslintrc.js` 文件加入如下规则以强制执行某些特定风格的注释要求[^2]: ```javascript module.exports = { extends: [ 'plugin:vue/recommended' ], rules: { 'vue/comment-directive': ['error', 'always'], ... } }; ``` #### HTML 结构内的注释 除了脚本区域外,在 `<template>` 或者 `<style scoped>` 节点之间也可以放置标准HTML形式(`<!-- -->`)的备注说明页面布局意图或是样式作用范围等信息[^1]. ```html <template> <!-- 主要展示区 --> <div class="main-content"> {{ message }} </div> <!-- 辅助操作栏 --> <aside v-if="showSidebar"></aside> </template> ``` 通过遵循上述指南,团队成员间能更好地交流协作;同时也有利于后期快速定位问题所在位置,减少不必要的沟通成本和技术债务积累。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值