# TypeScript Coding Style ## 存取修飾 Access Level：public, protected, private 一律標上，但即便是 public（default）也要標上 :::danger 錯誤： ``` myProp: number; ``` ``` myFunction(): void { } ``` ::: :::success 正確： ``` public myProp: number; ``` ``` public myFunction(): void { } ``` ::: ## Tab 空白 **4** 格 ## 分號 Semicolon 結尾一律加上分號 （**;**） ## Property 名稱 一律採小駝峰式 lowerCamelCase :::danger public MyProp: number; ::: :::success public myProp: number; ::: ## Function 名稱 一律採小駝峰式 lowerCamelCase :::danger public MyFunction(): void { } ::: :::success public myFunction(): void { } ::: ## Function 結構 一律標上回傳值，包含 (void) 大括弧（**{}**）開頭空格不換行，結尾換行(若無實作可不換行) :::danger 錯誤： ``` public myFunction(): void { 略 } ``` ::: :::success 正確： ``` public myFunction(): void { 略 } ``` ``` public myFunction(): void { } // 無實作 ``` ::: ## 判斷式、巢狀結構 括弧（**()**）開頭空格 大括弧（**{}**）若僅執行單行依然必須加，開頭空格不換行，結尾換行 :::danger 錯誤： ``` if (略) { } else { } ``` ``` switch(略){ } ``` ::: :::success 正確： ``` if (略) console.log(略); // 單行可不加大括弧 ``` ``` if (略) { } else { } ``` ``` switch (略) { 略 } ``` ::: ## Commas Spacing :::danger 錯誤： ``` let a :number , b:number; ``` ``` public myFunction(a : number ,b: number): void { 略 } ``` ``` c = a +b; ``` ::: :::success 正確： ``` let a: number, b: number; ``` ``` public myFunction(a: number, b: number): void { 略 } ``` ``` c = a + b; ``` ::: ## Visual Studio Code 由 ESLint v2.4.4 落實 coding style :::spoiler eslintrc ```json= { "root": true, "env": { "browser": true, "node": true, "es2021": true }, "parserOptions": { "ecmaVersion": 2021, "sourceType": "module" }, "extends": [ "eslint:recommended" ], "ignorePatterns": [ "dist/**/*", "libs/**/*", "node_modules/**/*", "gameLibs/**/*", "webpack/**/*", "Dump.ts" ], "overrides": [ { "files": [ "*.ts", "*.tsx" ], "extends": [ "plugin:@typescript-eslint/recommended" ], "parser": "@typescript-eslint/parser", "plugins": [ "@typescript-eslint" ], "rules": { "@typescript-eslint/no-unused-vars": "off", "@typescript-eslint/no-empty-function": "off", "no-console": "warn", "@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/naming-convention": [ "error", { "selector": "default", "format": [ "camelCase" ] }, { "selector": "variableLike", "format": [ "camelCase" ] }, { "selector": "variable", "format": [ "camelCase" ] }, { "selector": "variable", "format": null, "modifiers": [ "destructured" ] }, { "selector": "classProperty", "format": [ "camelCase", "UPPER_CASE", "snake_case" ], "leadingUnderscore": "allowSingleOrDouble" }, { "selector": "parameter", "format": [ "camelCase" ], "leadingUnderscore": "allow" }, { "selector": "memberLike", "format": [ "camelCase" ] }, { "selector": "typeLike", "format": [ "PascalCase" ] }, { "selector": "typeParameter", "format": [ "PascalCase" ] }, { "selector": "interface", "format": [ "PascalCase" ] }, { "selector": "enumMember", "format": [ "UPPER_CASE" ] } ] } } ], "rules": { "no-unused-vars": "off", "no-empty-function": "off", "no-multiple-empty-lines": [ "error", { "max": 1, "maxBOF": 0, "maxEOF": 0 } ], "curly": "error", "brace-style": [ "error", "stroustrup" ], "eqeqeq": "error", "quotes": [ "error", "double" ], "semi": [ "error", "always" ], "no-var": "error", "eol-last": "error", "dot-notation": "error" } } ``` ::: ## Clean code * [Clean code concepts adapted for TypeScript](https://github.com/labs42io/clean-code-typescript) ###### tags: `公告`