---
# System prepended metadata

title: Cocos Creator Coding Style Setting
tags: [Cocos Creator]

---

# Cocos Creator Coding Style Setting

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

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

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

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

![](https://i.imgur.com/5gngbVB.jpg)

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

+ Install extension in *VScode*
![](https://i.imgur.com/GUl9TrM.jpg)

+ 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>![](https://i.imgur.com/WyAHzyG.jpg)

+ Create config file *.prettierrc*
<br> JS file 的 tabwidth 在 *Prettier* 的 default 設定中是 2，因為個人習慣將其設定為 4 (Optional)，如果有想要特別更改的 *Prettier* 規則也可在此更改( 例如字串要使用雙引號或是單引號表示 )。
```jsonld=
{
  "overrides": [
    {
      "files": ["*.js"],
      "options": {
        "tabWidth": 4
      }
    }
  ],
  "singleQuote": true
}
```
+ Tips 
  <br>開啟 *VScode* 中的 *Format On Save*，當你儲存檔案時就能自動格式化程式碼，
  不然每次都要 shift+alt+F 手動格式化。
  
  ![](https://i.imgur.com/hxPyhZt.jpg)
  
## ESLint
Coding Style 及語法檢查，會依照設定顯示錯誤或警告，部分規則與 *Prettier* 重疊，因此本專案會將重疊部分的檢查關閉。
+ Install extension in *VScode*
<br>![](https://i.imgur.com/yWPCGRy.jpg)

+ Install *typescript* in *VScode*
<br>![](https://i.imgur.com/ORTNKsI.jpg)


+ Install *eslint* using *NPM*
<br>![](https://i.imgur.com/DR5QOF3.jpg)

+ Create config file *.eslintrc*
<br>![](https://i.imgur.com/XwJD3hq.jpg)

+ Install *eslint-config-prettier* using *NPM*
<br>![](https://i.imgur.com/qfJ3F0I.jpg)

+ Update config file
<br>更新 config file，解決 *Prettier* 與 *ESlint* 部分規則衝突和 *Cocos* 語法無法被解析問題。
```javascript=
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>![](https://i.imgur.com/b6WVKwy.jpg)

