vscode vue项目格式化问题

最新推荐文章于 2024-08-15 11:01:12 发布

疙瘩村呓语

最新推荐文章于 2024-08-15 11:01:12 发布

阅读量767

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_44806438/article/details/107952536

版权

在使用VSCode进行前端开发，特别是Vue项目时，遇到了格式化配置问题，导致项目无法正常运行。通过在eslint设置中加入特定的JSON配置，成功解决了自动格式化问题并恢复了项目的正常运行。参考了一篇博客文章进行修复。

摘要由CSDN通过智能技术生成

使用vscode编写前端代码，很多问题搞的不是很明白，vue项目，想改配置，结果失败，自动格式化等，导致项目跑不起来。使用了下列方式，恢复正常了。
将下列代码复制到eslint设置中的json即可

{
   
  "workbench.iconTheme": "material-icon-theme",
  "explorer.confirmDragAndDrop": false,
  "explorer.confirmDelete": false,
  //配置eslint
  "eslint.autoFixOnSave":

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

疙瘩村呓语

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

VSCode Vue代码自动格式化

我笔记

09-12

927

VsCode关于Vue的格式化插件非常多，网上的资料也五花八门，可以使用的非常少, 经过多次探索，终于找到一个可以用的方式。 Prettier-Code formatter 多次探索终于找到一个可用的简单操作的，首先安装Prettier插件配置代码格式化文件安装好了以后在项目根目录中添加.prettierrc文件 { "printWidth": 150, "overrides": [ { "files": ".prettierrc", ...

VSCode 设置vue 保存自动格式化代码

weixin_30723433的博客

08-22

4487

设置保存自动格式化代码，开发效率大大提升！操作如下：安装VSCodeeslint插件如下配置setting.json文件： { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSi...

参与评论您还未登录，请先登录后发表或查看评论

VSCode Vue文件格式化

weixin_33827965的博客

11-08

457

参考文档：https://vuejs.github.io/vetur/formatting.html 自从将VSCode更新之后，vue文件的html格式化就失效了，而且vue文件中的js ,css格式化样式都变了，原因在于都采用了prettier 来格式化，而配置文件中vetur.format.defaultFormatter.html 这个配置项的值为"none" 将vetur这个...

如何使用vscode进行代码格式化设置

qq_67572731的博客

08-15

819

【代码】如何使用vscode进行代码格式化设置。

vscode设置vue3代码格式化

qq_23858785的博客

11-14

7572

vscode设置vue3代码格式化

Vscode格式化Vue项目

qq_45772348的博客

04-07

485

背景 VSCode在开发Vue项目的时候，尽管我们安装了格式化插件，但是最终运行时还是会有一堆的警告，就是因为格式化代码的方式和eslint的规范不一样导致的。解决方案安装插件 ESlint：JS代码检测工具 Vetur：VUE项目基本插件,可以格式化html、标准css（有分号、大括号的那种）、标准js（有分号、双引号的那种）、vue文件，但是！格式化的标准js文件不符合ESlint规范，会给你加上双引号、分号等 Prettier - Code formatter：只关注格式化，并不具有eslin

解决vscode进行vue格式化,会自动补分号和双引号的问题

01-18

在使用vscode开发vue项目时，严格检查让人有点烦恼，必然需要一款可以自动格式化的插件进行快速严格检查的格式化。vscode插件会推荐使用 vetur 插件才会进行vue文件的识别与高亮。安装完 vetur 后确实是可以对 vue...

VSCode Vue ESLint 格式化配置

skyunlin的专栏

12-28

1150

Vetur、ESLint插件安装这里就不多说了，直接看vscode settings.json配置：重要：使用ESLint格式化，能很好的符合.eslintrc.js文件里配置的rules，但有个很大的瑕疵，就是vue文件<style>标签里的样式无法进行格式化，只能独立编写到单独的样式文件中，再在<style>标签里@import 。看到有个相关插件 eslint-plugin-vue-scpoed-css 但是貌似不太好用，可配置项也比较少，期待后面的完善。 //

vscode下的vue文件格式化问题

10-17

总的来说，解决VSCode下Vue文件的格式化问题，关键是理解Vetur和Prettier的新配置方式，并根据需要适配这些变化。保持Vetur和Prettier的配置同步，可以提高开发效率并确保代码风格的一致性。如果你遇到其他格式化...

vscode-vue项目格式化

startyangu的博客

08-21

2142

PrettierVeturESLint

解决使用vscode格式化Vue文件会自动加分号问题

qq_34200636的博客

02-15

6048

在使用vscode开发vue项目时，通常都会装上Vetur插件。使用这个插件后vue文件会高亮显示，同时在shift+alt+f格式化时会自己加上分号，非常烦人。所以我们要对vscode的配置文件进行配置支持vue的正确格式化 打开文件–>首选项–>设置 (快捷键ctrl+，) 在常用设置里往下滑，找到在settings.json中编辑打开它在json中添加以下配置，就...

vscode - 自动格式化 vue-cli 项目文件

caperxi的博客

01-03

757

前端工程项目，为了团队代码的规范化与在编写阶段排查潜在的错误，少不了一些检测工具的使用，而相对于后端，前端代码涉及到HTML、CSS、JavaScript，如使用过框架，则包含的语法更是复杂（如 vue、angular、react、TypeScript等等）。检测工具很多，如： html : HtmlHint css/scss: StyleLint Js/jsx: eslint … 笔者常用Es...

vscode格式化vue文件

放羊的小孩

07-06

4530

使用vscode编写vue文件的时候，发现不能格式化，手动格式化代码，太费劲，还有可能会出错，不格式化，有的时候代码编写的时候，没有很好的管理格式，不美观。vscode格式化vue代码，让vue代码更美观，是可以做到的。我们打开vscode的配置文件，搜索vetur.format.defaultFormatter.html这个配置项，发现这个配置项值是“hmtl”，我们重写一下这个值，将这个值更改...

Vue 3 项目，使用 VSCode 自动格式化 .vue 文件

2302_76314178的博客

07-17

1545

第一步，安装拓展 Prettier - Code formatter 和 Vue - Official。Volar 已经弃用了，现在改用 Vue - Official。第二步，打开设置，打开 settings.json 文件。第三步，修改 settings.json 文件。重启 VSCode ，即可。

VSCode自动格式化Vue代码

优秀的代码搬运工

03-17

2057

VSCode自动格式化Vue代码Prettier-Code formatter配置代码格式化文件配置setting.json VsCode关于Vue的格式化插件非常多，网上的资料也五花八门，可以使用的非常少, 经过多次探索，终于找到一个可以用的方式。 Prettier-Code formatter 多次探索终于找到一个可用的简单操作的，首先安装Prettier插件配置代码格式化文件安装好了以后在项目根目录中添加.prettierrc文件 { "printWidth": 150, "over

Vscode 格式化vue Template代码段

丸子酱

07-18

2481

1.安装 vetur 2.在User Setting中增加设置: "vetur.format.defaultFormatter.html": "js-beautify-html" 3.搞定 格式化快捷键：Alt+Shift+F

ESLint 工具

编程菜鸟

03-18

2784

ESLint 可组装的 javaScript 和 JSX 检查工具。规范代码风格官网：ESLint - 插件化的 JavaScript 代码检测工具 - ESLint中文文档 VSCode 自动格式化代码 ESLint安装 ① 项目创建时配置 ESLint ② 配置 .eslintrc.js 配置文件 "off"或者0 //关闭规则关闭 "warn"或者1 //在打开的规则作为警告（不影响退出代码） "error"或者2 //把规则作...

vscode vue文件格式化没效果

weixin_33727510的博客

08-15

667

在vscode 中 格式化vue文件没效果解决办法：点击头部文件 >首选项>设置在右侧加入这两句 "vetur.format.defaultFormatter.js": "vscode-typescript", "vetur.format.defaultFormatter.html": "js-beautify-html" 转载于:https://www....

vscode vue代码格式化如何不分行