vue3+ts+vite集成eslint

项目中安装eslint

yarn add eslint -D

eslint初始化

npx eslint --init

按照下方操作即可

在这里插入图片描述

安装@typescript-eslint/parser

yarn add @typescript-eslint/parser -D

安装vite-plugin-eslint2

yarn add vite-plugin-eslint2 -D

配置vite-plugin-eslint2

// vite.config.ts
import eslint from 'vite-plugin-eslint2';export default defineConfig({plugins: [eslint({cache: false, // 不生成eslint缓存include: ['src/**/*.{js,jsx,ts,tsx,vue}']})]
})

eslint.config.js参考

import globals from 'globals';
import pluginJs from '@eslint/js';
import tsEslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';export default [{languageOptions: {globals: {...globals.browser,Component: true,ComponentPublicInstance: true,ComputedRef: true,EffectScope: true,ExtractDefaultPropTypes: true,ExtractPropTypes: true,ExtractPublicPropTypes: true,InjectionKey: true,PropType: true,Ref: true,VNode: true,WritableComputedRef: true,apiUrl: true,axios: true,computed: true,createApp: true,customRef: true,defineAsyncComponent: true,defineComponent: true,effectScope: true,getCurrentInstance: true,getCurrentScope: true,h: true,inject: true,isProxy: true,isReactive: true,isReadonly: true,isRef: true,markRaw: true,nextTick: true,onActivated: true,onBeforeMount: true,onBeforeRouteLeave: true,onBeforeRouteUpdate: true,onBeforeUnmount: true,onBeforeUpdate: true,onDeactivated: true,onErrorCaptured: true,onMounted: true,onRenderTracked: true,onRenderTriggered: true,onScopeDispose: true,onServerPrefetch: true,onUnmounted: true,onUpdated: true,provide: true,reactive: true,readonly: true,ref: true,resolveComponent: true,shallowReactive: true,shallowReadonly: true,shallowRef: true,statusCode: true,toRaw: true,toRef: true,toRefs: true,toValue: true,triggerRef: true,unref: true,useAttrs: true,useCssModule: true,useCssVars: true,useLink: true,useRoute: true,useRouter: true,useSlots: true,watch: true,watchEffect: true,watchPostEffect: true,watchSyncEffect: true,process: true},parserOptions: {parser: '@typescript-eslint/parser' // 需要手动安装这个插件}}},pluginJs.configs.recommended,...tsEslint.configs.recommended,...pluginVue.configs['flat/essential'],{rules: {'quotes': ['error', 'single'], // 字符串必须是单引号'semi': ['error', 'always', { omitLastInOneLineBlock: true }], // 必须使用分号'no-duplicate-imports': 'error', // 禁止重复导入'no-unreachable-loop': 'error', // 不允许循环体只允许一次迭代'no-use-before-define': 'error', // 禁止定义变量前使用'camelcase': 'error', // 强制驼峰命名'complexity': ['error', 10], // 限制圈复杂度'curly': 'error', // 对所有控制语句强制执行一致的大括号样式'default-case': 'error', // 要求 switch 语句中有 default 分支'default-case-last': 'error', // 强制 default 分支出现在最后'default-param-last': 'error', // 强制在函数的参数默认值出现在最后'dot-notation': 'error', // 强制尽可能地使用点号'eqeqeq': 'error', // 要求使用 === 和 !=='func-name-matching': 'error', // 要求函数名与赋值给它们的变量名或属性名相匹配'init-declarations': 'error', // 要求或禁止 var 声明中的初始化'max-depth': ['error', 3], // 强制可嵌套的块的最大深度'no-alert': 'error', // 禁用 alert、confirm 和 prompt'no-caller': 'error', // 禁用 arguments.caller 或 arguments.callee'no-eval': 'error', // 禁用 eval()'no-floating-decimal': 'error', // 禁止数字字面量中使用前导和末尾小数点'no-implied-eval': 'error', // 禁止使用类似 eval() 的方法'no-nested-ternary': 'error', // 禁用嵌套的三元表达式'no-var': 'error', // 要求使用 let 或 const 而不是 var'no-unused-vars': 'off', // 可以出现未使用过的函数参数变量'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 禁用 console'prefer-const': ['error', { destructuring: 'all' }], // 要求使用 const 声明那些声明后不再被修改的变量'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 0, maxBOF: 0 }], // 禁止出现多行空行'no-extra-parens': 'error', // 禁止不必要的括号'object-curly-spacing': ['error', 'always'], // 强制在花括号中使用一致的空格'no-param-reassign': ['error', { props: true }], // 禁止对 function 的参数进行重新赋值'@typescript-eslint/no-explicit-any': ['off'], // 可以使用 any'vue/multi-word-component-names': ['off'], // 可以使用多个单词的组件名'vue/no-setup-props-destructure': ['off'], // 可以使用 props 解构'prefer-spread': 'off'// 可以使用apply}}
];

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/30491.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Flask新手入门(一)

前言 Flask是一个用Python编写的轻量级Web应用框架。它最初由Armin Ronacher作为Werkzeug的一个子项目在2010年开发出来。Werkzeug是一个综合工具包,提供了各种用于Web应用开发的工具和函数。自发布以来,Flask因其简洁和灵活性而迅速受到开发者的欢迎。…

【计算机网络仿真实验-实验2.7】单臂路由

实验2.7 单臂路由 1. 实验拓扑图 2. 测试连通性 测试PC1 PC2 PC3 之间的连通性 无法ping通,因为它们处在不同的网段,而二层交换机不具备路由功能,因此没办法接通 3. 在交换机上创建vlan10,并将端口0/2划分到vlan10中 Switch>…

Java并发编程深度解析:构建高并发应用的实践与探究

摘要:随着互联网技术的飞速发展,大型分布式系统对并发处理能力的要求越来越高。Java作为企业级应用的主流开发语言,在并发编程方面有着深厚的积累和强大的生态支持。本文将深入探讨Java并发编程的基础知识,高级技巧,以…

JavaScript 函数与事件

1. JavaScript自定义函数 语法: function 函数名(参数列表){ 方法体; } 在函数被调用时,一个 arguments 对象就会被创建,它只能使用在函数体中,以数组的形式来管理函数的实际…

HTML基本标签使用【超链接标签、表格标签、表单标签、input标签】

目录 一、基本介绍1.1 概念1.2 HTML的核心特点 二、HTML基本标签三、超链接标签四、表格标签✌<table> 标签属性✍<tr> 标签属性✌ <td> 和 <th> 标签属性演示注意事项 五、表单标签综合应用 最后 一、基本介绍 1.1 概念 HTML&#xff0c;全称为超文…

小阿轩yx-Nginx Rewrite

小阿轩yx-Nginx Rewrite Nginx Rewrite 概述 现在 Nginx 已经成为很多公司作为前端反向代理服务器的首选 实际工作中会遇到很多跳转(重写 URL)的需求 更换域名后需要保持旧的域名能跳转到新的域名上某网页发生改变需要跳转到新的页面网站防盗链等等需求 后端使用的Nginx 服…

SpringBoot集成slf4j日志配置

目录 前言 1、slf4j概述 2、pom.xml的日志依赖 3、application.yml的日志配置 4、logback.xml配置文件定义 5、logback.xml配置文件解析 5.1 定义日志的存储路径 5.2 定义日志的输出格式 5.3 定义控制台输出 5.4 定义日志相关参数 5.5 定义日志的输出级别 6、测试日…

利用JAVA语言调用GLM-4接口实战指南

一、什么是API接口 API&#xff08;Application Programming Interface&#xff0c;应用程序编程接口&#xff09;是一种软件接口&#xff0c;它定义了不同应用程序之间如何相互通信、交互。API接口分为很多种&#xff0c;常见的有Web API&#xff0c;数据库API&#xff0c;操…

Perl语言快速入门学习

1. 引言 Perl&#xff08;Practical Extraction and Report Language&#xff09;是一种功能强大且灵活的编程语言&#xff0c;广泛应用于文本处理、系统管理、网络编程等领域。本文将带领大家了解Perl语言的基础知识&#xff0c;帮助初学者快速入门。 2. 什么是Perl&#xf…

数据结构-算法和算法分析

目录 前言一、算法1.1 算法与程序1.2 算法描述方法1.3 算法特性1.4 算法设计的要求 二、算法分析2.1 算法时间效率的度量2.1.1 事前分析方法算法的渐进时间复杂度算法时间复杂度分析例子算法最坏时间复杂度时间复杂度的计算规则 2.2 算法空间效率的度量 总结 前言 程序 数据结…

如何相互转换图片格式?如何转换jpg、bmp、png格式?

图片的格式有很多种&#xff0c;常见的有jpg、bmp、png格式&#xff0c;这些格式本质上没有太大区别&#xff0c;安卓和电脑都可以直接打开查看&#xff0c;但有时还是会用到一些固定的格式&#xff0c;例如&#xff0c;上传个人信息时&#xff0c;如果图片格式不符合要求&…

参数量Params和每秒浮点运算次数FLOPs的单位是多少

先看一下yolov8的表 模型计算量(FLOPs)和参数量(Params)是衡量深度学习算法复杂度的两个重要指标&#xff0c;它们可以用来评估一个模型的性能和实用性。以下是对这两个指标的理解&#xff1a; 1、Params - 参数量 即模型中需要学习的参数数量&#xff0c;它是衡量模型复杂度的…

pytorch基础【4】梯度计算、链式法则、梯度清零

文章目录 梯度计算计算图&#xff08;Computational Graph&#xff09;梯度求导&#xff08;Gradient Computation&#xff09;函数与概念 示例代码更多细节梯度求导的过程梯度求导的基本步骤示例代码注意事项总结 链式法则是什么&#xff1f;链式法则的数学定义链式法则在深度…

VMR,支持30+种编程语言的SDK版本管理器,支持Windows/MacOS/Linux。

官方文档地址&#xff1a;documents 官方项目地址&#xff1a;github 欢迎安装使用&#xff0c;分享转发&#xff0c;前往github star。 跨平台&#xff0c;支持Windows&#xff0c;Linux&#xff0c;MacOS支持多种语言和工具&#xff0c;省心受到lazygit的启发&#xff0c;拥…

Flutter【组件】可折叠文本组件

简介 flutter 可折叠文本组件。 点击展开&#xff0c;收起折叠文本。支持样式自定义 github地址&#xff1a; github.com/ThinkerJack… pub地址&#xff1a;https://pub.dev/packages/jac_uikit 展开收起文本 使用方式&#xff1a; ExpandableText(content: 测试 * 50,ma…

qt基于QGraphicsView的屏幕旋转

一、代码实现 实现代码示例 MainWindow2 w;QGraphicsScene *scene new QGraphicsScene;QGraphicsProxyWidget *gw scene->addWidget(&w);// 旋转角度gw->setRotation(90);QGraphicsView *view new QGraphicsView(scene);//view->resize(1024, 600);//scene-&g…

生活实用口语柯桥成人外语培训机构“客服”用英文怎么说?

● 01. “客服”英语怎么说&#xff1f; ● 我们都知道“客服”就是“客户服务”&#xff0c; 所以Customer Service就是#15857575376客服的意思。 但是这里的“客服”指代的不是客服人员&#xff0c; 而是一种Service服务。 如果你想要表达客服人员可以加上具体的职位&a…

中国500米分辨率年平均LAI数据集(2000-2020)

叶面积指数LAI(Leaf Area Index)是描述植被冠层几何结构的基本参数之一&#xff0c;被定义为单位地表面积上所有叶片面积的倍数&#xff0c;它控制着植被的许多生物物理过程&#xff0c;如光合作用、呼吸作用、蒸腾作用、碳循环和降水截获等&#xff0c;是陆面过程一个十分重要…

CF 952 E.Secret Box

原题链接&#xff1a;Problem - E - Codeforces 题目大意&#xff1a;多组测试数据&#xff0c;给一个大长方体的长宽高和一个小长方体的体积&#xff0c;问小长方体最大能在大长方体里面放多少种不同的位置。 思路&#xff1a;枚举小长方体的长和宽&#xff0c;然后判断高能…

安装免费版的jfrog artifactory oss

1、下载 软件&#xff0c;本案例安装的是 jfrog-artifactory-oss-7.59.11-linux.tar.gz https://releases.jfrog.io/artifactory/bintray-artifactory/org/artifactory/oss/jfrog-artifactory-oss/ 2、解压下载下来的压缩包 tar zxf jfrog-artifactory-oss-7.59.11-linux.tar…