# 強迫症的 Code Style
>任何人都可以寫得出電腦看得懂的程式，但要讓『人』看得懂，不是一件容易的事情！(Brian Lin, 2013)。

>寫程式時要保持這種心態：就好像將來要維護你這些程式的人是一位殘暴的精神病患者，而且他知道你住在哪。(John F. Woods, 1991)。

- 開發人員開撰寫程式碼的時候，時常是要先了解"前人"寫了哪一些內容，而這些內容如果是不能讓別人輕易看出程式碼之間的結構關係是需要**額外花時間**幫忙排版與修正的。

例如 ....

@if(count($loveCodeList) > 0)
<select class="form-control" name="love_code">
    @foreach($loveCodeList as $loveCode)              
  <option value="{{ $loveCode }}" {{ ($oldInput['love_code'] ?? null ) == $loveCode ? 'selected' : null }}>
  
                                                            {{ $loveCode }}
                                                        
  </option>
  
                                                    @endforeach
                                                
</select>
@else
<input class="form-control" type="text" name="love_code" value="{{ $oldInput['love_code'] ?? null }}">
@endif

@if(count($loveCodeList) > 0)
    <select class="form-control" name="love_code">
        @foreach($loveCodeList as $loveCode)
            <option value="{{ $loveCode }}" {{ ($oldInput['love_code'] ?? null ) == $loveCode ? 'selected' : null }}>
                {{ $loveCode }}
            </option>
        @endforeach
    </select>
@else
    <input class="form-control" type="text" name="love_code" value="{{ $oldInput['love_code'] ?? null }}">
@endif

* 這兩者程式碼如果在沒有任何 format extension 下可讀性就大幅度有差別，更何況**每個人的format extension 都不同**。

### 溝通很重要
- 在人類溝通上「語言」一定有既定的格式跟規範，這方便人類對於「物件」「事物」「事件」上描述可以讓別人**更輕易**了解。
- 在程式碼上也是一樣，程式碼可謂是工程師之間溝通的橋樑；因此，在 Coding 的時候，**我們需要確保任何開發人員都可以輕鬆理解它**。

---

## 程式碼版面與樣式編排
### WHY？

**使用熟悉的樣式會使人很舒服，但陌生的樣式則會使人感到焦慮。**

#### 程式碼到底是寫給誰看？
- Compiler
* 只會抱怨程式寫錯了！
- 你自己
* 問問你自己的良心：之前的程式是否得看得懂？
- 你的同事
* 放心！他們都自身難保了，不會看你的程式碼！
- 你的老闆
* ~~只要寫出會動的程式就行了！~~

#### 什麼才是好的樣式呢？
- 整潔的程式碼
* 整潔的程式碼不是指完全沒錯誤的程式碼。
- 清晰的程式碼
* 強調內縮對齊。
* 在內縮的同時，也強化了程式碼的結構與可讀性。
* 簡單的程式碼較為方便閱讀。
- 程式碼版面必須是表達涵義，而不是隱藏涵義

### 易讀性
1. 簡潔的代碼易於閱讀，且花費最少的精力。這使**人們開始容易地理解它**。
* 包括編碼風格本身（括號，縮排，變量名）以及代碼的實際控制流。
### 一致性
**衡量樣式及風格品質的標準，製訂內部風格。**
1. 建立標準時，不應只適合個人的審美觀，讓需要使用該標準的人，一起參與標準的制訂。
2. 內縮的策略必須在整個專案中保持一致！
3. 做出成果->將標準寫成文件存放
* 最終的成果，應該不止是一個模糊的檔案，應該是一個可理解的內容，可以拿出來訓練他人的檔案。
* 將來可提供查閱與參考。
### 可擴展性
1. 有結構性程式碼通常會比起非結構性程式碼更容易的修改或新增功能。
2. 當某人想要向程式中添加新功能時，如果代碼從一開始就被設計為可擴展的，那麼這樣做顯然會更容易。

### 正確性
1. 好的程式碼設計使人們可以將**更少的時間花在擔心錯誤**上，而將**更多的時間花在增強程式的功能上**。
2. 防止許多時間浪費在一些莫名其妙的錯誤上。

### 建立良好的Code Style 好處？
- 工作上
* 可以大幅度的減少別人理解你程式的時間。
* 可以減少開發時間。
* ~~可以減少code review 的人爆氣的機率~~。
- 維護上
* 可以增加可讀性。

---

## 解決方案
1. 課金買 phpstorm
2. VScode 套件安裝
- Beautify , v 1.5.0 , [HookyQR](https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify)
- 步驟一 ： 下載此套件
- 步驟二 ： 編輯setting.json檔
- 步驟三 ： 新增以下程式碼至setting.json

        "beautify.language": {
        "js": {
            "type": [
                "javascript",
                "json"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautifyrc"
            ]
            // "ext": ["js", "json"]
            // ^^ to set extensions to be beautified using the javascript beautifier
        },
        "css": [
            "css",
            "scss"
        ],
        "html": [
            "htm",
            "html",
            "blade"
        ]
        },
        "[blade]": {
            "editor.defaultFormatter": "HookyQR.beautify"
        },

- 步驟四 ： 至.vscode 修改設定檔 beautifier.js，位置於

        C:\{user 自己的使用者資料夾}\.vscode\extensions\hookyqr.beautify-1.5.0\node_modules\js-beautify\js\src\html

