1.下载地址 : 点击去官网下载
2.常用插件:
汉化编辑器
Chinese (Simplified) Language Pack for自动同步修改标签
Auto Rename Tag自动闭合标签
Auto Close Tag快速格式化代码
PrettierVue template模板使用,语法高亮、智能感知、Emmet等
Vetursnippet代码片段
VueHelper预览页面在浏览器中打开页面(ctrl+F1)
View In Browser 、open In Browser自动路劲补全
Path Intellisense按着快捷键ALT+W可以实现给代码块加父标签
htmltagwrap提供你在 CSS 中使用颜色的相关信息
Color Info侧栏的图标,对于一个有视觉强迫症的人是必须要的
vscode-iconsHTML代码检测
HTMLHint样式名提示
IntelliSense for CSS class names给js文件生成头部注释的插件,注释快捷键是
ctrl+alt+i
,用户在settings.json中配置用户名和最后修改用户名即可使用
vscode-fileheader支持HTML5的标签提示
HTML Snippetscss自动补齐
HTML CSS support路径自动补齐
Path Autocomplete检测JS必备
ESLintvue必备
Vue 2 Snippets高亮scss并支持语法补全
Sass追踪至样式表中 CSS 类和 ids 定义的地方 ,右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码
CSS Peek一个萌萌的插件,可以自己设置vsc的背景图
background
3.常用快捷键
(在快捷键部分, ⌘ 指 Command 键,⇧ 指 Shift 键,⌃ 指 Control 键,⌥ 指 Option/Alt 键。)
这里主要就是实验F1上的快捷键,一些我认为没用的我就不列出来了。
向上(下)复制行 shift + alt + top(down)
向上(下)移动行** alt + top(down)**
新建一个窗口 ctrl + shift + N
行增加缩进: ctrl + [
行减少缩进 * ctrl + ]**
裁剪尾随空格(去掉一行的末尾那些没用的空格): ctrl + shift + x
强烈建议把这个启用,这样保存的时候就会自动删掉那些没用的空格,在很多公司的代码规范里都是不允许存在这些空格的。
显示隐藏侧边栏:ctrl + B
拆分编辑器(最多拆分成三块):ctrl + /按ctrl + 1(2,3)就可以在拆分后的编辑器里切换
方法缩小ctrl +(-)
关闭编辑器 ctrl + W(F4)
切换编辑器 ctrl + shift + left(right)
也可以用 ctrl+1(2,3)
显示和隐藏侧边栏 ctrl + B
切换全屏 F11
切换自动换行 alt + Z
显示Git ctrl + shift + G
前提是你的项目必须是一个git项目
这个还是很有用的,有时候我们的屏幕不够大,可是代码没有自动换行,所以被遮住的代码就会看不到,但是你用这个快捷键就可以换行看到了。这个我是在用户设置里面设置成自动换行的。
修改快捷键
打开右下角设置-键盘快捷方式-输入comment(打开代码注释快捷键设置)
文件 – 首选项 – 键盘快捷方式,和修改用户设置的时候一样,找到你要修改的快捷键名字,右边覆盖就可以了,一些还没有绑定快捷键的功能可以在左边的最下面看到,然后快捷键的名字就是这个。
修改用户设置
把默认的用户设置成适合我们自己的还是很重要的。
也很简单,文件 – 首选项 – 用户设置,然后出来左边的默认设置是不能改的,需要在右边settings.json中覆盖。