让eslint的错误信息显示在项目界面上

1.需求描述

效果如下
让eslint中的错误,显示在项目界面上

在这里插入图片描述

2.问题解决

1.安装 vite-plugin-eslint 插件

npm install vite-plugin-eslint --save-dev

2.配置插件

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(), eslintPlugin({ cache: false })],server: {hmr: {overlay: true // 启用:开发服务器错误的屏蔽;这个与vite-plugin-eslint插件配合,形成 发现eslint错误会在项目界面显示错误}}
})

3.进行测试就可以

3.参考文章连接

  • vite框架使用eslint+prettier配置,并且将错误信息显示在浏览器界面上
  • vite-plugin-eslint npm地址

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

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

相关文章

基于黄金正弦算法优化的BP神经网络(预测应用) - 附代码

基于黄金正弦算法优化的BP神经网络(预测应用) - 附代码 文章目录 基于黄金正弦算法优化的BP神经网络(预测应用) - 附代码1.数据介绍2.黄金正弦优化BP神经网络2.1 BP神经网络参数设置2.2 黄金正弦算法应用 4.测试结果:5…

C语言练习1(巩固提升)

C语言练习1 选择题 前言 “人生在勤,勤则不匮。”幸福不会从天降,美好生活靠劳动创造。全面建成小康社会的奋斗目标,为广大劳动群众指明了光明的未来;全面建成小康社会的历史任务,为广大劳动群众赋予了光荣的使命&…

采用typescript编写,实现ofd前端预览、验章

前言 浏览器内核已支持pdf文件的渲染,这极大的方便了pdf文件的阅读和推广。ofd文件作为国产板式标准,急需一套在浏览器中渲染方案。 本人研究ofd多年,分别采用qt、c# 开发了ofd阅读器。本人非前端开发人员,对js、typescript并不熟…

Maven 一键部署到 SSH 服务器

简介 利用 Maven Mojo 功能一键部署 jar 包或 war 包到远程服务器上。 配置 在 maven 的setting.xml 配置服务器 SSH 账号密码。虽然可以在工程的 pom.xml 直接配置&#xff0c;但那样不太安全。 <servers><server><id>iq</id><configuration&…

【C++代码】有序数组的平方,长度最小的子数组,螺旋矩阵 II--代码随想录

题目&#xff1a;有序数组的平方 给你一个按 非递减顺序 排序的整数数组 nums&#xff0c;返回 每个数字的平方 组成的新数组&#xff0c;要求也按 非递减顺序 排序。 题解 数组其实是有序的&#xff0c; 只不过负数平方之后可能成为最大数了。那么数组平方的最大值就在数组的…

食品制造行业云MES系统解决方案

食品饮料行业大致可以分为初级产品加工、二次加工、食品制造、食品分装、调味品和饲料加工等几大类。由于处于产业链不同的位置&#xff0c;其管理存在一定的差异&#xff0c;那么食品行业的MES应该怎么建设呢&#xff1f; 食品饮料行业生产管理特点&#xff1a; 食品饮料行业…

全球Salesforce顾问薪资大揭秘!顾问如何升职加薪?

Salesforce顾问通过针对业务挑战提出、记录和分析需求&#xff0c;提供解决方案&#xff0c;从而帮助企业改善Salesforce的流程和效率。顾问是企业和Salesforce之间的桥梁。 Salesforce顾问的薪资一直是生态系统中的热门话题&#xff0c;备受求职者关注。本篇文章将分享提高顾…

Grafana Dashboard 备份方案

文章目录 Grafana Dashboard 备份方案引言工具简介支持的组件要求配置备份安装使用 pypi 安装grafana备份工具配置环境变量使用Grafana Backup Tool 进行备份恢复备份 Grafana Dashboard恢复 Grafana Dashboard结论Grafana Dashboard 备份方案 引言 每个使用 Grafana 的同学都…

基于微信小程序的物流管理系统3txar