- 步驟五 ： 新增以下代碼，或[點我下載](https://drive.google.com/file/d/1HA4v_1q0c-j0kbDQ-ahh1u_snzNQgxx2/view?usp=sharing)。

        ...

        Beautifier.prototype.beautify = function() {

            ...

            var source_text = this._source_text;

            // BEGIN
            source_text = source_text.replace(/\{\{(--)?((?:(?!(--)?\}\}).)+)(--)?\}\}/g, function(m, ds, c, dh, de) {
                if (c) {
                    c = c.replace(/(^[ \t]*|[ \t]*$)/g, '');
                    c = c.replace(/'/g, ''');
                    c = c.replace(/"/g, '"');
                    c = encodeURIComponent(c);
                }
                return "{{" + (ds ? ds : "") + c + (de ? de : "") + "}}";
            });
            source_text = source_text.replace(/^[ \t]*@([a-z]+)([^\n]*)$/gim, function(m, d, c) {
                if (c) {
                    c = c.replace(/'/g, ''');
                    c = c.replace(/"/g, '"');
                    c = "|" + encodeURIComponent(c);
                }
                switch (d) {
                    case 'break':
                    case 'case':
                    case 'continue':
                    case 'default':
                    case 'empty':
                    case 'endsection':
                    case 'else':
                    case 'elseif':
                    case 'extends':
                    case 'csrf':
                    case 'include':
                    case 'json':
                    case 'method':
                    case 'parent':
                    case 'section':
                    case 'stack':
                    case 'yield':
                        return "<blade " + d + c + "/>";
                    default:
                        if (d.startsWith('end')) {
                            return "</blade " + d + c + ">";
                        } else {
                            return "<blade " + d + c + ">";
                        }
                }
            });
            // END

            ...

            var sweet_code = printer._output.get_code(eol);

            // BEGIN
            sweet_code = sweet_code.replace(/^([ \t]*)<\/?blade[ \t\r\n\v\f]*([a-z]+)\|?([^>\/]+)?\/?>$/gim, function toDirective(m, s, d, c) {
                if (c) {
                    c = decodeURIComponent(c);
                    c = c.replace(/&#39;/g, "'");
                    c = c.replace(/&#34;/g, '"');
                    c = c.replace(/^[ \t]*/g, '');
                } else {
                    c = "";
                }
                if (!s) {
                    s = "";
                }
                switch (d) {
                    case 'else':
                    case 'elseif':
                    case 'empty':
                        s = s.replace(printer._output.__indent_cache.__indent_string, '');
                        break;
                }
                if (c) {
                    return s + "@" + d + ' ' + c.trim();
                } else {
                    return s + "@" + d;
                }
            });
            sweet_code = sweet_code.replace(/@(case|default)((?:(?!@break).|\n)+)@break/gim, function addMoreIndent(m, t, c) {
                var indent = printer._output.__indent_cache.__base_string;
                c = c.replace(/\n/g, "\n" + indent + printer._output.__indent_cache.__indent_string);
                c = c.replace(new RegExp(indent + '@' + t, 'gi'), '@' + t);
                return "@" + t + c + "@break";
            });
            sweet_code = sweet_code.replace(/\{\{(--)?((?:(?!(--)?\}\}).)+)(--)?\}\}/g, function (m, ds, c, dh, de) {
                if (c) {
                    c = decodeURIComponent(c);
                    c = c.replace(/&#39;/g, "'");
                    c = c.replace(/&#34;/g, '"');
                    c = c.replace(/(^[ \t]*|[ \t]*$)/g, ' ');
                }
                return "{{" + (ds ? ds : "") + c + (de ? de : "") + "}}";
            });
            // END

            return sweet_code;
        };

        ...

3. 製訂內部風格

## 總結
- Code Style 的好處
- 公司的 Code 更易於閱讀。
- 公司的 Code 更容易理解。
- 公司的 Code 更易於維護。

## 參考資料
* [The Importance of Writing Good Code](https://developer.gnome.org/programming-guidelines/stable/writing-good-code.html.en)
* [Why are coding standards important?](https://medium.com/leafgrowio-engineering/why-is-coding-standards-important-319fce79d1a4)
* [Is Programming Style important? How Important? ](https://stackoverflow.com/questions/127916/is-programming-style-important-how-important)
* [HookyQR.beautify](https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify)
* [VS Code Laravel Blade formatter using extension Beautify 1.5.0 by HookyQR with js-beautify hacks](https://gist.github.com/fzldn/a27973ff7e4c8e3738b0e06e525f7403)
* [Google 教我如何進行 Code Review](https://cythilya.github.io/2020/11/01/google-how-to-do-a-code-review/)
* [MMDays – 網路, 資訊, 觀察, 生活](https://mmdays.com/2007/04/24/coding-style/)
* [Pair Programming 成本太高，嗎？](http://teddy-chen-tw.blogspot.com/2011/12/pair-programming.html)
<style>
hr{
border: 10px;
height: 50px !important;
background-image: url(https://imgur.com/2OyVsxf.png);
background-repeat: no-repeat;
padding: auto !important;
background-size: cover;
}

blockquote > ul > li{

}
.row.ui-content{
/* background-image: url("https://i.imgur.com/06bvwNF.png");
backgrund-size:cover; */
}

h1{color:#1c564b;}
h2{color:#467e98;}
h3{color:#489E89;}
h4{color:#f3784d;}
.red{color: red}
.blue{color: blue}
.gg{color: #D8A76A;font-size: 16px;}
</style>