web开发相关命名规范——大小写（基于Vue的前端开发）

背景

web开发相比于传统桌面应用，涉及到更多系统，包括前端页面（HTML、CSS）、脚本（Javascript）、前端框架、网络（url）、服务器（网络路径和文件资源）等，且不同系统支持的命名规范和习惯不尽相同，可能会导致开发的混乱。在本篇中统一整理一份目录，方便后续查询和使用。

命名规范介绍

目前流行的命名规范主要是以下几类：

• 驼峰命名法：单词间无特殊符号，单词首字母大写，其他字母小写；可以继续细分为：
  • 大驼峰（也叫 Pascal 命名法）：第一个单词首字母也大写，如：PascalCase
  • 小驼峰：第一个单词首字母小写，如：camelCase
• 蛇形命名法（下划线命名法）：单词间使用下划线连接，可以根据需要使用全小写或全大写，混用的不多见，如：first_one
• 减号命名法：单词间使用减号连接，通常使用全小写，如：kebab-case

web项目各场景推荐命名法

前端页面：

• html：html 对大小写不敏感，因此推荐始终使用小写，包括属性名、事件名，但为了易读，建议使用 kebab-case；此外，事件的回调函数使用 camelCase，因为这属于 JS 的范畴
• css：同 html，建议使用 kebab-case，更进一步基于 BEM 规范，使用 “模块-元素--修饰符”的形式，如： block-element--modifier，适合开发组件库时使用
• Javascript：使用与其他编程语言类似的命名约定
  • 构造函数/类使用 PascalCase
  • 常量使用全大写的蛇形命名，如：MATH_PI，
  • 其他变量使用 camelCase
• Vue 组件相关：常用 PascalCase 和 kebab-case 。其中，PascalCase 比起 kebab-case 在某些方面有额外优势，如方便代码自动补全、易识别（指与其他元素或组件作区分，如 html 元素或 web component 组件）
  • 实例内注册组件或单文件组件，推荐 kebab-case 或 PascalCase 。其中，单文件 Vue 组件或在 JSX 中的组件，使用 ；而通过 Vue.component 注册的组件建议使用 kebab-case

    更多 Vue 组件的命名风格建议翻阅官方文档 ： https://cn.vuejs.org/v2/style-guide/#优先级-B-的规则：强烈推荐-增强可读性

  • prop 与自定义事件：建议定义时使用 camelCase，然后在模板上使用 kebab-case；同样地，（包括自定义）事件的回调函数使用 camelCase
• 网络相关（这部分暂时了解不多，等待后续完善）
  • url（网站地址部分）：建议使用全小写的蛇形命名法，如：site_logo
  • 资源路径和资源文件名：根据服务器架设所用的系统会有不同，windows 环境下大小写不敏感，而 Unix/Linux环境下区分大小写

解决 VSCODE 不能双击选中 kebab-case 形式的标识符

鉴于前端开发需要大量使用 kebab-case 命名法，优化开发环境就显得尤为重要。默认配置下，VSCODE 不支持双击选中此类标识符，因此需要以下的调整：
1、打开设置【文件-首选项-设置】，搜索 editor.wordSeparators（此处的配置会将指定的字符全部作为单词的分隔符，因此导致无法双击选中）
2、复制下面一段内容替换掉 wordSeparators 里面的内容（也就是删除原字符串中的减号），使编辑器将减号视作标识符单词的一部分，而不是作为分隔符
原字符串：

`~!@#$%^&*()-=+[{]}|;:'",.<>/?

替换成：

`~!@#$%^&*()=+[{]}|;:'",.<>/?

解决方法原文链接：https://www.cnblogs.com/dxy9527/p/15028825.html