TS项目初始化(Vitest+Eslint+Prettier)

TS项目初始化(Vitest+Eslint+Prettier)

本文首发于：TS项目初始化(Vitest+Eslint+Prettier) -Aiysosis Blog(aiysosis.ink)，未经允许请勿转载。

前言

本文主要用于TS项目的快速初始化，使用yarn作为包管理器，使用Vitest代替Jest，因为Vitest提供了对TS的原生支持，不需要配置babel，且语法与Jest保持一致，具有比较小的迁移成本。Eslint+Prettier结合Vscode的自动格式化，让代码更加美观。

初始化

创建项目文件，首先初始化npm环境。

yarn init
#or
yarn init -y

-y默认初始化时所以的提问都回答yes。初始化成功，package.json文件被创建。

安装依赖

依赖列表（全部安装为开发依赖即可）。

@typescript-eslint/eslint-plugin
@typescript-eslint/parser
eslint
eslint-config-prettier
eslint-plugin-prettier
prettier
typescript
vitest

使用yarn安装依赖。

yarn add --dev @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-prettier prettier typescript vitest 

配置typescript

创建tsconfig.json文件，或者执行：

npx tsc --init

最终配置：

//tsconfig.json
{
   
  "compilerOptions": {
   
    "target": "es2016",                                  
    "module": "commonjs",                                
    "rootDir": "./",                                  
    "baseUrl": "./",                                  
    "paths": {
   
      "@/*":["./src/*"]//路径别名 @->src
    },                                      
    "types": ["vitest/globals"],//vitest 类型引入                               
    "allowJs": true,                                  
    "sourceMap": true,//便于 debug                               
    "esModuleInterop": true,