TypeScript-工程

環境配置：

1. node -v
2. npm install typescript -g （建議不要全局安裝）
3. tsc -v
4. tsc --init ( tsconfig.json )
5. tsconfig.json ( 配置項修改 )

　　　Ctrl + Shift + B ( vscode 解析 ts 文件爲 js )

在 TypeScript 中使用 ESLint:

• 安裝 ESLint

npm install eslint --save-dev

因 ESLint 默認使用ESpree進行語法解析器，不能識別 TypeScript 語法，則須要安裝 @typescript-eslint/parser，替換掉默認的解析器:

npm install typescript @typescript-eslint/parser --save-dev

 

而後安裝對應的插件 @typescript-eslint/eslint-plugin ，此插件是 eslint 默認規則的補充，提供了額外的適用於 ts 語法的規則。

npm install @typescript-eslint/eslint-plugin --save-dev

• 建立配置文件

配置文件的名稱通常爲：.eslintrc.js / .eslintrc.json

根目錄下建立 .eslintrc.js 文件，以下：

module.exports = {

    parser: '@typescript-eslint/parser',

    plugins: ['@typescript-eslint'],

    rules: {

        // 禁止使用 var

        // off:關閉；warn:警告；error:報錯；

        'no-var': "error",

        // 優先使用 interface 而不是 type

        '@typescript-eslint/consistent-type-definitions': [

            "error",

            "interface"

        ]

    }

}

• 檢查整個項目的 ts 文件

像 Vue 建立的項目，項目源文件通常都是放在 src 目錄下，因此將 package.json 中的 eslint 腳本改成對一個目錄下的 ts 文件進行檢查，eslint 不會檢查 .ts 後綴的文件，則須要配置上 --ext .ts

{
    "script": {
        "eslint": "eslint src --ext .ts"
    }
}

• 使用 AlloyTeam 的 ESLint 配置

推薦使用  AlloyTeam ESLint 規則中的 TypeScript 版本，（AlloyTeam ESLint 規則）與 Prettier 徹底兼容：

npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-alloy

在項目根目錄下建立 .eslintrc.js，並寫下以下代碼：

module.exports = {
    extends: [
        'alloy',
        'alloy/typescript',
    ],
    env: {
        // 這裏填入你的項目用到的環境
        // 它們預約義了不一樣環境的全局變量，好比：
        //
        // browser: true,
        // node: true,
        // mocha: true,
        // jest: true,
        // jquery: true
    },
    globals: {
        // 這裏填入你的項目須要的全局變量
        // false 表示這個全局變量不容許被從新賦值，好比：
        //
        // myGlobal: false
    },
    rules: {
        // 這裏填入你的項目須要的個性化配置
    }
};