vscode使用Eslint+Prettier格式化代码

已于 2022-08-28 14:53:40 修改
阅读量1.3k 收藏 4
点赞数 2
分类专栏： 前端 文章标签： vscode eslint prettier
于 2022-08-27 19:00:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43386443/article/details/126560581
版权
本文介绍了如何在VSCode中集成Eslint和Prettier进行代码格式化。首先安装Eslint和Prettier插件，接着初始化项目并生成配置文件。然后设置VSCode自动保存时格式化文件，选择Eslint风格。接着配置Prettier，关闭可能与Prettier冲突的Eslint规则。最后，通过安装额外依赖和调整配置，使Eslint和Prettier协同工作，实现保存时自动格式化且错误高亮。
摘要由CSDN通过智能技术生成

👉 step 1

1、安装Eslint插件和Prettier插件
在这里插入图片描述在这里插入图片描述
2、 安装eslint

npm install eslint -g

👉 step 2

1、初始化项目

npm init -y

2、生成eslint配置文件

npx eslint --init

以下是我的配置
在这里插入图片描述
完了之后生成一个.eslintrc.json的文件

👉 step 3

1、vscode需要配置保存自动化格式

⚙ -> 设置 -> Format On Save =》 ✔ （保存时格式化文件）

最低0.47元/天 解锁文章
Moralduty
关注
专栏目录
vscode中设置prettier配合eslint规则格式化代码
数组喜欢打对象的博客
09-29 627
Prettier 是什么？ Prettier 是一个十分好用且友好的代码格式化工具，它支持： JavaScript （包括实验性功能） JSX Angular Vue Flow TypeScript CSS、Less和SCSS HTML JSON GraphQL Markdown，包括GFM和MDX YAML 它移除了所有原始样式并确保输出的所有代码都符合一致的样式 1. 在vscode扩展商店中搜索并下载prettier插件 2. 在项目中创建.prettier...
idae 格式化代码 设置eslint_VSCode中使用vue项目ESlint验证配置
weixin_30479433的博客
02-06 991
如果在一个大型项目中会有多个人一起去开发，为了使每个人写的代码格式都保持一致，就需要借助软件去帮我们保存文件的时候，自己格式化代码解决办法：vscode软件下载一个ESLint，在到设置里面找到setting.json文件，将下面的配置粘贴复制拷贝到文件中就可以了，so easy~{// 当其前缀匹配时插入代码段。当 "quickSuggestions" 未启用时，效果最佳。"editor.tab...
vscode 配置vue+vetur+eslint+prettier自动格式化功能
10-15
主要介绍了vscode 配置vue+vetur+eslint+prettier自动格式化功能，本文通过实例代码图文的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
Vue3框架搭建3：配置说明-prettier配置
u013035708的博客
07-10 287
Vue3框架搭建3：配置说明-prettier配置
vscode eslint+prettier配置(保存自动格式化)
u013361179的博客
09-30 9711
setting.json { // "editor.fontSize": 16, "eslint.autoFixOnSave": true, "fileheader.LastModifiedBy": "xudanfeng", "fileheader.Author": "xudanfeng", "git.autofetch": true, "[html]": { "editor.defaultFormatter": "HookyQR.beautify" }, "edit
VScode使用Prettier格式化代码
扛麻袋的少年的博客
04-01 3385
vscode使用prettier进行格式化
详解如何在vue项目中使用eslint+prettier格式化代码
10-17
本文将详细讲解如何在Vue项目中集成`eslint`和`prettier`，以实现代码的自动格式化和规范检查。 `eslint`是一款强大的静态代码分析工具，它可以检查代码中的错误、潜在问题，并且支持自定义规则来符合特定的编码...
【Vue3+Vite+TS项目集成ESlint +Prettier实现代码规范检查和代码格式化】
m0_37873510的博客
01-15 5965
Vue3+Vite+TS目集成ESlint +Prettier实现代码规范检查和代码格式化
VS Code自动保存后Prettier自动格式化代码
chali1314的博客
08-16 1950
VSCode，Premitter
Vscode爆红Delete `␍`eslintprettier/prettier
做笔记/记录遇到的前端bug
10-01 782
解决vscode爆红，报错Delete `␍`eslintprettier/prettier
vscode 格式化代码后反而出现红色波浪线格式报错
landiyaaa的博客
01-04 1345
就我自己的情况而言：格式化代码时 vscode 调用的是 prettier 插件配置的规则；而校验代码格式报错红色波浪线 vscode 调用的是 eslint 插件的校验规则。一般认为 eslint 除了代码美化功能之外，还有一些校验功能，所以优先考虑使用 eslint 而干掉 prettier。两者规则不一致，导致 prettier 格式化代码后，eslint 反而认为是不合法的，标注红色波浪线；vscode 代码校验和代码格式化的插件如果一致，那么就不存在规则冲突的问题了。
Prettier+Vscode setting提高前端开发效率
最新发布
擅长将自己的感受、想法、知识通俗地表达出来，会点前后端开发、自动化测试、性能测试、爬虫。将来可能学硬件、AI。但一定会写实用的脚本。
08-19 9007
本文介绍和ESLient配合使用的Prettier实现编译器自动将代码格式化。 同时也介绍VsCode的 setting设置，与分享我开发时常用的配置。新手老鸟都能看 背景颜色是野菊紫
彻底搞懂ESLint与Prettier在vscode中的代码自动格式化
热门推荐
weixin_64051447的博客
12-10 1万+
前端代码格式化社区提供了两种比较常用的工具ESLint和Prettier，他们分别提供了对应的vscode的插件，二者在代码格式化方面有重叠的部分，规则不一致时会导致冲突。vscode作为前端开发编辑器已经越来越普遍了，这需要开发者在vscode对他们的使用有一定的了解，掌握其中的原理对提升开发效率保证代码质量方面会有很大的帮助，俗话中的工欲善其事必先利其器、磨刀不误砍柴工都是类似的道理。ESLint的具体的用法以及原理等不在本文的介绍范围，可自行查询资料。ESLint。
ESLint + Prettier的使用及配置
m0_62762847的博客
09-27 1523
ESLint + Prettier的使用及配置（详解）
在VSCode中 使用 ESLint + Prettier检查代码规范及自动格式化前端Vue代码
全栈程序猿的专栏
02-11 2487
简而言之，Prettier的代码格式化功能比ESLint更强大，配置更简单，通过配置，ESLint可以使用Prettier的代码规则进行校验，如果不配置好，会出现冲突，导致二者不能配合使用。3、在 VSCode中插件安装中搜索 ESLint、Prettier - Code formatter、Vetur(因为Prettier不能格式化vue文件的template，所以使用Vetur)、这三个插件并安装。.eslintrc.js：代码检查规则的配置文件。.prettierrc：代码格式化的配置文件。
VsCode配置Eslint+Prettier结合使用详细配置步骤，规范化开发
知之为知之，不知为不知
08-20 1万+
vsCode配置Eslint + Prettier结合使用详细配置步骤，规范化开发
Vscode+ESLint+Prettier 配置【保存时格式化】
小草莓的博客
06-30 4283
Vscode+ESLint+Prettier 配置【保存时格式化】
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值