TS項目搭建所需配置總結

TS項目搭建所需配置總結

tsConfig.json 文件

文檔鏈接 🔗

該文件存在於項目的根目錄下，用於指定編譯項目所需的文件和編譯選項。

compilerOptions：編譯選項

文檔地址

常用的比如：

配置	含義
"jsx": "react"	在tsx文件中支持react的jsx語法
"baseUrl": "."	解析非相對模塊名的基準目錄。
"paths":{"@/*": ["src/*"]}	模塊名到基於 baseUrl的路徑映射的列表。可以用@開頭的簡化路徑
"moduleResolution": "node"	模塊解析策略採用Nodejs的算法
"declarationDir": "dist/types"	生成的聲明文件的儲存目錄
"declaration": true	生成相應的.d.ts文件

指定編譯文件

如果files include exclude 都沒有指定，那麼會把目錄下所有的ts文件進行編譯

files

用來指定待編譯文件，一個具體的文件列表

include

指定待編譯文件，寫了這個屬性就不需要files了。寫法是正則匹配

exclude

從指定的待編譯文件中過濾不需要編譯的文件

typings.d.ts 文件

文件存放在根目錄下，文件名可以自行修改

目前我們項目中這個文件主要是解決一些三方庫沒有聲明文件會報錯的問題，通過在項目根目錄下的typings.d.ts文件做如下聲明可以解決：

declare module 'xxx';

另外一種情況比較常見，如果我import了一個less文件，會報一個找不到module的錯。所以需要這樣聲明：

declare module '*.less';

eslint與tslint

官方消息tslint在2019年將會被棄用，所以項目中也不再使用tslint。

首先，安裝依賴：

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

eslint版本建議在6.0.0以上

@typescript-eslint/parser這個包是一個解析器，允許eslint能夠實現對ts代碼的語法檢測。
接着在根目錄下建立.eslintrc.js文件，並指明parser:

module.exports = {
    parser: '@typescript-eslint/parser',
}

然後，安裝語法檢測插件

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

該插件必須和上面的解析器一同使用，用來具體實現定義的ts檢測規則，至此，你也可以開始配置你所需要的檢測規則了，支持配置的規則詳見：Supported Rules

module.exports = {
    parser: '@typescript-eslint/parser',
    plugins: ['@typescript-eslint'],
    extends: [  
      'plugin:react/recommended',  
      'plugin:@typescript-eslint/recommended',  
    ],
    rules:{
        
    }
}

Prettier

倉庫地址

用來根據你配置的lint來格式化代碼的工具。本節主要介紹如何接入prettier到你的倉庫以及搭配eslint來使用

首先，安裝必要依賴

$npm install prettier --save-dev
$npm install eslint-config-prettier --save-dev
$npm install eslint-plugin-prettier --save-dev

• eslint-config-prettire: 用於關閉所有不必要或與prettier衝突的規則
• eslint-plugin-prettier：根據你配置的lint來格式化代碼

然後，配置eslintrc.js擴展

module.exports = {
    extends: [
    'plugin:react/recommended',  
    'plugin:@typescript-eslint/recommended',  
    'prettier',  
    'prettier/@typescript-eslint',
    ]
}

通常格式化代碼需要在提交之前進行，或者保存文件的時候。那麼如果需要在提交前進行，需要參考以下文檔

https://prettier.io/docs/en/precommit.html

這裏又會涉及兩個依賴：husky pretty-quick，具體不再贅述，可以github一下