前端代码格式化设置--Prettier

最新推荐文章于 2024-08-26 15:43:51 发布
最新推荐文章于 2024-08-26 15:43:51 发布
阅读量680 收藏 2
点赞数
文章标签： javascript vscode 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36473121/article/details/125174984
版权

1.在vscode中下载扩展工具Prettier-Code formatter;

2.设置保存为聚集改变的时候,就会保存文件

3.输入format,设置默认格式化程序为Prettier,并且设置保存时格式化文件

4.去掉末尾加分号和设置单引号

5.详细设置在setting中,有仔细的介绍

 

 

                

        

        

    




    

      

        

            

              
                
                  xdf_zachary
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
前端代码规范之代码格式化配置

				
			

			

				

					知迷鸟的博客
				

				

					04-18
					
					1645
					
				

			

		

		

			
				
前端setting.json配置；
代码统一格式化配置；
统一代码规范；

			
		

	



                

              
                



	

		

			

				
					
前端代码格式化初探

				
			

			

				

					Arui_0的博客
				

				

					09-23
					
					660
					
				

			

		

		

			
				
什么是代码风格
这个问题是最基础的，也是最重要的。只有理解了这个问题，下面的问题才有意义。代码风格可以类比于写作风格，只不过写作风格更加丰富多彩。例如美学家朱光潜的文字朴实直接，却很容易让人产生共情。两年前我第一次读他的《给青年的十二封信》，就引起了很多的思考。那种良师的谆谆教导的感觉，至今都让我难以忘记。类似英语环境中的作家海明威，就是行文硬朗，人送称号——美国硬汉。这就是一种写作风格。代码风格就更加具体了，好比句尾加不加分号，函数加不加空格，函数注释的格式。这些细碎的东西就构成了代码的风格。风格没有好坏

			
		

	



                


  
              

                


	

		

			

				
					
Vue 3与ESLint、Prettier：构建规范化的前端开发环境

				
			

			

				

					
				

				

					06-11
					
					1506
					
				

			

		

		

			
				
这篇文章介绍了如何在Vue 3项目中配置ESLint和Prettier以统一代码风格，实现代码规范性与可读性的提升。通过设置规则、解决冲突、以及将配置融入持续集成流程和代码审查过程，确保团队协作时代码风格的一致性，提升开发效率与项目维护性。

			
		

	





	

		

			

				
					
前端工程化探索-代码格式化

					
热门推荐

				
			

			

				

					weixin_43575775的博客
				

				

					02-26
					
					2万+
					
				

			

		

		

			
				
当我们需要对前端代码进行格式化的时候，其实只需要执行prettier的脚手架命令 就可直接对整个文件夹进行格式化如果还需要自定义的一些格式可以进行prettier 配置一般是新建配置文件.prettierrc（ 还有插件系统）有个问题，团队协作的时候不可能都按要求进行执行脚手架，所有需要把对应功能命令 放在代码提交之前，所有需要使用到husky(哈士奇)

			
		

	



		

			
		



	

		

			

				
					
前端项目中代码格式化配置：eslint + prettier + stylelint + pre-commit

				
			

			

				

					MFWSCQ的博客
				

				

					12-29
					
					3800
					
				

			

		

		

			
				
lint

			
		

	





	

		

			

				
					
前端代码格式化规范总结

				
			

			

				

					weixin_34233856的博客
				

				

					10-21
					
					175
					
				

			

		

		

			
				

分号结尾一定要加
行长度最好不超过80个字符
换行：

a)         运算符后换行，防止分析器自动分号加入机制误加分号
b)         长度达到单行最大限制换行时，运算符后换行并加入两个层级的缩进
c)         赋值时，如果需要换行，第二行之后对其到“=”

空行

方法之间
方法中的局部变量和第一条语句之间
在多行或多行注释之前
方法内的逻辑片...

			
		

	





	

		

			

				
					
前端CSS代码格式化、JavaScript代码格式化函数

				
			

			

				

					KaiSarH
				

				

					07-07
					
					599
					
				

			

		

		

			
				
JS实现CSS代码格式化、JavaScript代码格式化

			
		

	





	

		

			

				
					
前端格式化工具

				
			

			

				

					qq_32862143的博客
				

				

					08-26
					
					545
					
				

			

		

		

			
				
husky eslint commitlint...

			
		

	





	

		

			

				
					
前端工程——代码格式化

					
最新发布

				
			

			

				

					m0_72678953的博客
				

				

					08-26
					
					253
					
				

			

		

		

			
				
现在普遍项目都是团体开发，每个人都有自己不同的书写风格，我们需要格式化工具来统一码风。我们通用的方案是ESLint+Prettier，他们的职责如下：ESLint： 负责对代码的格式进行校验，配置文件为.eslintrc.jsPrettier：负责对代码进行格式化，配置文件为.prettierrc.js但是问题来了，这两种工具都有独立的配置项，我们需要人为编写配置去控制这两个工具保持一致。

			
		

	





	

		

			

				
					
前端代码格式化工具

				
			

			

				

					Mr_Far的博客
				

				

					03-11
					
					3009
					
				

			

		

		

			
				
