前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键（二）：https://developer.aliyun.com/article/1628436
- 【强制】Prop 名⼤⼩写，在声明和使用 prop 的时候，其命名应该始终使⽤ camelCase。
// not good props: { 'greeting-text': String } <WelcomeMessage greeting-text="hi"/> // good props: { greetingText: String } <WelcomeMessage greetingText="hi"/>
- 【推荐】⾃闭合组件在单⽂件组件、字符串模板和 JSX 中没有内容的组件应该是⾃闭合的；但在 DOM 模板⾥尽量不要这样做。
<!-- not good --> <!-- 在单⽂件组件、字符串模板和 JSX 中 --> <MyComponent></MyComponent> <!-- 在 DOM template模板中 --> <my-component/> <!-- good --> <!-- 在单⽂件组件、字符串模板和 JSX 中 --> <MyComponent/> <!-- 在 DOM template模板中 --> <MyComponent></MyComponent>
- 【强制】模版中的组件名⼤⼩写在单⽂件组件和字符串模板中组件以及DOM 模板中名应该总是PascalCase 的，保持统一，方便搜索定位。
<!-- not good --> <!-- 在单⽂件组件和字符串模板中 --> <mycomponent/> <!-- 在单⽂件组件和字符串模板中 --> <myComponent/> <!-- 在 DOM 模板中 --> <my-component></my-component> <!-- good --> <!-- 在单⽂件组件和字符串模板中 --> <MyComponent/> <!-- 在 DOM 模板中 --> <MyComponent></MyComponent>
- 【推荐】多个特性的元素应该分多⾏撰写，每个特性⼀⾏（此项 Volar 插件会⾃动根据⾏宽阈值进⾏⾃动折⾏处理，⼀般⽆需考虑）
<!-- not good --> <img src="https://vuejs.org/images/logo.png" alt="Vue Logo"> <MyComponent foo="a" bar="b" baz="c"/> <!-- good --> <img src="https://vuejs.org/images/logo.png" alt="Vue Logo" > <MyComponent foo="a" bar="b" baz="c" />
- 【强制】组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或⽅法
// not good {{ fullName.split(' ').map(function (word) { return word[0].toUpperCase() + word.slice(1) }).join(' ') }} // good // 在模板中 {{ normalizedFullName }} // 复杂表达式已经移⼊⼀个计算属性 computed: { normalizedFullName: function () { return this.fullName.split(' ').map(function (word) { return word[0].toUpperCase() + word.slice(1) }).join(' ') } }
- 【推荐】应该把复杂计算属性分割为尽可能多的更简单的属性
// not good computed: { finalPrice: function () { var basePrice = this.manufactureCost / (1 - this.profitMargin) return ( basePrice - basePrice * (this.discountPercent || 0) ) } } // good computed: { basePrice: function () { return this.manufactureCost / (1 - this.profitMargin) }, discount: function () { return this.basePrice * (this.discountPercent || 0) }, finalPrice: function () { return this.basePrice - this.discount } }
- 【强制】⾮空 HTML 特性值应该始终带引号
<!-- not good --> <input type=text> <AppSidebar :style={width:sidebarWidth+'px'}> <!-- good --> <input type="text"> <AppSidebar :style="{ width: sidebarWidth + 'px' }">
- 【强制】单⽂件组件应该总是按照 、
<!-- good --> <!-- ComponentA.vue --> <template>...</template> <style>/* ... */</style> <!-- ComponentB.vue --> <template>...</template> <script>/* ... */</script> <style>/* ... */</style>
5、代码风格
此处⼤部分⼯作将由代码格式化⼯具完成（参见运行环境约定），⼀般⽆需关心，仅作为了解和配置格式化工具参考。
（1）CSS
- 【强制】缩进使⽤两个空格代替 Tab
- 【强制】为选择器分组时，将单独的选择器单独放在⼀⾏
/* not good */ .selector, .selector-secondary, .selector[type=text] { /* ... */ } /* good */ .selector, .selector-secondary, .selector[type="text"] { /* ... */ }
- 【强制】声明块的左花括号前添加⼀个空格
- 【强制】声明块的右花括号应当单独成⾏
- 【强制】每条声明语句的 : 后应该插⼊⼀个空格
- 【强制】每条样式声明应该独占⼀⾏
/* not good */ .selector { font-size: 15px; color: red; } /* good */ .selector { font-size: 15px; color: red; }
- 【强制】对于以逗号分隔的属性值，每个逗号后⾯都应该插⼊⼀个空格（例如，box-shadow，transition)
/* not good */ .selector { transition: border .2s,color .3s,padding .4s; } /* good */ .selector { transition: border .2s, color .3s, padding .4s; }
- 【强制】!important 前插⼊⼀个空格
- 【强制】注释：// 后插⼊⼀个空格，/* 后插⼊⼀个空格，*/ 前插⼊⼀个空格
（2）Javascript
- 【强制】缩进使⽤两个空格代替 Tab
- 【强制】统⼀使⽤双引号""（与 Prettier 默认格式化配置持⼀致）
- 【强制】对象属性名不需要加引号
- 【强制】对象以缩进的形式书写，不要写在⼀⾏
- 【强制】数组中不要存在空元素
- 【强制】不要⽤for in循环数组
- 【推荐】数组、对象最后要有逗号，为了Git多人修改时查看记录
// not good let a = { 'b': 1 }; let a = { b: 1 }; let a = { b: 1, c: 2 }; // good let a = { b: 1, c: 2, };
