# standard

**Repository Path**: SamyeChan/standard

## Basic Information

- **Project Name**: standard
- **Description**: 前端开发标准化相关
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-19
- **Last Updated**: 2021-03-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# standard

记录前端开发时代码格式规范相关的文件、注意事项等

## 规范文件

```
│
├── .vscode             //
│   └── settings.json
├── .browserslistrc     // 配置兼容的浏览器
├── .editorconfig       // 协同团队开发人员之间的代码的风格及样式规范化的一个工具的默认配置文件，用来规范缩进风格，缩进大小，tab长度以及字符集等
├── .eslintignore       // 需要ESLint忽略的文件，只对.js文件有效
├── .gitignore          // 告诉Git哪些文件不需要添加到版本管理中
├── .prettierrc.js      // 科室目前前端代码的格式
└── ...
```

### .vscode

```json
/* setting.json */

{
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  // #每次保存的时候自动格式化
  "editor.formatOnSave": true,
  // #每次保存的时候将代码按eslint格式进行修复
  "eslint.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // #去掉代码结尾的分号
  "prettier.semi": false,
  // #使用单引号替代双引号
  "prettier.singleQuote": true,
  // #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
  // #格式化.vue中html
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // 让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "auto" //"force-aligned" //属性强制折行对齐
    }
  }
}
```

## 开发约束

### 变量命名约束

- 变量、函数命名均使用 `小驼峰命名法`；
- 常量名全部 `大写`，单词间使用下划线隔开，力求表达完整清楚，不要嫌名字长。例如 const XXX_AAA 等等。。。
- js 事件后的自定义函数名的使用以 on 开头，例如@click="onClick"、@change="onChange"等等。。。
- 不要加敏感词汇，可能会被浏览器直接删除；

### 样式命名规范

- css 命名 `一律小写`；
- 样式单词之间通过 `-` 进行连接，例如：ly-main-head、 user-info 等；
- 避免使用标签名作为样式名；
- 尽量避免使用 id 选择器；

## 开发工具

- 编辑器：vscode；
- 版本控制：git；
- host 管理：SwitchHosts；
- 解决跨域：nginx；
- markdown 文件编辑器：typora；
- 代码检查：Prettier&ESLint；