1.open in borwser：

写完代码后鼠标右击将代码在浏览器中运行

2.Chinese

汉化Vscode

3.vscode-icons

html    
    
   、css   


     


     

、js



 




 




、less图标显示

4.Live Server

代码块写完后使用Live Server    
    
   ，每次修改代码Ctrl+S后浏览器无需再刷新即可跟着变化   


     


     

，

与win+左键或win+右键搭配爽歪歪



 




 




，直接效率起飞！！！

5.HTML to CSS autocompletion

外联样式提示插件

6.Error Lens

错误提示信息

7.Easy LESS

将.less文件生成一个.css文件   

   

  ，在px单位转换到rem单位过程中使用最为方便

8.Auto Rename Tag

自动重命名HTML/XML标签

9.Auto Close Tag

自动闭合标签插件,成对标签输入时只需输出前面一个标签即可补全后面标签

10.代码换行实现自动对齐

左下角齿轮选“设置  
    
    
” 搜索框搜‘Editor: Word Wrap’    

     

     
，将off改成on

11.Ctrl + S自动对齐

左下角齿轮选“设置

     


     


   ” 搜索框搜‘Format On Save’




  




  




，勾选即可！

12.行内标签自动换行

在敲代码时候  


  


 ，我们使用a*5时     
     
     ，想获得到的代码形式时这样的

但很多情况下




   




   




，呈现出来的效果是这样的

我们只需在设置 ——> 上方搜索“Syntax Profiles 




 




 

” ——> 在settings.json中编辑中添加 "inline_break": 2 即可

13.JavaScript (ES6) code snippets

ES6中语法代码智能提示

14.自动保存代码

设置——>Auto Save

15.Vue 3 Snippets

针对Vue的代码的插件

16.VueHelper

1）可以自动提示 Vue.js 组件选项的语法

2）为 Vue.js 标签提供语法高亮

3）增强代码智能提示的功能

4）为 Vue.js 组件提供快速跳转功能

17.ESLint

代码检查工具    
    
   。规范我们写代码的格式, 保证团队内成员风格统一该插件与 11.Ctrl + S自动对齐 设置有冲突
 



 



，使用该插件时应把保存时自动格式化设置关掉

在该插件扩展设置中添加以下代码：(在VSCode中启用ESLint插件               ，并在保存文件时自动运行ESLint检测并修复代码问题   


     


     

。) "eslint.run": "onType", "editor.codeActionsOnSave": { "source.fixAll.eslint": true }