TypeScript Coding Style

存取修飾 Access Level：public, protected, private

一律標上，但即便是 public（default）也要標上

錯誤：

myProp: number;

myFunction(): void { }

正確：

public myProp: number;

public myFunction(): void { }

Tab

空白 4 格

分號 Semicolon

結尾一律加上分號 （;）

Property 名稱

一律採小駝峰式 lowerCamelCase

public MyProp: number;

public myProp: number;

Function 名稱

一律採小駝峰式 lowerCamelCase

public MyFunction(): void { }

public myFunction(): void { }

Function 結構

一律標上回傳值，包含 (void)
大括弧（{}）開頭空格不換行，結尾換行(若無實作可不換行)

錯誤：

public myFunction(): void 
{
    略
}

正確：

public myFunction(): void {
    略
}

public myFunction(): void { } // 無實作

判斷式、巢狀結構

括弧（()）開頭空格
大括弧（{}）若僅執行單行依然必須加，開頭空格不換行，結尾換行

錯誤：

if (略)
{

}
else
{

}

switch(略){

}

正確：

if (略)
    console.log(略); // 單行可不加大括弧

if (略) {

} 
else {

}

switch (略) {
    略
}

Commas Spacing

錯誤：

let a :number , b:number;

public myFunction(a : number ,b: number): void { 略 }

c = a +b;

正確：

let a: number, b: number;

public myFunction(a: number, b: number): void { 略 }

c = a + b;

Visual Studio Code

由 ESLint v2.4.4 落實 coding style

eslintrc

{
    "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

tags: 公告