vue3+vite+typescript+eslint+jest项目配置实践

vue3+vite+typescript+eslint+jest项目配置实践项目代码：vue3-quickstart本项目代码jest测试部分无法运行，参考项目代码下面的库参考这个项目代码：vite-vue3-scaffold1。项目初始化#全局安装vite-appnpmi-gvite-app#创建项目yarncreatevite-app#或者npminitvite-app#进入项目，安装依赖cdyarn#ornpmi#运行项目yarndev#打开浏览器http://localhost:3000查看2.引入TypeScript#添加ts依赖yarnadd--devtypescriptin创建一个typescript配置文件tsconfig.json在项目根目录中{"compilerOptions":{//允许从没有默认导出集的模块中进行默认导入。这不影响代码的输出，仅用于类型检查。"allowSyntheticDefaultImports":true,//解析非相对模块名称的基本目录"baseUrl":".","esModuleInterop":true,//从tslib导入辅助函数（如__extends、__rest等）"importHelpers":true,//指定生成哪个模块系统代码"module":"esnext",//确定如何处理模块。"moduleResolution":"node",//启用所有严格类型检查选项。//启用--strict等同于启用--noImplicitAny、--noImplicitThis、--alwaysStrict、//--strictNullChecks和--strictFunctionTypes和--strictPropertyInitialization。"strict":true,//生成对应的.map文件。"sourceMap":true,//忽略所有声明文件(*.d.ts)的类型检查。"skipLibCheck":true,//指定ECMAScript目标版本"target":"esnext",//要包含的类型声明文件名列表"types":[],"isolatedModules":true,//模块名称到baseUrlA路径映射列表。"paths":{"@/*":["src/*"]},//编译时需要导入的库文件列表。"lib":["ESNext","DOM","DOM.Iterable","ScriptHost"]},"include":["src/**/*.ts","src/**/*.tsx","src/**/*.vue","tests/**/*.ts","tests/**/*.tsx"],"exclude":["node_modules"]}在src目录下添加shim.d.ts文件/*eslint-disable*/importtype{DefineComponent}from'vue'declaremodule'*.vue'{constcomponent:DefineComponent<{},{},any>exportdefaultcomponent}Main.js改成根目录下的main.ts，打开Index.html改成：3.引入eslint#安装eslintprettier依赖#@typescript-eslint/parser@typescript-eslint/eslint-plugin支持eslint的typescriptyarnadd--deveslintprettiereslint-config-prettiereslint-plugin-prettiereslint-plugin-vue@typescript-eslint/parser@typescript-eslint/eslint-plugin在根目录创建一个eslint配置文件：.eslintrc.jsmodule.exports={parser:“vue-eslint-parser”，解析器选项：{parser:'@typescript-eslint/parser',ecmaVersion:2020,sourceType:'module',ecmaFeatures:{jsx:true}},extends:['plugin:vue/vue3-recommended','plugin:@typescript-eslint/recommended','prettier/@typescript-eslint','plugin:prettier/recommended'],rules:{'@typescript-eslint/ban-ts-ignore':'off','@typescript-eslint/explicit-function-return-type':'off','@typescript-eslint/no-explicit-any':'off','@typescript-eslint/no-var-requires':'off','@typescript-eslint/no-empty-function':'off','vue/custom-event-name-casing':'off','no-use-before-define':'off',//'no-use-before-define':[//'error',//{//functions:false,//classes:true,//},//],'@typescript-eslint/no-use-before-define':'off',//'@typescript-eslint/no-use-before-define':[//'error',//{//函数:false,//类:true,//},//],'@typescript-eslint/ban-ts-comment':'off','@typescript-eslint/ban-types':'off','@typescript-eslint/no-non-null-assertion':'off','@typescript-eslint/explicit-module-boundary-types':'off','@typescript-eslint/no-unused-vars':['error',{argsIgnorePattern:'^h$',varsIgnorePattern:'^h$'}],'no-unused-vars':['error',{argsIgnorePattern:'^h$',varsIgnorePattern:'^h$'}],'space-before-function-paren':'off',quotes:['error','single'],'comma-dangle':['error','never']}};建立prettier.config.jsmodule.exports={printWidth:100,tabWidth:2,useTabs:false,semi:false,//未尾随号vueIndentScriptAndStyle:true,singleQuote:true,//单引号quoteProps:'as-needed',bracketSpacing:true,trailingComma:'none',//未尾分号jsxBracketSameLine:false,jsxSingleQuote:false,arrowParens:'always',insertPragma:false,requirePragma:false,proseWrap:'never',htmlWhitespaceSensitivity:'strict',endOfLine:'lf'}4。引入jest来测试yarnadd--dev@babel/core@babel/preset-env@testing-library/jest-dom@types/jest@vue/test-utils@nextbabel-jestjestts-jstvue-jest@接下来创建jest.config.jsconstpath=require('path')module.exports={rootDir:path.resolve(__dirname),clearMocks:true,coverageDirectory:'coverage',coverageProvider:'v8',moduleFileExtensions:['vue','js','json','jsx','ts','tsx','node'],//别名设置moduleNameMapper:{'@/(.*)$':'/src/components/$1'},preset:'ts-jest',testEnvironment:'jsdom',//测试文件testMatch:['/tests/unit/*.spec.ts?(x)'],transform:{'^.+\\.vue$':'vue-jest','^.+\\js$':'babel-jest','^.+\\.(t|j)sx?$':'ts-jest'}}新测试用例文件test/unit/HelloWorld.spec.tsimport{mount}from'@vue/test-utils'importHelloWorldfrom'@/HelloWorld.vue'test('显示消息',async()=>{constwrapper=awaitmount(HelloWorld)//断言组件的渲染文本expect(wrapper.find('p').text()).toBe('0')awaitwrapper.find('button').trigger('click')expect(wrapper.find('p').text()).toBe('1')})在package.json命令（scripts）中加入"test":"jest"如下："scripts":{"dev":"vite","build":"vitebuild","test":"jest"},运行yarntest查看测试结果5.加入vue-router、vuexyarnaddvue-router@nextvuex@next在根目录下创建store/index.tsimport{InjectionKey}from'vue'import{createStore,Store}from'vuex'exportinterfaceState{count:number}exportconstkey:InjectionKey>=Symbol()exportconststore=createStore({state(){return{count:0}},mutations:{increment(state){state.count++}复制代码}})main.ts修改import{createApp}from'vue'import{store,key}from'./store'importAppfrom'./App'import'./index.css'constapp=createApp(App)app.use(store,key)app.mount('#app')components/HelloWord.vue修改