前端编码规范

HTML编码规范

1. 标签语义化，合理嵌套。
2. 特殊字符使用HTML字符实体。
3. 缩进使用两个空格代替。
4. 嵌套元素应当缩进一次（即两个空格），同层级缩进应保持一致。

<div>
  <div></div>
  <div></div>
</div>

1. 对于属性的定义，使用双引号，不要使用单引号。

 <nz-input-number
    class="input-number"
    [nzMin]="1"
    [(ngModel)]="createBaseInfo.groupSum"
    [nzStep]="1"
    [nzPrecision]="0"
    nzPlaceHolder="创建个数"
></nz-input-number>

1. 不使用重复属性，重复的属性只会取第一个。
2. 不要在https的链接里写http的图片。
3. 编写 HTML 代码时，尽量避免多余的层级。

<div>
  <div>
    <div class="title-text">预算与优化</div>
  </div>
</div>

CSS编码规范

1. 类名使用小写字母，中横线分割。

.button-label {
  width: 110px;
}

.button-item {
  padding-top: 20px;
}

1. 十六进制值应该全部小写，例如，#f3f6fa。
2. Less中选择器避免超过4层。
3. id 采用驼峰式命名。

<div id="mainContent"></div>

1. 所有声明语句都应当以分号结尾。

.campaign-edit {
  visibility: hidden;
  margin-top: 4px;
  margin-left: 6px;
  font-size: 16px;
  cursor: pointer;
}

1. 避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px。
2. 为选择器中的属性添加双引号，例如，input[type="text"]。

[layout-align="start center"] {
  justify-content: flex-start;
}

1. 不出现空的规则（声明块中没有声明语句）。

.input-label {

}

1. 为选择器分组时，将单独的选择器单独放在一行。

[layout-align="start start"],
[layout-align="start end"],
[layout-align="start center"] {
  justify-content: flex-start;
}

1. Less样式穿透，定义自定义class类名。

/deep/ .custom  .ant-button {
  color: #000;
}

1. 每条样式声明应该独占一行。

JavaScript编码规范

1. 标准变量采用驼峰式命名（考虑与后台交换数据的情况，对象属性可灵活命名）。

// 创建计划的信息
let createCampaignInfo: CreateCampaignType = {
  campaign_name: '',
};

1. 变量名不应过短，要能准确完整地描述该变量所表述的事物。

const listOfCampaign: any[] = [];

1. 变量不要先使用后声明。

console.log(example)

const example: string = '栗子'

1. 不要声明了变量却不使用。
2. 不要在同个作用域下声明同名变量。

exampleFn(params: number) {
  let params = 10;
}

1. 一个函数作用域中所有的变量声明尽量提到函数首部。
2. 为了快速知晓变量类型，声明变量时要赋值或声明变量类型。
3. 使用===代替==，!==代替!=。
4. 使用let定义变量，const定义常量。
5. 使用箭头函数取代简单的函数。

deleteTemplate(id: number) {
  this.batchApi
    .deleteTemplate({
      params: { id },
    })
    .subscribe(() => this.getTemplateList());
}

1. 将复杂的函数分解成多个子函数，方便维护和复用。
2. 缩进使用两个空格代替 Tab。
3. 使用单引号。

Angular编码规范

请遵守Angular风格指南。

代码风格及编辑器配置

1.如果项目根目录中没有则创建.prettierrc.js

module.exports = {
  // 最大行长
  printWidth: 90,
  // 指定每个缩进级别的空格数
  tabWidth: 2,
  // 使用制表符而不是空格缩进行
  useTabs: false,
  // 在语句的末尾打印分号
  semi: true,
  // 使用单引号而不是双引号
  singleQuote: true,
  // 仅在需要时在对象属性周围添加引号
  quoteProps: 'as-needed',
  // 在 JSX 中使用单引号而不是双引号
  jsxSingleQuote: false,
  // 在 ES5 中有效的尾随逗号（对象、数组等）。TypeScript 中的类型参数中没有尾随逗号
  trailingComma: 'es5',
  // 在对象文字中的括号之间打印空格
  bracketSpacing: true,
  // 将>多行 HTML（HTML、JSX、Vue、Angular）元素放在最后一行的末尾
  // 而不是单独放在下一行（不适用于自闭合元素）
  bracketSameLine: false,
  // 在唯一的箭头函数参数周围包含括号
  arrowParens: 'always',
};

2. VsCode配置

• 安装 Prettier - Code formatter插件
• 如果项目根目录中没有则创建.vscode/settings.json文件

{
  // 默认格式化工具
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

2. WebStorm配置

• npm全局安装prettier

npm install -g prettier

• 查看全局prettier包安装位置

npm root -g

• 修改prettier配置