vscode 、eslint、prettier 的孽缘

server/2024/9/24 8:07:05/

今天在配置一个新项目的时候,被一个新项目搞得头痛。

我准备配置 prettier 来格式代码,然后把 prettier 添加到 eslint 规则中,这样控制台就能很好的展示那些代码格式有问题。可是控制台的错误和 vscode 显示的错误一直不一样,无论我怎么格式化代码,不是控制台报错,就是 vscode 显示代码标红。

最后捋清楚了,原来是 vscode 的 eslint 插件,热更本地配置时没有完全加载成功。需要重启 vscode 才能让代码视图和控制台一致。

下面是使用 vite 启动项目的配置:

vscode_8">vscode

新建 .vscode/settings.json 配置保存时修改:

{"editor.formatOnSave": true,"editor.defaultFormatter": "esbenp.prettier-vscode"
}

然后记得安装两个插件:

  • esbenp.prettier-vscode:用来使用本地的 .prettierrc 配置格式化项目代码。
  • vscode-eslint:用来使用本地的 .eslintrc 高亮错误的检查。

现在一切顺利。

eslint

配置本地的 .eslintrc 配置如下:

module.exports = {root: true,env: { browser: true, es2020: true },extends: [// ... others config"plugin:prettier/recommended",],
};

记住要下载一堆的库,参考这里:eslint-plugin-prettier

prettier

配置本地的的 .prettierrc

{"endOfLine": "auto","useTabs": false,"tabWidth": 2,"printWidth": 140,"singleQuote": false,"trailingComma": "all","bracketSpacing": true,"semi": true
}

最后启动项目,不出意外的话就出意外了,如果你是按上面的顺序配置,会发现代码可以正常保存了,同时控制台也不报错。但是视图上就是一堆红,比如:

在这里插入图片描述
同时看向控制台会发现,eslint 没报错:

在这里插入图片描述

我配置的时候百思不得其解,结果你猜怎么着?重启 vscode 一切都变好了,控制台也不报错了,视图也不报错了。

所以原因是 eslint 的 vscode 插件本地热更是有问题。如果改了 eslint 配置,那么最好的方式是重启一下 vscode,重新让 vscode 插件加载配置,才能保持视图和脚本都不会报错。


http://www.ppmy.cn/server/20373.html

相关文章

Redis篇:缓存雪崩及解决方案

1.何为缓存雪崩 缓存雪崩是指在同一时段大量的缓存key同时失效或者Redis服务宕机,导致大量请求到达数据库,带来巨大压力。 2.缓存雪崩的解决方案 解决方案: 给不同的Key的TTL添加随机值 利用Redis集群提高服务的可用性 给缓存业务添加降级…

python3GUI--本地简易音乐播放器By:PyQt5(附下载地址)

文章目录 二.展示1.启动2.添加音乐&播放3.软件风格 三.软件整体功能-览四.实现原理1.界面设计2.音频播放3.打包 五.总结 博客二连发,继续为大家带来我使用PyQt5开发的软件,本次为大家分享我写的一款本地…

【公务员专场】选调、省考和国考

公务员目录 一、考公概述1、选调2、省考3、国考 二、为何考公1、考试正规2、待遇提高3、福利待遇4、管理规范5、传统思维 三、考试公告1、选调2、省考3、国考 一、考公概述 1、选调 选调是指地方政府或相关部门针对特定岗位进行的选拔活动,通常是为了选拔优秀的应…

uniapp 开发H5中适配底部安全区域不生效的解决方法

在适配底部安全区域时我们通常会使用如下方法 box-sizing: content-box; padding-bottom: 0 !important; padding-bottom: constant(safe-area-inset-bottom) !important; padding-bottom: env(safe-area-inset-bottom) !important; 但是只是加上面的样式会发现并不起作用&…

如何部署 wfs 分布式服务

说明: wfs是海量小文件存储系统。wfs1.x不直接支持分布式存储,但为了应对大规模部署和高可用需求,推荐采用如Nginx这样的负载均衡服务,通过合理的资源配置和定位策略,可以在逻辑上模拟出类似分布式的效果。也就是说&am…

Pytorch分布式train——pytorch.distributed.launch V.S. torchrun

1. 较早的pytorch.distributed.launch python -m torch.distributed.launch --nproc_per_node4 --nnodes1 --node_rank0 train.py --args XXX 参数解析: nnodes:节点(主机)的数量,通常一个节点对应一个主机 node_rank…

锂电池SOH预测 | 基于CNN-GRU的锂电池SOH预测(matlab)

锂电池SOH预测 锂电池SOH预测完整代码锂电池SOH预测 锂电池的SOH(状态健康度)预测是一项重要的任务,它可以帮助确定电池的健康状况和剩余寿命,从而优化电池的使用和维护策略。 SOH预测可以通过多种方法实现,其中一些常用的方法包括: 容量衰减法:通过监测电池的容量衰减…

Vue2与Vue3:深度剖析核心差异与升级亮点

核心差异与升级亮点 随着Vue.js框架的不断演进,Vue2与Vue3作为两个重要版本,各自承载了特定时期的前端开发理念和技术实践。本文将全面探讨Vue2与Vue3之间的核心区别,旨在帮助开发者理解两者在设计思路、性能优化、API结构、生命周期管理等方…