vscode vue项目自动格式化

已于 2025-03-08 11:11:28 修改
阅读量526 收藏
点赞数 1
CC 4.0 BY-SA版权
文章标签： vue.js vscode javascript
于 2025-02-27 18:48:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42686022/article/details/145911261

1 vue项目配置自动格式化 需要的插件 prettier  + eslint 

2 项目根目录下方需要有对应插件的配置文件 .prettierrc + eslintrc.js  用于配置具体的格式和eslint规则

vscode 常用插件 liveserver  eslint  prettier  gitlens vetur(适用于vue2的vue文件样式)   chinese(simplify)   用于编辑器汉化。  SVG-Viewer  预览svg图片

君子木
关注
VS Code 代码格式化插件，代码美观的插件
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
07-13 2万+
Pretter,Beautify,EditorConfig,ESlint,vetur几种代码规范的插件，介绍以及优点。
Vscode中Vue文件保存格式化、 ElementUI、Font Awesome俩大插件使用
qq_46304554的博客
03-07 1344
Vscode中Vue文件老一片红色出现格式错误？？如何运行别人的项目（没有node_modules文件）？？选用组件与图标？？前提有：Prettier ESLint插件、ESLint插件== 1.打开settings进行设置 2.找到文本进行编辑，打开其中的settings.json文本 往里面的内容添加node_modules文件保存的是项目下载的一些插件或依赖，往往很大。但是package.json里面有记录，所以我们只需要在项目的根目录终端下进行 命令，就可以生成node_modules文件。 然
VSCODE工具 VUE代码格式化插件及配置
yu_baby的博客
04-12 1万+
1.安装插件 1.1 Prettier 它通过解析代码并使用自己的规则重新打印它，并考虑最大行长来强制执行一致的样式，并在必要时包装代码。如今，它已成为解决所有代码格式问题的优选方案；支持JavaScript、Flow、TypeScript、CSS、SCSS、Less、JSX、Vue、GraphQL、JSON、Markdown等语言.这里我们需要让Prettier和Eslint结合，检测代码中潜在问题的同时，还能统一团队代码风格，从而促使写出高质量代码，来提升工作效率。我们要的...
vue vscode代码格式化插件配置
ZHANG_666
12-14 7942
扩展商店搜索Vetur 选择扩展此设置 加入 "vetur.format.defaultFormatterOptions": { "prettyhtml": { "printWidth": 300, // No line exceeds 300 characters "singleQuote": false // Prefer double quotes over single quotes } } 格式化之前
VsCode中Vue代码格式插件，Vetur、ESLint 、Prettier - Code formatter的介绍使用及相关配置
webxscan.com
12-01 5678
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe", //默认终端shell。"vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html。"editor.defaultFormatter": "esbenp.prettier-vscode", //编辑器格式化工具。
VSCODE的VUE代码格式化插件及配置
热门推荐
林见鹿鸣
12-16 2万+
转载自：https://www.cnblogs.com/RandyField/p/12873538.html 1.引言 开发vue项目，大家有没有遇到如下情况： 1.1 注释不对 在vue文件，template 中注释 Ctrl+/ 代码 //<slot name="left" :itemLeft="itemLeft">{{ itemLeft }}</slot> 这是html代码，注释应该是这样： <!-- <slot name="left" .
ESLint 工具
编程菜鸟
03-18 2994
ESLint 可组装的 javaScript 和 JSX 检查工具。规范代码风格 官网：ESLint - 插件化的 JavaScript 代码检测工具 - ESLint中文文档 VSCode 自动格式化代码 ESLint安装 ① 项目创建时 配置 ESLint ② 配置 .eslintrc.js 配置文件 "off"或者0 //关闭规则关闭 "warn"或者1 //在打开的规则作为警告（不影响退出代码） "error"或者2 //把规则作...
VScode vue项目 自动 规范 格式化
weixin_44523517的博客
08-08 6034
代码】VScode vue项目 自动 规范 格式化。
VSCode Vue代码自动格式化
我笔记
09-12 1312
VsCode关于Vue的格式化插件非常多，网上的资料也五花八门，可以使用的非常少, 经过多次探索，终于找到一个可以用的方式。 Prettier-Code formatter 多次探索终于找到一个可用的简单操作的，首先安装Prettier插件 配置代码格式化文件 安装好了以后在项目根目录中添加.prettierrc文件 { "printWidth": 150, "overrides": [ { "files": ".prettierrc", ...
Vue-cli Eslint在vscode里代码自动格式化的方法
08-27
总的来说，通过集成 Eslint 和 Vetur，并正确配置 VS Code 的设置，我们可以实现 Vue CLI 项目在 VS Code 中的代码自动格式化。这不仅有助于保持代码整洁，也有利于团队成员之间的代码一致性，从而提升开发质量和...
VSCode的Vue工具
08-12
语法加亮 片段 Emmet Linting /错误检查 格式化 自动完成 调试
解决vscode进行vue格式化,会自动补分号和双引号的问题
01-18
在使用vscode开发vue项目时，严格检查让人有点烦恼，必然需要一款可以自动格式化的插件进行快速严格检查的格式化。vscode插件会推荐使用 vetur 插件才会进行vue文件的识别与高亮。 安装完 vetur 后确实是可以对 vue...
vscode vue项目格式化问题
weixin_44806438的博客
08-12 818
使用vscode编写前端代码，很多问题搞的不是很明白，vue项目，想改配置，结果失败，自动格式化等，导致项目跑不起来。使用了下列方式，恢复正常了。 将下列代码复制到eslint设置中的json即可 { "workbench.iconTheme": "material-icon-theme", "explorer.confirmDragAndDrop": false, "explorer.confirmDelete": false, //配置eslint "eslint.autoFixOn
vscode 中的 vue 格式化
weixin_34189116的博客
04-09 133
使用 vscode 开发 vue, 必不可少的插件包括 vetur, prettiervetur 提供了下面一系列的功能：FeaturesSyntax-highlighting 高亮 Snippet 代码片段Emmet 缩写语法Linting / Error Checking 代码格式检查Formatting 代码格式化Auto Completion 自动补全Debugging de...
vscode中使用beautify插件格式化vue文件
腾讯全栈-ITCJF
03-23 6235
**点击设置，找到beautify.language并在html一栏里加上vue，so easy！** "beautify.language": { "js": { "type": [ "javascript", "json" ], "file.
vsCode 格式化代码及安装的插件
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
07-13 1118
多个代码格式化的插件，如何查看以及配置默认的插件。
vscode+vue2 插件
lanbaiyans的博客
05-09 1462
5.JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入，除js外还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间。4. Auto Rename Tag —— 自动完成另一侧标签的同步修改。3.Auto Close Tag —— 自动闭合HTML/15.JSON Tools—— json样式格式化。6.Beautify 或者。——自动补全css兼容前缀。—— 自动编译less文件。
vscode配置vue自动格式化
最新发布
02-23
### 配置VSCode中Vue文件的自动格式化 为了实现VSCode中的Vue文件自动格式化，安装Prettier扩展是一个有效的方法[^1]。通过设置`settings.json`可以自定义配置项来满足特定需求。 对于希望启用保存时自动格式化的开发者来说，在工作区或用户级别的`settings.json`里加入如下配置能够达成目的： ```json { "editor.defaultFormatter": "esbenp.prettier-vscode", "[vue]": { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode" } } ``` 上述JSON片段指定了默认格式化工具有限于Vue文件类型的特殊规则，并启用了保存文档时触发自动格式化功能[^2]。 除了编辑器内置支持外，还可以利用Vetur插件增强对Vue开发的支持。它提供了语法高亮、Emmet缩写展开以及智能感知等功能之外也包含了基本的代码格式化能力。要激活此特性同样需调整VSCode全局或项目本地配置文件内的参数设定： ```json { "vetur.format.enable": true, "vetur.format.defaultFormatter.html": "prettier", "vetur.format.defaultFormatter.js": "vscode-typescript", "vetur.format.defaultFormatter.ts": "vscode-typescript", "vetur.format.defaultFormatter.css": "prettier", "vetur.format.defaultFormatter.postcss": "prettier", "vetur.format.defaultFormatter.scss": "prettier", "vetur.format.defaultFormatter.less": "prettier", "vetur.format.defaultFormatter.stylus": "stylus-supremacy", "vetur.format.defaultFormatterOptions": { "prettier": { "singleQuote": false, "semi": true }, "prettyhtml": { "printWidth": 100, "wrapAttributes": "auto", "sortAttributes": true } } } ``` 这段配置不仅开启了Vetur自带的格式化选项还设置了不同语言部分所使用的具体工具及其偏好选项[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值