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 一下

cz-cli

仓库地址

这是一个能让你的 commit 更加友好的工具。我们的项目也 friendly 了 cz-cli。有需要可以直接仓库参考进行配置。很简单