在此基础上&#xff0c;结合现有物流管理体系的特点&#xff0c;运用新技术&#xff0c;构建了以 springboot为基础的物流信息化管理体系。首先&#xff0c;以需求为依据&#xff0c;对目前传统物流管理基础业务进行了较为详尽的了解和分析。根据需求分析结果进行了系统的设计&…

学习网络编程No.4【socket编程实战】

引言 北京时间&#xff1a;2023/8/19/23:01&#xff0c;耍了好几天&#xff0c;主要归咎于《我欲封天》这本小说&#xff0c;听了几个晚上之后逐渐入门&#xff0c;在闲暇时间又看了一下&#xff0c;小高潮直接来临&#xff0c;最终在三个昼夜下追完了&#xff0c;哈哈哈&…

【uni-app】压缩图片并添加水印

总体思路 dom 结点 这里的 cvHeight 和 cvWidth 初始时要设置为你后续需要压缩后的最大宽高。假设我们在图片上传后图片最大为 350 * 350 <u-upload :fileList"baseInfoFormData.entrustFileList" afterRead"afterFileRead" multiple></u-uploa…

容器和云原生(二):Docker容器化技术

目录 Docker容器的使用 Docker容器关键技术 Namespace Cgroups UnionFS Docker容器的使用 首先直观地了解docker如何安装使用&#xff0c;并快速启动mysql服务的&#xff0c;启动时候绑定主机上的3306端口&#xff0c;查找mysql容器的ip&#xff0c;使用mysql -h contain…

Cookie 和 Session 的工作流程

目录 一、Cookie是什么&#xff1f; 二、Session是什么? 三、Cookie的工作流程 四、Session的工作流程 五、Session和Cookie的区别和联系 一、Cookie是什么&#xff1f; Cookie是一种在网站和用户之间交换信息的机制。它是由Web服务器发送给用户浏览器的小型文本文件&#xff…

简述docker的网络模式

Docker 提供了多种网络模式&#xff0c;用于控制容器之间以及容器与主机之间的网络通信。以下是 Docker 的一些常见网络模式 briage模式&#xff1a; docker容器启动时默认就是该模式,在该模式下&#xff0c;docker容器会连接到一个名为docker0的虚拟以太网桥上&#xff0c;通…

数据可视化diff工具jsondiffpatch使用学习

1.jsondiffpatch 简介 jsondiffpatch 是一个用于比较和生成 JSON 数据差异的 JavaScript 库。它可以将两个 JSON 对象进行比较&#xff0c;并生成一个描述它们之间差异的 JSON 对象。这个差异对象可以用于多种用途&#xff0c;例如&#xff1a; 生成可视化的差异报告应用差异…

opencv-疲劳检测-眨眼检测

#导入工具包 from scipy.spatial import distance as dist from collections import OrderedDict import numpy as np import argparse import time import dlib import cv2FACIAL_LANDMARKS_68_IDXS OrderedDict([("mouth", (48, 68)),("right_eyebrow",…

matlab将数组值划分为两类

例如&#xff1a;大于0的处理为1&#xff0c;小于0的处理为-1. 当然&#xff0c;可以选择循环结构和选择结构&#xff0c;但是效率会很低。 这里直接使用逻辑语句完成。 % 不使用循环语句&#xff0c;将数组内值划分为两类 clc; clearvars; a[-0.1422 , -0.0433 , 0.1131 …

Leetcode每日一题:1267. 统计参与通信的服务器

原题 这里有一幅服务器分布图&#xff0c;服务器的位置标识在 m * n 的整数矩阵网格 grid 中&#xff0c;1 表示单元格上有服务器&#xff0c;0 表示没有。 如果两台服务器位于同一行或者同一列&#xff0c;我们就认为它们之间可以进行通信。 请你统计并返回能够与至少一台其…

基础论文学习(4)——CLIP

《Learning Transferable Visual Models From Natural Language Supervision》 CLIP的英文全称是Contrastive Language-Image Pre-training&#xff0c;即一种基于对比文本-图像对的预训练模型。CLIP是一种基于对比学习的多模态模型&#xff0c;与CV中的一些对比学习方法如moc…