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

cz-cli

仓库地址

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