前端开发必备vscode插件

Auto Close Tag

作用：自动闭合标签

使用方法：安装好启用即可

Auto Rename Tag

作用：自动重命名标签

使用方法：安装好即可使用，修改标签会自动修改结束标签

CodeSnap

作用：代码截图插件

使用方法：安装好后选中代码右键选择CodeSnap📷

CSS Initial ValueCSS

作用：样式初始值提示

使用方法：安装好后放在css属性上会提示样式的初始值

CSS Peek

作用：快速查找类名定义位置（仅对外部css文件有效，vue文件不生效）

使用方法：

1. 按着Ctrl放在类名上，出现蓝色下划线后单击鼠标左键，弹出后回车即可跳转
2. 鼠标点击类名然后按F12，弹出后回车即可跳转

Easy LESS

作用：编译Less

使用方法：安装后打开less保存即可自动在同级目录生成同名的css文件，如果要指定路径，需要在less头部输入以下代码

文件保存在../css/文件夹下，”/“不能少，不然就是文件名为css

// out: ../css/

文件保存在../css/下且文件名为index.css

 // out: ../css/index.css

HTML to CSS autocompletion

作用：在外部css中提示html定义的类名

使用方法：安装好后点击插件的齿轮，然后打开扩展设置

选择linked-files（链接的文件），如果不改会提示文件夹内所有html的类名

CSS Class Intellisense

作用：内联样式提示

使用方法：安装完成即可使用，会在style标签中提示当前文件定义的类名

Image preview

作用：图像预览

使用方法：鼠标悬停在引入的文件名上即可显示

Path Intellisense

作用：路径提示工具

使用方法：输入路径是输入一个 . 即可开始提示

IntelliSense for CSS class names in HTML

作用：提示css文件中定义的类名

使用方法：在标签中输入类名是只需要输入开头就能提示

Live Server

作用：开启一个本地服务器，修改文件自动刷新浏览器

使用方法：

1. 可以使用快捷键ALT+L+O，中途ALT不能松开
2. 或者在HTML文件右键选择Open with Live Server

open in browser

作用：快速打开浏览器

使用方法：在HTML文件右键选择Open In Default Browser或者快捷键ALT+B

Prettier – Code formatter

作用：代码格式化工具

使用方法：需要node.js，然后在html文档右键选择格式化文档，或者将默认格式化程序设置为prettier，快捷键格式化：alt+shift+f

Document This

可以在js函数里设置提示文本

作用：生成函数注释，调用时提示

使用方法：在函数的function的前一行输入/**

Project Manager

多项目管理器，不用一直切换

Template String Converter

自动反引号

any-rule

作用：正则表达式

使用方法：按f1输入zz或者直接搜索，如果快捷键冲突可以按Ctrl+shift+p

方式1:

1. 按F1(mac下fn+F1)打开正则列表.
2. 输入关键词搜索, 比如”手机”.

方式2:

右键选择”🦕正则大全”.

方式3:

在代码任意位置输入”@zz“.