VS Code前端常用插件及快捷键

水深无声 2022-12-02 01:21 266阅读 0赞

VS Code是一款逐渐火热的编辑器。它的特点免费、开源、多平台，以及集成git，代码调试，插件丰富等有点，被大家逐渐熟知和认可。  
VS Code是免费软件，直接到官网下载安装即可，如果选用这款编辑器，建议花点时间实习一下这款软件，安装必要的插件，会大大提供编码效率。

##### 配置中文界面 #####

安装的VSCode软件默认使用的是英文语言环境，如需要改成中文，可在扩展中安装中文语言包，安装后重启软件即可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]

##### 自动保存 #####

File -> AutoSave(中文界面下“文件”->“自动保存”) 或者 Ctrl+Shift+P，输入 auto

# 前端常用插件 #

Auto Close Tag

自动闭合HTML/XML标签

Auto Rename Tag

自动重命名配对的HTML / XML标签

HTML Snippets

智能提示HTML标签，以及标签含义

HTML CSS Support

CSS 自动补齐

HTML Boilerplate

提供生成标准HTML样板代码。在html文件中输入!+Tab即可生成HTML样板代码

HTMLHint

对 HTML 代码文件进行静态代码检查,从而提高 HTML 代码编写的规范和质量  
![在这里插入图片描述][20200829142539418.png_pic_center]

JavaScript(ES6) code snippets

ES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间

Beautify

格式化 HTML,JavaScript ,css

Prettier

格式化JavaScript / TypeScript / CSS

Bracket Pair Colorizer

给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色

Css Peek

能在源代码中的字符串中找到对应的css（类和ID）。显示在那个css文件里，还有在第几行。

Csscomb

css 、less、sass 的代码排序、格式化。

Path Intellisense

文件路径提示。

open in browser

支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari

Debugger for Chrome

js调试的插件，前端项目在Chrome中运行起来之后，可以直接在VSCode中打断点、查看输出、查看控制台，详细配置见插件说明。

[调试方法戳这][Link 1]

ESLint

检查Javascript编程时的语法错误。

Color-Highlight

在编辑器中高亮显示颜色。

Color Picker

代码的颜色选择器。

Color Info

在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息

Project Manager

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

filesize

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

### 注释 ###

Document This

为js文件生成文档的代码注释。将光标放置于function上面，中选 点鼠标右键，在菜单Document This，快捷键是 Ctrl+Alt+D 加 Ctrl+Alt+D。

vscode-fileheader

给js文件生成头部注释的插件,每次修改js文件之后会自动修改的时间和作者  
快捷键： ctrl+alt+i

VS Code CSS Comments

css代码注释。

### 视图 ###

vscode-icons

文件图标,让 vscode 资源树目录加上图标

Guides

代码的标签对齐线。

### 功能扩展 ###

Bookmarks

Bookmarks 是一个书签工具，你是否已经厌倦了无休止地滚动代码，或者使用“Ctrl+F”来找到你想要修改的那行代码？这个 VSCode 书签拓展工具能够让你快速平顺的创建和跳转书签。

jQuery Code Snippets

jQuery代码智能提示

Lodash

lodash 函数提示。

Bootstrap 4 & Font awesome snippets

bootstrap4和font awesome 快速引用和代码生成。

Npm Intellisense

require 时的包提示

Import Cost

显示导入的包的大小

GitLens

方便查看git日志，git重度使用者必备

Settings Sync

编辑器设置同步，包括插件，配置等。

Markdown Preview Enhanced

实时预览markdown，markdown使用者必备

markdownlint (推荐)

markdown语法纠错

### Vue插件 ###

Vetur

语法高亮、智能感知、Emmet等  
包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着）

VueHelper

vue代码提示

# 常用快捷键 #

显示所有命令： Ctrl+shift+P或F1,弹出命令行  
转到文件： Ctrl+P  
开始调试：F5  
切换终端：Ctrl + \`

### 查找替换 ###

查找: Ctrl+F  
查找替换: Ctrl+H  
在文件中查找：Ctrl+shift+F  
在文件中查找替换：Ctrl+shift+H

### 编辑器与窗口管理 ###

新建文件: Ctrl+N  
文件之间切换: Ctrl+Tab  
打开一个新的VS Code编辑器: Ctrl+Shift+N  
关闭当前窗口: Ctrl+W  
关闭当前的VS Code编辑器: Ctrl+Shift+W  
切出一个新的编辑器窗口（最多3个): Ctrl+  
切换左中右3个编辑器窗口的快捷键: Ctrl+1 Ctrl+2 Ctrl+3  
全屏显示(再次按则恢复): F11  
放大或缩小(以编辑器左上角为基准): Ctrl +/-  
侧边栏显示或隐藏： Ctrl+B  
显示资源管理器(光标切到侧边栏中才有效): Ctrl+Shift+E  
显示搜索(光标切到侧边栏中才有效): Ctrl+Shift+F  
显示(光标切到侧边栏中才有效): Git Ctrl+Shift+G  
显示 Debug: Ctrl+Shift+D  
显示 Output: Ctrl+Shift+U

### 代码编辑 ###

跳转到行数，也可以 Ctrl+G 直接进入  
代码行向左或向右缩进: Ctrl+\[ 、 Ctrl+\]  
复制或剪切当前行/当前选中内容: Ctrl+C 、 Ctrl+V  
代码格式化: Shift+Alt+F  
向上或向下移动一行: Alt+Up 或 Alt+Down  
向上或向下复制一行: Shift+Alt+Up 或 Shift+Alt+Down  
在当前行下方插入一行: Ctrl+Enter  
在当前行上方插入一行: Ctrl+Shift+Enter  
手动保存: Ctrl+S  
撤销上一步操作: Ctrl+Z

### 光标 ###

光标移动到行首: Home  
光标移动到行尾: End  
光标移动到文件结尾: Ctrl+End  
光标移动到文件开头: Ctrl+Home  
移动到光标所在标识符定义处: F12  
查看光标所在标识符定义处缩略图(只看一眼而不跳转过去): Alt+F12  
选择从光标到行尾的内容: Shift+End  
选择从光标到行首的内容： Shift+Home  
删除光标右侧的所有内容(当前行): Ctrl+Delete  
扩展/缩小选取范围： Shift+Alt+Right 和 Shift+Alt+Left  
多行编辑(列编辑): Alt+Shift+鼠标左键 或 Ctrl+Alt+Down/Up  
同时选中所有匹配编辑(与当前行或选定内容匹配): Ctrl+Shift+L  
下一个匹配的也被选中: Ctrl+D  
回退上一个光标操作: Ctrl+U

### 重构代码 ###

找到所有的引用: Shift+F12  
同时修改本文件中所有匹配的: Ctrl+F2  
跳转到下一个 Error 或 Warning: 当有多个错误时可以按 F8 逐个跳转

参考资料：  
https://blog.csdn.net/jiandan1127/article/details/85957003

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]: /images/20221123/7c44501054884640aab97ab7ef33f31e.png
[20200829142539418.png_pic_center]: /images/20221123/7885ba2045a245bc961d27bf30a47fae.png
[Link 1]: https://blog.csdn.net/example440982/article/details/79587704