# Cocos Creator Coding Style Setting

###### tags: `Cocos Creator`

本次專案會使用三種工具來設置 Cocos 的 Coding Style 和一些錯誤提示，

分別是 *EditorConfig*、*Prettier*、*ESlint*。

Prepare : 安裝 NodeJS、建立自己的 Cocos Creator 專案、在根目錄初始化 NPM。


## EditorConfig
跨編輯器，可覆蓋編輯器設定。

+ Install extension in *VScode*

+ Generate config file *.editorconfig*
<br>可查看了解個別設定的用處 [Editor Config](https://editorconfig.org/#overview)
.editorconfig 內容

root = true

[assets/Script/**.ts]
end_of_line = lf
indent_style = space
indent_size = 4
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

## Prettier
Formatter，可幫助格式化程式碼，維持程式碼美觀和可維護性
+ Install extension in *VScode*
<br>

+ Create config file *.prettierrc*
<br> JS file 的 tabwidth 在 *Prettier* 的 default 設定中是 2，因為個人習慣將其設定為 4 (Optional)，如果有想要特別更改的 *Prettier* 規則也可在此更改( 例如字串要使用雙引號或是單引號表示 )。

{
  "overrides": [
    {
      "files": ["*.js"],
      "options": {
        "tabWidth": 4
      }
    }
  ],
  "singleQuote": true
}

+ Tips
<br>開啟 *VScode* 中的 *Format On Save*，當你儲存檔案時就能自動格式化程式碼，
不然每次都要 shift+alt+F 手動格式化。


## ESLint
Coding Style 及語法檢查，會依照設定顯示錯誤或警告，部分規則與 *Prettier* 重疊，因此本專案會將重疊部分的檢查關閉。
+ Install extension in *VScode*
<br>

+ Install *typescript* in *VScode*
<br>

+ Install *eslint* using *NPM*
<br>

+ Create config file *.eslintrc*
<br>

+ Install *eslint-config-prettier* using *NPM*
<br>

+ Update config file
<br>更新 config file，解決 *Prettier* 與 *ESlint* 部分規則衝突和 *Cocos* 語法無法被解析問題。

module.exports = {
  env: {
    browser: true,
    es2020: true,
  },
  extends: ["airbnb-base", "prettier"],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: 12,
    sourceType: "module",
  },
  plugins: ["@typescript-eslint"],
  rules: {
    "no-underscore-dangle": "off",
  },
  globals: {
    cc: true,
  },
};

+ 檢查是否成功設置
<br>