vite4+vue3+ts+element-plus项目搭建流程系列文章目录【element-plus】table表格每行圆角解决方案element也通用【Vue3+Vite+Ts+element-plus】使用tsx实现左侧栏菜单无限层级封装超级详细GitBook和GitLab集成步骤【linux环境】相关插件连接:vitehttps://cn.vitejs.dev/guide/vuehttps://cn.vuejs.org/vue-routerhttps://router.vuejs.org/zh/vuexhttps://vuex.vuejs.org/zh/guide/Piniahttps
internal/modules/cjs/loader.js:985throwerr;^Error:Cannotfindmodule'@vue/cli-plugin-eslint'Requirestack:-C:\Users\lenovo\AppData\Roaming\npm\node_modules\@vue\cli-service\lib\Service.js-C:\Users\lenovo\AppData\Roaming\npm\node_modules\@vue\cli-service\bin\vue-cli-service.jsatFunction.Module._resolveF
问题复现搭建Vite项目pnpmcreatevitemy-vue-app--templatevue-ts安装eslint-config-alipnpmi-Deslint-config-ali@typescript-eslint/parser@typescript-eslint/eslint-plugineslint-plugin-importeslint-import-resolver-typescriptvue-eslint-parsereslint-plugin-vue配置.eslintrc{"extends":["eslint-config-ali/typescript/vue"]}安装
原因:在用vscode编写vue代码时,因为安装的有vetur插件,所以当代码中有v-for语法时,会提示,“Elementsiniterationexpecttohave‘v-bind:key’directives.eslint-plugin-vue”这个错误。这是eslint的功能,对vue进行了eslint检查。解决:第一种方法,添加:key属性在v-for指令后加上:key=“value”第二种方法,修改vetur配置路径:vscode->File->Preferences->Settings搜索:vetur.validation.template取消勾选
安装pnpmi-Deslint@antfu/eslint-config创建eslint.config.js文件//如果没有在page.json配置"type":"module"constantfu=require('@antfu/eslint-config').defaultmodule.exports=antfu()//配置了"type":"module"importantfufrom'@antfu/eslint-config'exportdefaultantfu()创建.vscode/settings.json文件配置保存自动修复(如果不需要可以跳过){//EnabletheESlintf
一、专栏介绍欢迎加入本专栏!我将带领您从零开始快速掌握React,从搭建项目到深入理解React项目。后续还会将主流的UmiMax作为前端应用框架,并借助AntDesignPro来设计用户界面。在这个专栏中,我将为您揭示开发过程中常见功能的实现方法,并通过实际案例展示这些技术的实际应用。让我们一起开启这场技术之旅吧!二、环境准备需要准备node环境,在本专栏中我将使用nodev16.18.0和npm8.19.0作为基础环境进行搭建和开发项目案例。接着我们需要把npm镜像更改为国内淘宝镜像,这样在下载依赖的时候能够更快。查看npm源镜像npmconfiggetregistry切换npm源镜像np
前言我的项目版本如下:React:V18.2.0Node.js:V16.14.0TypeScript:最新版工具:VsCode本文将采用图文详解的方式,手把手带你快速完成在React项目中配置husky、prettier、commitLint,实现编码规范的统一,git提交规范的统一。文章目录前言一、使用eslint1.1装包1.2ESLint插件安装1.3创建命令并使用二、使用prettier2.1装包2.2创建配置文件2.3安装插件2.3创建命令并使用2.4vscode配置2.5代码风格配置2.6重启vscode三、将代码提交到git仓库四、使用husky4.1简介4.2安装4.3编辑pa
有时候手动安装了一个npm包A,npm包A里面包含了npm包B,这时候如果importxxxfrom'npm包B';eslint会报错,提示npm包B不在package.json里面 解决方法:在eslintrc.js增加配置module.exports={rules:{'import/no-extraneous-dependencies':[0,{devDependencies:true,peerDependencies:true//optionalDependencies:true,//bundledDependencies:true}]}};
错误如图所示:解决方法: 将下面的代码复制到vue.config.js即可:const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({transpileDependencies:true,lintOnSave:false})
eslint+prettier+vscode自动保存用起来感觉非常爽快。一般来说,安装eslint+prettier插件,然后使用相关脚手架配套的eslint+prettier,无法自动格式代码,每次都需要执行格式化命令。这里贴出保存自动格式化代码的setting.json。//...其他配置项//eslint配置开始//eslint检测开关"eslint.enable":true,//需要eslint校验的文件"eslint.validate":{ "javascript", "javascriptreact", "typescript", "typescriptreact", "vue",