项目出现的一些代码规范问题

导言： 这是一篇总结代码里写得不规范地方的文章

HTML:

1.属性书写顺序错误

1.1 在html标签里写属性时，并没有注意顺序，然后代码检查给报错了，修复后的顺序如下：

<template v-if="v-if在v-for外面">   
	<template v-for="">
		<image
		   v-if="v-if在key前面"
		   :key="key在class前面"
		   class="two-four-media"
		   :src="item.src"
		   mode="aspectFill"
		   lazy-load
		   @tap.stop="点击事件监听放最后面"
		/>
	</template>
</template>

1.2 v-show应该放在class前(Attribute “v-show” should go before “class”.)，修改好了如下。

<!-- 错误 -->
<view
   class="xxxx"
   v-show="xxxxxx"
>   
<!-- 正确 -->
<view
   v-show="xxxxxx"
   class="xxxx"
>     

2.组件的引用名字或者属性命名不应该要驼峰命名，要以-来拼接（Attribute ‘:emptyData’ must be hyphenated.）

2.1 组件的引用，要以-来拼接，如下：

<!-- 错误 -->
<emptyData txt="无数据" />
<!-- 正确 -->
<empty-data txt="无数据" />

import emptyData from "@/components/empty-data";
export default {
	components: {
       emptyData,
    },
}

2.2 属性的命名，要以-来拼接，如下

<!-- 错误 -->
<important-event-card
  :importantEventObj="xxxx"
/>
<!-- 正确 -->
<important-event-card
  :important-event-obj="xxxx"
/>

3.如果标签里面没有内容，需要以单标签形式书写(Require self-closing on Vue.js custom components)

<!-- 错误 -->
<view class="dashed-line"></view>
<!-- 正确 -->
<view class="dashed-line" />

---

JS:

1.设置prop需要设置默认值（Prop ‘xxxxx’ requires default value to be set.）

// 错误
props: {
  xxxxx: String,
},
// 正确
props: {
  xxxxx: {
    type: String,
    default: "",
  },
},

2.注释//后面需要空一格空格(Expected space or tab after ‘//’ in comment)

// 错误
//是否展示分享引导弹窗
isShowShareGuide: false, 
// 正确
// 是否展示分享引导弹窗
isShowShareGuide: false, 

3.字符串拼接要用模板字符串（Unexpected string concatenation.）

// 错误
// 当前的日期年份，做选择器最后年份的限制，要字符串类型
currentYear: new Date().getFullYear() + "",
// 正确
// 当前的日期年份，做选择器最后年份的限制，要字符串类型
currentYear: `${new Date().getFullYear()}`,

4.|| 符号应该置于一行的行首（‘||’ should be placed at the beginning of the line），prettier自动保存会导致这个结果，解决办法可以看prettier官方文档https://www.prettier.cn/docs/ignore.html

// 错误  【条件写长的情况下prettier自动保存进行格式化的结果】
if（
Array.isArray(conditionA.longerNameA) ||
Array.isArray(conditionB.longerNameB)
）{
// do something
}

// 正确  【// prettier-ignore将从格式化中排除抽象语法树中的下一个节点】
if（
// prettier-ignore
Array.isArray(conditionA.longerNameA)
|| Array.isArray(conditionB.longerNameB)
）{
// do something
}