vscode安装vetur 插件后格式化报错问题解决

最新推荐文章于 2024-02-04 12:42:38 发布
最新推荐文章于 2024-02-04 12:42:38 发布
阅读量3.1k 收藏 1
点赞数
分类专栏： 前端学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41629800/article/details/104942277
版权
在使用vscode并安装vetur插件后，遇到js代码格式化异常，如单引号变为双引号，句尾自动添加分号。通过修改settings.json文件，添加特定配置可以解决这些问题，包括阻止将单引号转换为双引号以及防止在括号前添加空格。
摘要由CSDN通过智能技术生成

vscode安装vetur 插件后出现
【js代码单引号变成双引号，句尾加上分号】的格式错误 如图所示
在这里插入图片描述
在settings.json 中添加以下代码解决问题

    "vetur.format.defaultFormatterOptions": {
   

        "prettier": {
   
            "semi": false,
            "singleQuote": true
        }

    },

之后发现【 js 括号前没有空格】的问题，settings.json添加以下代码解决问题


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  Light.T
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
vscode集成Vetur实现代码格式化，解决代码标签换行的问题

				
			

			

				

					qq_39564710的博客
				

				

					08-27
					
					770
					
				

			

		

		

			
				
vscode集成Vetur实现代码格式化，解决代码标签换行的问题

			
		

	



                

            
              



	

		

			

				
					
 vscode一格式化就报错？各种风格问题各种报错烦不胜烦，教你如何用好vue的eslint风格配置...

				
			

			

				

					weixin_34220623的博客
				

				

					04-13
					
					1738
					
				

			

		

		

			
				
前言
感觉搭建一个舒服的前端开发环境，十分的重要定制化的格式化，编辑器自带的格式化各种报错，手动改真的会死人，因此搭建一个编辑器环境必不可少，现在要讲的是vscode中如何定制vue
vs code的配置文件:

format相关:搜索format，你会看到很多默认的格式化配置项。
更改format配置你可以选择想要更改的内容，复制到右边...

			
		

	



              


  
              

                


	

		

			

				
					
vscode的vetur文档格式化失效

					
最新发布

				
			

			

				

					Mmj_mmj的博客
				

				

					02-04
					
					1630
					
				

			

		

		

			
				
先用空格键决定你想设置下划线的区域，然后按住鼠标左键选中该区域，ctrl+u就可以设置下划线了并可以在上面写字。如果vscode安装了vetur插件之后，又无法格式化vue文件代码。

			
		

	





	

		

			

				
					
vscode插件vetur代码提示失效的解决方法

				
			

			

				

					云帆的博客
				

				

					05-26
					
					5484
					
				

			

		

		

			
				
[Error - 下午5:43:01] Request textDocument/completion failed.
  Message: Request textDocument/completion failed with message: Cannot read property 'length' of undefined
  Code: -32603 




			
		

	



		

			
		



	

		

			

				
					
Vscode Vetur格式化失败的原因是package.json，添加了prettier依赖

				
			

			

				

					qq_38408390的博客
				

				

					01-25
					
					1241
					
				

			

		

		

			
				
