vscode前端必备插件及常用快捷键

摘要:Visual Studio安装插件方法:打开VS:工具 --> 扩展和更新 --> 联机,搜索插件名称,选择下载进行安装。这篇文章主要讲解vscode前端必备插件及常用快捷键...

Visual Studio安装插件方法:打开VS:工具 --> 扩展和更新 --> 联机,搜索插件名称,选择下载进行安装。


vscode前端必备插件

HTML Snippets

超级实用且初级的 H5代码片段以及提示


HTML CSS Support

让 html 标签上写class 智能提示当前项目所支持的样式,新版已经支持scss文件检索


Debugger for Chrome

让 vscode 映射 chrome 的 debug功能,静态页面都可以用 vscode 来打断点调试,真666~


jQuery Code Snippets

jquery 重度患者必须品,废话不多说


vscode-icon

让 vscode 资源树目录加上图标


Path Intellisense

自动路劲补全,默认不带这个功能的,赶紧装


Npm Intellisense

require 时的包提示(最新版的vscode已经集成此功能)


Document this

js 的注释模板 (注意:新版的vscode已经原生支持,在function上输入/** tab)


ESlint

ESlint 接管原生 js 提示,可以自定制提示规则。


HTMLHint

html代码检测


Project Manager

在多个项目之前快速切换的工具


beautify

格式化代码的工具


Bootstrap 3 Sinnpet

常用 bootstrap 的可以下


Atuo Rename Tag

修改 html 标签,自动帮你完成尾部闭合标签的同步修改,不过有些bug。


GitLens

丰富的git日志插件


fileheader

顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间


filesize

在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间


Bracket Pair Colorizer

让括号拥有独立的颜色,易于区分。可以配合任意主题使用。


vetur

vue语法高亮、智能感知、Emmet等


VueHelper

vue中snippet代码片段


Material

冷门、好看、实用。此主题已停更许久


Dracula

目前我觉得是vscode上最漂亮的主题,vscode 1.11+允许自定义statusBar等全局ui后,该主题也跟进改了很多小细节,良心!~


One Dark Pro

源于Atom,老版本的Atom One Dark主题可以扔了.

vscode常用快捷键



列选择:ALT+左键

命令面板:F1

切出新编辑器:Ctrl + 左键文件

代码行缩进:Ctrl + [ 、Ctrl + ]

文件切换:Ctrl + Tab

转到行首/行尾:Home / End

转到文件头/文件尾:Ctrl + Home / Ctrl + End

重命名:F2

转定义:F12 or Ctrl + click

转定义(切出新编辑器): Ctrl + Alt + click

查看定义:Alt + F12

查看引用:Shift + F12

上下移动一行:Alt + Up / Alt + Down

代码格式化:Shift+Alt + F


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://shenqiku.cn/article/FLY_400