# Coding Style

**基本上是以易讀性為原則來規範codeing-style
習慣這類寫法會在開發後便於維護以及查找問題**

### 1. 變數及function命名用小駝峰，組件名用大駝峰，常數用大寫

變數及function 例: thisChar、thisFunction

組件名 例: ThisComponent

常數名 例: THIS_DEV_NUM

### 2. CSS的樣式名用'-'連接
`例: this-is-style`

### 3.縮排為4隔空格

### 4.運算符'+'、'-'、'='、'>' 、'<' 之間需要有空格

例: const x = 10;
v-for = "item in all";
a = b + c;

### 5. ':'之後要空格
### 6. 中大括號有內容的話跨行比較易讀

例: 
template: {
	cell: [
		'first',
		'second',
		'third'
	],
	item: []
}

### 7. 程式碼的不同邏輯區塊與區塊間用換行來增加易讀性

例:
if (foo === 120) {
    return;
}

if (bar === 120) {
    foo = 20
}

### 8. html的tag attribute 過多建議換行

例:
<el-dialog :visible.sync="isRenewOpen" width="50%" center :modal-append-to-body="false" append-to-body @close="renewClose">

改為以下

<el-dialog
    :visible.sync="isRenewOpen"
    width="50%"
    center
    :modal-append-to-body="false"
    append-to-body
    @close="renewClose"
>

### 9. css屬性的習慣順序
分為三大區塊 以常用屬性示例，其餘依個人判斷放位置

div {
    // 第一區塊
       定位屬性>寬高屬性>內距外距屬性>邊框屬性
    position: relative;
    top: 0;
    left: 0;
    display: block;
    float: left;
    width: 100%;
    height: 100%;
    line-height: 10px;
    padding: 10px;
    margin: 100px;
    border: 1px solid #000;
    border-radius: 5px;
    // 第二區塊
       文字屬性>排版屬性>顏色屬性或背景屬性
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    background: #FFF;
    background-color: #FFF;
    color: #FFF;
    // 第三區塊
       上面兩個區塊沒有辦法區分的屬性
    cursor: pointer;
    word-break: break-all;
}