{
  "name": "vue-no-ts",
  "version": "1.0.4",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
  },
  "devDependencies": {
    "prett.

			
		

	





	

		

			

				
					
使用VScode时格式化遇到的问题

				
			

			

				

					花落微凉梦清幽的博客
				

				

					09-14
					
					6140
					
				

			

		

		

			
				
1.前言

我们在使用vscode时，因为我们项目开启了ESlint代码风格检查，所以当写错了代码格式时会用到vscode中格式化文件来调整代码风格，但我们使用时，一键下去，成了下面这样：



瞬间懵逼有木有？双引号和分号都出来了，这不是更乱了么，于是，寻找问题所在，那是我们在使用vscode的插件vetur时使用了默认设置，那我们需要更改这个配置：

（快速的解决办法）首先我们找到vetur的...

			
		

	





	

		

			

				
					
eslint自动格式化html报错,VSCode配合ESLint自动修复格式化

				
			

			

				

					weixin_42318712的博客
				

				

					05-31
					
					1005
					
				

			

		

		

			
				
开发Vue或者React的项目的时候，我们经常用到ESLint进行代码的校验，当代码出现不符合规范的格式的时候，ESLint会在控制台提示相关的异常信息。ESLint极大的提高了团队代码的一致性和规范性，接下来老马介绍一下我的VSCode的相关配置和插件实现保存代码的时候，根据ESLint的配置自动修复代码和格式化。VSCode安装插件配置VSCode的用户配置{..."vetur.format....

			
		

	





	

		

			

				
					
prettier - vscode 保存代码自动格式化插件安装与配置项备注

				
			

			

				

					_
				

				

					04-02
					
					4540
					
				

			

		

		

			
				
目录

prettier - vscode 保存代码自动格式化插件

	配置保存文件时自动格式化
		配置保存时HTML标签不自动换行（2020.12.03 13:58 再更新）
		我的改动
		
		关于配置项
		项目代码格式化
			部分 prettier 配置及注释
			部分 eslint 配置及注释
			vetur 插件配置截图（针对 .vue 文件）
		
	
prettier - vscode 保存代码自动格式化插件

安装自行百度，只需要在 vscode 插件里搜索 prettier，

			
		

	





	

		

			

				
					
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance＜{ readyOnly…Vetur（2339）

				
			

			

				

					11-19
				

			

		

		

			
				
VSCode 中 Vue 项目报错 Property...解决 VSCode 中 Vue 项目报错 Property ‘xxx‘ does not exist on type ‘CombinedVueInstance…Vetur（2339）需要我们正确地配置 Vetur 插件，并掌握解决错误和问题的方法和技巧。

			
		

	





	

		

			

				
					
详解VScode编辑器vue环境搭建所遇问题解决方案

				
			

			

				

					10-17
				

			

		

		

			
				
1. 插件丰富：VSCode提供了海量的插件库，这些插件可以帮助开发者轻松实现代码高亮、格式化代码、代码检查等功能，极大地提升开发效率。  2. 跨平台性：VSCode支持Windows和macOS两大主流操作系统，这意味着无论...

			
		

	





	

		

			

				
					
配置vscode代码格式化

				
			

			

				

					Excusep的博客
				

				

					11-22
					
					248
					
				

			

		

		

			
				
当你运行npm run lint或npm run fix时，Prettier和ESLint会自动检查并修复代码格式问题。你还可以使用npm run prettier命令快速格式化整个项目的代码。

			
		

	





	

		

			

				
					
vscode代码格式化

				
			

			

				

					qq_43427657的博客
				

				

					03-06
					
					110
					
				

			

		

		

			
				
分号，逗号，单引号
在settings.json中如下配置
{
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      // 不加分号
      "semi": false,
      // 用单引号
      "singleQuote": true,
      // 禁止随时添加逗号
      "trailingComma": "none"
    }
  }
}



...

			
		

	





	

		

			

				
					
探索vue2框架的世界：VSCode的Vue插件Vetur设置

				
			

			

				

					Code_King006的博客
				

				

					04-07
					
					646
					
				

			

		

		

			
				
使用VSCode编写vue项目时安装了Vetur插件，但是每次alt+shift+f格式化代码的时候就有点让人头疼，缩进自动变成了2个空格(习惯了用4个空格缩进，不同层级的代码看着明显一点)，js代码末尾自动加了分号，js的一些字符串值原本的单引号变成了双引号。

			
		

	





	

		

			

				
					
vscode配置文件-vutur自动格式化-eslint校验-属性换行

				
			

			

				

					厚积薄发.
				

				

					05-24
					
					3567
					
				

			

		

		

			
				
【代码】vscode配置文件-vutur自动格式化-eslint校验-属性换行。

			
		

	





	

		

			

				
					
VSCode Vetur版本0.31.0报错且不能格式化Vue文件

				
			

			

				

					fyydashen的博客
				

				

					12-09
					
					3627
					
				

			

		

		

			
				
今天下午在写代码的时候，VSCode编译器右下角突然报错，报错内容如下：


Vetur find `tsconfig.json`/`jsconfig.json`, but they aren't in the project root.

而且不能进行格式化vue文件操作了，我这人有强迫症，找到是Vetur插件在一个小时前更新造成的结果，我采用的是版本回退的方法解决的这个问题。

在Vetur插件进行鼠标右键，选择==>安装另一个版本。



选择之前的版本，然后重启VSCode编译器。我选择的是0

			
		

	





	

		

			

				
					
vscode 格式化文件配置说明

				
			

			

				

					lacie的博客
				

				

					07-18
					
					2055
					
				

			

		

		

			
				
vscode settings.json

			
		

	





	

		

			

				
					
vscode中，vue/cli 3.x 设置代码自动格式化时的缩进问题

				
			

			

				

					u010622367的博客
				

				

					03-24
					
					2973
					
				

			

		

		

			
				
当我们在vscode中对vue-cli脚手架进行代码规范设置时，有时候会遇到代码缩进的问题，我们可能会根据个人习惯来设置tabSize,一般是2或者4吧。

当在setting.json里添加


"editor.tabSize": 4,
"editor.formatOnSave": true, 
"editor.detectIndentation": false,//关掉编辑器根据文件类型进行的...

			
		

	





	

		

			

				
					
vscode vetur格式化不换行最新设置分享笔记

				
			

			

				

					m0_49472412的博客
				

				

					10-19
					
					1458
					
				

			

		

		

			
				
养成好习惯：：：登录vscode 同步设置代码 随时随地优雅写代码。5年前端使用的格式化代码块     你只需复制粘贴保存。打开设置 ---------点击设置文本；点击查看  不设置 自动换行；over  求关注！优雅代码 只需两步；

			
		

	





	

		

			

				
					
Vue保存时使用Vetur自动格式化代码错误

				
			

			

				

					weixin_51799004的博客
				

				

					05-30
					
					1035
					
				

			

		

		

			
				
在VScode中的setting.js文件中的vetur.format.defaultFormatterOptions中添加规则。一、在prettier中添加配置项semi、singleQuote、trailingComma。单引号变成双引号，末尾添加了分号，最后一个属性添加了逗号，缩进2个空格变为4个空格。保存时自动格式化代码之后不符合eslint规范。二、设置vetur中tab size为2。

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值