前端代码格式化工具
前言
在多人合作开发项目的过程中，由于每个程序员的编程习惯不同，经常会出现代码风格不一致的情况。
由此引发出了一个问题 ---- 代码提交时，会出现大量的格式修改。
于是，我们制定了统一的开发标准来规范代码风格。
但是，程序员需要花费大量时间去熟悉开发标准，才能开发出风格统一的代码。
于是，为了让程序员的开发工作更方便，我们使用了代码格式化工具，让它自动对代码进行格式化。
目前，比较流行的代码格式化工具有 ESLint 和 Prettier 。
接下来，我们就一起来了解一下它们的功能和使

			
		

	





	

		

			

				
					
prettier设置内容

				
			

			

				

					可以叫我啪叽的石头
				

				

					11-19
					
					1265
					
				

			

		

		

			
				
module.exports = {
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 不使用缩进符，而使用空格
  useTabs: false,
  // 行尾需要有分号
  semi: true,
  // 使用单引号
  singleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',
  // jsx 不使用单引号，而使用双引号
  jsxSingleQuote: false,
  // 末尾不需要逗号
 

			
		

	





	

		

			

				
					
前端页面格式化代码

				
			

			

				

					哈哈hyc的博客
				

				

					08-23
					
					2432
					
				

			

		

		

			
				
大家在写前端页面的时候经常也是用到各种格式化，要么就是手写，要么就是网上找一份，这里有一份比较齐全的格式化，大家可以参考使用


html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,text...

			
		

	





	

		

			

				
					
Prettier 前端代码格式化工具

				
			

			

				

					weixin_41424721的博客
				

				

					12-23
					
					211
					
				

			

		

		

			
				
1、安装依赖
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier @vue/eslint-config-prettier
2、文件配置
（1）配置.eslintrc
module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  extends: [
  

			
		

	





	

		

			

				
					
前端格式化工具使用（eslint、stylelint、prettier、lint-staged和husky搭配格式化代码）

				
			

			

				

					AIWWY的博客
				

				

					01-09
					
					1450
					
				

			

		

		

			
				
例如react中通常eslint检测会报下面错误，可以通过引入eslint-plugin-react插件，然后在rules中添加''react/jsx-users-react':2,'react/jsx-uses-vars':2来开启规则避免报错。注意和eslint不同的是标准的共享配置需要安装，npm install stylelint-config-standard然后在extends中引入 stylelint-config-standard。是一个强大的,现代的代码检查工具,与ESLint类似,

			
		

	





	

		

			

				
					
前端项目中使用插件prettier/jscodeshift/json-stringify-pretty-compact格式化代码或json数据

				
			

			

				

					关注前端，关注原创
				

				

					04-25
					
					1801
					
				

			

		

		

			
				
平时遇到json、vue、css代码格式化，图片与base64互转、图片格式转换等操作时，都是找在线工具，有些工具做的还挺好，有些做的那一坨，一坨的排名还靠前……找几个在线工具都不好，终于忍不了，准备做一个自己的chrome/edge插件，方便以后开发时便捷操作。先从代码格式化开始。后续再把monaco集成进来，完成代码显示部分，demo先用输入框将就一下。

			
		

	





	

		

			

				
					
前端工程化系列之代码风格规范篇【prettier】代码格式化配置

				
			

			

				

					学而不思则罔,思而不学则殆
				

				

					03-26
					
					1517
					
				

			

		

		

			
				
通过配置 prettier ，可以为我们的前端工程化项目 提供统一的代码格式化风格

			
		

	





	

		

			

				
					
前端代码自动格式化prettier使用记录

				
			

			

				

					Y_seaboy的博客
				

				

					06-05
					
					1259
					
				

			

		

		

			
				
prettier的使用、Husky pre-commit fails with code 1 (error)

			
		

	





	

		

			

				
					
【自制】前端html代码格式化小工具

				
			

			

				

					qq_19891827的博客
				

				

					07-06
					
					2876
					
				

			

		

		

			
				
前言：当前端html代码进行大幅度调整后经常会出现代码缩进错乱的问题，或者在javascript中进行大段的html代码的字符串拼接时为了更方便的看出html的结构，出于以上两点原因，我们需要对html代码进行格式化操作，手工格式化容易出错，费时费力，于是本人自制了一个为html代码自动进行格式化的小工具，功能如图所示。


具体源代码(附带说明注释)写在下面。
注：代码中js部分涉及jq

			
		

	





	

		

			

				
					
atom 格式化前端代码 -- 自动缩进设置

				
			

			

				

					z_blackbear的博客
				

				

					08-22
					
					1万+
					
				

			

		

		

			
				
1.下载atom-beautify插件





 

2.点击插件settings找到格式化快捷键代码，点击复制代码；





3.切换到快捷键绑定，点击用户键盘映射，在打开的文件最后粘贴复制的代码







4.将代码改成如下形式：



5.保存文件后，在前端代码人家执行快捷键ctrl+alt+shift+b, ctrl+a, ctrl+alt+b,就可以把代码格式的美美的。如果你是每...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值