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,                             
    "forceConsistentCasingInFileNames": true,            
    "strict": true,                                      
    "noImplicitAny": false,//视使用情况而定                            
    "skipLibCheck": true                                 
  }
}

配置vitest

Getting Started | Guide | Vitest

配置文件

创建vitest.config.ts，测试文件名统一为：*.spec.ts

//vitest.config.ts
import { defineConfig } from "vitest/config";
import path from "path";

export default defineConfig({
	test: {
		globals: true,
	},
	resolve: {
        //别名配置，和tsconfig中的alias对应
		alias: [
			{
				find: /^@/,//这里必须使用正则表达式
                //把正则匹配到的地方，@->src
				replacement: path.resolve(__dirname, "./src"),
			},
		],
	},
});

断点调试

接下来启动vscode的断点调试，否则可能出现打上断点也不会自动暂停调试的问题。

Debugging | Guide | Vitest

点击vscode左侧的debug&run图标，可以看到这样的页面：

点击划红线部分的“create a launch.json file” 会在工作区创建launch.json文件（弹出框会让选择平台，选node即可），填入以下配置（来自vitest官方文档）。

{
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Current Test File",
      "autoAttachChildProcesses": true,
      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
      "args": ["run", "${relativeFile}"],
      "smartStep": true,
      "console": "integratedTerminal"
    }
  ]
}

添加命令

在package.json的“scripts”中添加调试命令（没有”scripts“就自己创建）。

"scripts": {
    "test": "vitest"
  },

安装插件

记得安装Vitest的插件

配置Eslint

Configuring ESLint - ESLint - Pluggable JavaScript Linter

首先配置Eslint，创建.eslintrc.js文件。

//.eslintrc.js
module.exports = {
	root: true,
	parser: "@typescript-eslint/parser",
    //添加了prettier的拓展
	extends: ["prettier/@typescript-eslint", "plugin:prettier/recommended"],
	plugins: ["@typescript-eslint"],
	env: {
		browser: true,//window对象在这里
		node: true,
	},
	rules: {
        //这些都可以自定义
		"@typescript-eslint/no-explicit-any": "off",//可以用any
	},
};

记得在Vscode中添加eslint的拓展。

配置Prettier

Options · Prettier

创建.prettierrc文件，填入配置：

{
    "tabWidth": 4,//缩进的宽度
    "useTabs": true,//缩进用tab，不用空格
    "semi": true,//末尾添加分号
    "singleQuote": false,//单引号
    "TrailingCooma": "all",//对象或数组的项末尾自动加逗号
    "bracketSpacing": true,//对象，数组括号与文字之间加空格 { foo: bar }
    "jsxBracketSameLine": false,
    "arrowParens": "avoid",//箭头函数单一参数是否省略括号
    "prettier.printWidth": 120//单行的长度
}

记得安装Pritter的拓展。

格式化工具&自动格式化

修改默认格式化工具

打开File -> Preference（偏好设置） -> Settings。

在搜索框输入editor.defaultFormatter，选择Prettier - Code formatter。这里左上角我选择在Workspace(工作区)中配置，而不是在User中全局配置。可以根据个人需求自行选择。

启动自动格式化

打开File -> Preference（偏好设置） -> Settings。

在搜索框输入format，勾选Format On Paste(粘贴时格式化)以及Format On Save（保存时格式化）。

大功告成！

配置git

初始化仓库。

git init

接下来创建.gitignore文件，填入以下内容，让git忽略掉node_modules里的包。

#.gitignore
node_modules

随便测试下

随便写点文件：

pathTest用来测试我们的别名，看看能否正常运行。

//pathTest
//a,b都是any类型，没有报错
export function add(a, b) {
	return a + b;
}

然后写一个单元测试，main.spec.ts

//main.spec.ts
//使用alias（别名）引入路径
import { add } from "@/pathTest";

describe("main", () => {
	test("happy path", () => {
		expect(add(1, 1)).toBe(2);
	});
});

跑一下单元测试

npm run test

顺利通过。

接下来试试断点调试：

打上断点，左边绿色箭头就是Vitest插件为我们提供的很方便的测试运行按钮（没有的话重启一下vscode）。

这里右键点击箭头，选择debug test，可以看到测试顺利在断点处暂停了：

至此环境配置顺利结束👏👏👏🎉🎉🎉