vue3+ts+vite集成eslint

2024-06-19 13:36

本文主要是介绍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}}
];

这篇关于vue3+ts+vite集成eslint的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1075180

相关文章

springboot简单集成Security配置的教程

《springboot简单集成Security配置的教程》:本文主要介绍springboot简单集成Security配置的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录集成Security安全框架引入依赖编写配置类WebSecurityConfig(自定义资源权限规则

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

springboot集成Deepseek4j的项目实践

《springboot集成Deepseek4j的项目实践》本文主要介绍了springboot集成Deepseek4j的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录Deepseek4j快速开始Maven 依js赖基础配置基础使用示例1. 流式返回示例2. 进阶

Spring Boot 集成 Quartz 使用Cron 表达式实现定时任务

《SpringBoot集成Quartz使用Cron表达式实现定时任务》本文介绍了如何在SpringBoot项目中集成Quartz并使用Cron表达式进行任务调度,通过添加Quartz依赖、创... 目录前言1. 添加 Quartz 依赖2. 创建 Quartz 任务3. 配置 Quartz 任务调度4. 启

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤:代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js

CSS @media print 使用详解

《CSS@mediaprint使用详解》:本文主要介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例,如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等,还提供了测试方法和关键注意事项,并分享了进阶技巧,详细内容请阅读本文,希望能对你有所帮助...

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分