使用自动导入后,eslint报错 eslint9

news2025/3/17 22:35:06

前提:使用pnpm create vue@latest创建vue应用,并且在创建项目时就勾选eslint和prettier,不然有些配置还需要手动配,比如解决eslint和prettier的冲突问题

1. 解决使用自动导入后Eslint报错问题

  • 配置vite.config.ts
    // 自动导入api
    AutoImport({
      resolvers: [ElementPlusResolver()],
      imports: ['vue', 'pinia', 'vue-router'],
      // dts: 'src/auto-imports.d.ts', // 生成自动导入的类型声明文件
      eslintrc: {
        enabled: true, // 生成 ESLint 兼容的配置文件,运行程序后会生成下面这个文件,再设置成false
        filepath: './.eslintrc-auto-import.json', // 指定 ESLint 配置文件路径
      },
    }),
  • eslint.config.ts配置
import { createRequire } from 'module'
const require = createRequire(import.meta.url)
const autoImportConfig = require('./.eslintrc-auto-import.json')

export default defineConfigWithVueTs(
	.......
  {
    languageOptions: {
      // 导入变量
      globals: {
        ...autoImportConfig.globals, // 自动导入的全局变量
    },
  },
)

2. eslint完整配置文件

import pluginVue from 'eslint-plugin-vue' // Vue规范
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
import globals from 'globals'
import { createRequire } from 'module'
const require = createRequire(import.meta.url)
const autoImportConfig = require('./.eslintrc-auto-import.json')
// 它禁用了所有不必要的或可能与 Prettier 冲突的规则,确保将其放在最后,以便有机会覆盖其他配置。
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'

export default defineConfigWithVueTs(
  {
    name: 'app/files-to-lint',
    files: ['**/*.{ts,mts,tsx,vue}'],
  },

  {
    name: 'app/files-to-ignore',
    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
  },
  {
    languageOptions: {
      // 导入变量后,在项目中使用浏览器、node、自定义的变量时就不会报错
      globals: {
        ...globals.browser, // 浏览器全局变量
        ...globals.node, // Node.js 全局变量
        ...autoImportConfig.globals, // 自动导入的全局变量
      },
    },
  },
  pluginVue.configs['flat/essential'],
  vueTsConfigs.recommended,
  skipFormatting,
  {
    // 自定义规则
    rules: {
      'vue/multi-word-component-names': 'off', // 禁用 简单名字 规则
      'no-console': 'off',
      'no-debugger': 'off',
    },
  },
  {
    // 那些文件不需要eslint校验
    ignores: ['**/dist/**', '**/node_modules/**', '.css'],
  },
)

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

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

相关文章

交互式可视化进阶(Plotly Dash构建疫情仪表盘)

这里写目录标题 交互式可视化进阶(Plotly Dash构建疫情仪表盘)1. 引言2. 项目背景与意义3. 数据集生成与介绍4. GPU加速在数据处理中的应用5. 交互式仪表盘构建与Plotly Dash6. PyQt GUI集成与美化7. 工程整体架构8. 部分代码实现9. 代码自查与BUG排查10. 总结与展望交互式可…

如何选择适合您智能家居解决方案的通信协议?

如何选择适合您智能家居解决方案的通信协议? 在开发智能家居产品时,选择合适的通信协议对于设备的高效运行及其在智能家居系统中的互操作性至关重要。市面上协议众多,了解它们的特性并在做决定前考虑各种因素是非常必要的。以下是一些帮助您…

RabbitMQ可靠性进制

文章目录 1.生产者可靠性生产者重连生产者确认小结 2. MQ的可靠性数据持久化LazyQueue小结 3. 消费者的可靠性消费者确认机制消费者失败处理方案业务幂等性唯一消息ID业务判断 兜底方案业务判断 兜底方案 1.生产者可靠性 生产者重连 在某些场景下由于网络波动,可能…

版本控制器Git(5)

文章目录 前言一、理解标签二、创建标签三、操作标签四、多人协作场景一五、多人协作场景二总结 前言 本篇是最后一篇,主要介绍标签管理有关的内容 一、理解标签 标签定义:在Git中,标签(tag)是对某次提交(c…

【数据分析】读取文件

3. 读取指定列 针对只需要读取数据中的某一列或多列的情况,pd.read_csv()函数提供了一个参数:usecols,将包含对应的columns的列表传入该参数即可。 上面,我们学习了读取 "payment" 和 "items_count" 这…

Dify使用部署与应用实践

最近在研究AI Agent,发现大家都在用Dify,但Dify部署起来总是面临各种问题,而且我在部署和应用测试过程中也都遇到了,因此记录如下,供大家参考。Dify总体来说比较灵活,扩展性比较强,适合基于它做…

Java 大视界 -- 基于 Java 的大数据机器学习模型的迁移学习应用与实践(129)

💖亲爱的朋友们,热烈欢迎来到 青云交的博客!能与诸位在此相逢,我倍感荣幸。在这飞速更迭的时代,我们都渴望一方心灵净土,而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识,也…

1.Windows+vscode+cline+MCP配置

文章目录 1.简介与资源2.在windows中安装vscode及Cline插件1. 安装vscode2. 安装Cline插件3. 配置大语言模型3. 配置MCP步骤(windows) 1.简介与资源 MCP官方开源仓库 MCP合集网站 参考视频 2.在windows中安装vscode及Cline插件 1. 安装vscode 2. 安装Cline插件 Cline插件…

C#的字符串之String类与StringBuilder类区别于适用场景

一、分清楚值类型与引用类型 正确理解值类型与引用类型,可以更好的帮助软件开发人员写出性能更好且正确稳定运行的程序: C#值类型与引用类型区别 区别值类型引用类型定义所有继承自【System.ValueType】类型的都是值类型(valueType继承自Sys…

关于WPS的Excel点击单元格打开别的文档的两种方法的探究【为单元格添加超链接】

问题需求 目录和文件结构如下: E:\Dir_Level1 │ Level1.txt │ └─Dir_Level2│ Level2.txt│ master.xlsx│└─Dir_Level3Level3.txt现在要在master.xlsx点击单元格进而访问Level1.txt、Level2.txt、Level3.txt这些文件。 方法一:“单元格右键…

conda的基本使用及pycharm里设置conda环境

创建conda环境 conda create --name your_env_name python3.8 把your_env_name换成实际的conda环境名称,python后边的根据自己的需要,选择python的版本。 激活conda环境 conda activate your_env_name 安装相关的包、库 conda install package_name …

计算机网络-网络规划与设计

基本流程 需求分析—》通信规范分析—》逻辑网络设计—》物理网络设计—》实施阶段 需求分析: 确定需求,包括:业务需求、用户需求、应用需求、计算机平台需求、网络通信需求等。 产物:需求规范 通信规范分析: 现有…

六种最新优化算法(TOC、MSO、AE、DOA、GOA、OX)求解多个无人机协同路径规划(可以自定义无人机数量及起始点),MATLAB代码

一、算法简介 (一)阿尔法进化(Alpha Evolution,AE)算法 阿尔法进化(Alpha Evolution,AE)算法是2024年提出的一种新型进化算法,其核心在于通过自适应基向量和随机步长的…

练习-依依的询问最小值(前缀和差分)

问题描述 依依有个长度为 n 的序列 a,下标从 1 开始。 她有 m 次查询操作,每次她会查询下标区间在[li​,ri​] 的 a 中元素和。她想知道你可以重新排序序列 a,使得这 m 次查询的总和最小。 求你求出 m 次查询总和的最小值。 输入格式 第…

ctfshow web刷题记录

RCE 第一题 eval代码执行 : 1、使用system 加通配符过滤 ?csystem("tac%20fl*") ; 2、反字节执行 xxx %20 echo 反字节 3、变量转移 重新定义一个变量 让他代替我们执行 4、伪协议玩法 ?cinclude$_GET[1]?>&1php://filter/readc…

MySQL单表查询大全【SELECT】

山再高,往上攀,总能登顶;路再长,走下去,定能到达。 Mysql中Select 的用法 ------前言------【SELECT】0.【准备工作】0.1 创建一个库0.2 库中创建表0.3 表中加入一些数据 1.【查询全部】2.【查询指定列】2.1查询指定列…

考研系列-408真题计算机网络篇(18-23)

写在前面 此文章是本人在备考过程中408真题计算机网络部分(2018年-2023年)的易错题及相应的知识点整理,后期复习也常常用到,对于知识提炼归纳理解起到了很大的作用,分享出来希望帮助到大家~ # 2018 1.停止-等待协议的…

卷积神经网络(CNN)之 EfficientNet

在深度学习领域,模型的计算效率与性能之间的平衡一直是一个核心挑战。随着卷积神经网络(CNN)在图像分类、目标检测等任务中取得显著成果,模型的复杂度和计算需求也急剧增加。2019年,Google Research 提出的 EfficientN…

【eNSP实战】将路由器配置为DHCP服务器

拓图 要求: 为 office100 和 office200 分别配置地址池 AR1接口配置 interface GigabitEthernet0/0/0ip address 192.168.100.1 255.255.255.0 # interface GigabitEthernet0/0/1ip address 192.168.200.1 255.255.255.0 AR1路由器上创建office100地址池 [AR1…

Postman下载安装及简单入门

一.Postman简介 Postman是一款API测试工具,可以帮助开发、测试人员发送HTTP请求,与各种API进行交互,并分析响应 二.下载与安装 访问Postman官网(https://www.postman.com/),下载适…