偶然间学会，可能有用。可能没用。

插件篇

vscode左侧导航栏有一个扩展（extensions）的按钮，点击后搜素想要的插件即可。也可以使用快捷键：ctrl + shift + x。一般安装后建议重新启动vscode，让安装的插件生效。

Chinese

介绍：vscode的默认语言是英语，所以对于英语不太好的朋友可能不太友好，可以安装该插件，将vscode进行汉译。

使用方法：安装好该插件后，关闭vscode再重新打开即可。这个一直在用，因为英语不好，但是也有在认真学习英语。这个有简体中文和繁体中文2种，自己选择。

Debugger for Chrome

介绍：Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.
在Chrome浏览器或任何其他支持Chrome Debugger协议的目标中调试JavaScript代码。

使用方法：自己平时没有怎么使用过。。。。不过之前看网上的推荐，就安装上了。具体使用方法可以网上百度。随便一提，如果你的项目中有.vscode文件夹，不用感到莫名其妙，因为这个文件夹就是该插件的配置文件。

会了吧

介绍：打开源码可以自动分析所有包含的英语单词，并显示解释结果。

使用方法：安装即可。在左侧导航栏的会图标查看分析出的单词，可以查看解释以及读音。

Beautify

介绍：格式化js代码的。让你的 js 代码更加规范，当然还有很多类似的插件，可以选择自己喜欢的一款。比如 prettier-code formatter ，这款插件支持更多种文件类型的格式化。

使用方法：安装后，按shift + alt + f即可，也可以右键选择格式化文档 。

Bookmarks

介绍：标记/取消标记代码中的位置、在代码中标记位置并为其命名、在书签之间向前和向后跳等等。比如你在看源码的时候就可以使用该插件。

使用方法：可以通过按F1，然后搜索书签，选择你要设置的书签快捷方式；或者可以右键选择书签，然后选择要进行的对应的操作即可。所有的标签都可以通过左侧导航栏的标签样式的按钮进行查看。

Bracket Pair Colorizer

介绍：为代码的括号着色。当你的代码有类似于这种((({(())})))出现的时候，是否感觉查找困难。使用该插件快速用不同颜色的线条匹配对应的括号。

使用方法：点击到要匹配的括号后面即可。
更新：该插件目前已经不再维护（2021-12-24），因为该功能vscode已经集成了。

Code Runner

介绍：可以快速执行各种类型的代码。

使用方法：右键选择Run Code即可，或者使用ctrl + alt + n快捷键执行代码。

Colorful Comments

介绍：一般的注释都太单调，该插件可以使用不同的开头符号来修改注释的颜色，包括Red (!)、Blue (?)、Green(*)、Yellow (^)、Pink (&)、Purple (~)、Mustard (todo)、Grey (//)。其他颜色自己可以参照插件的文档进行配置。
注意要使用英文的符号进行标识。

使用方法：// ! 控制删除的弹出框(该注释为红色)

Draw.io Integration

介绍：可以在vscode里画图。

使用方法：新建文件，后缀为.drawio或者.dio或者.drawio.svg或者.drawio.png，然后自己画图就行了。

EditorConfig for VS Code

介绍：执行后缀为.editorconfig的文件。该后缀文件一般会设置一些项目书写规范，该配置文件的优先级高于编辑器的默认规范。

使用方法：安装即可。

# http://editorconfig.orgroot = true[*] #表示所有文件使用
charset = utf-8 #设置文件字符集为uft-8
indent_style = space #缩进风格
indent_size = 2 #缩进大小
end_of_line = lf #控制换行类型
trim_trailing_whitespace = true #去除行首的任意空白字符
insert_final_newline = true #始终在末尾添加一个新行[*.md] #表示仅md文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

ESLint

介绍：配置一些 js 代码的书写规范。

使用方法：具体可以查看文档。ESLint - Pluggable JavaScript linter

Git History

介绍：该插件可以查看 git 日志，比较前后提交的文件的不同，包括但是不限于新增、删除、修改的标识。

使用方法：右键选择Git: View File History即可查看，或者按下alt + h进行查看。

Path Intellisense

介绍：在写路径的时候自动补全文件名。

使用方法：安装后直接使用即可。

Todo Tree

介绍：这个扩展快速地搜索您的工作区中的注释标记，如Todo和Fixme，并在资源管理器窗格的树视图中显示它们。单击树中的Todo将打开文件，并将光标放在包含Todo的行上。可以标记下次要做的或者要修改的地方，不用一个一个的打开文件去查找，可以通过左侧的导航栏快速的定位到。这个功能另外一个插件（Colorful Comments，上面有介绍过）也可以做到，但是不太方便进行定位。

使用方法：

// TODO 写一些你待做的功能
// FIXME 待修改的地方

Live Server

介绍：为静态或者动态网页搭建一个本地的开发服务器，实时查看效果。

使用方法：右键选择Open with Live Server，或者点击vscode最下方的Go Live即可。

Partial Diff

介绍：比较选中的2段文本或者打开的2份文件或者比较选中的文本和剪切板的文本的不同。

使用方法：右键选择Select Text for Compare,Compare Text with Previous Selection,Compare Text with Clipboard或者Compare Text in Visible Editors进行文件的比较。

JavaScript (ES6) code snippets

介绍：提供一些 es6 的代码片段，可以快速的编写.js或者.ts或是.jsx或者.tsx或者.html或者.vue的文件代码。

使用方法：在编写时会提示对应的代码片段。

vue的相关插件

Vetur、Vue 3 Snippets、Vue VSCode Snippets、Volar等等，具体选择哪一个看自己的编程习惯了。

大部分还在使用vetur，但是官方推荐使用volar，具体也还是看自己。

写在最后：后续慢慢更新一些可能会有用的小技巧。

vscode使用技巧相关推荐

13个VSCode使用技巧，开启高效的开发模式
摘要:VsCode是一款开源的编辑器,拥有强大的功能,.由于拥有各种各样的插件,这就使得VsCode可以做到的事情更多了.在使用的过程中,也是有很多技巧的,掌握一些技巧对于后期写代码也会轻松很多. 本 ...
vscode 使用技巧、快捷键
vscode 使用技巧.快捷键 1.1安装插件 YaoTranslate 按 Cmd+Shift+T 或 Ctrl+Shift+T 对选中的文本内容快速翻译按 Cmd+Shift+R 或 Ctrl+ ...
VSCode使用技巧及快捷键(tips)
VSCode使用技巧及快捷键(tips) 1.命令面板 F1 或者"Cmd+Shift+P "(Windows 上是 "Ctrl+Shift+P") 2.界面概 ...
vscode 打开函数表_效率倍增！10个超级好用的VScode使用技巧！
VScode 是由微软开发,运行于 Windows.Linux 和 macOS 之上的免费源代码编辑器.我喜欢 VScode,是因为它具备两大优势:「键盘快捷键」和「丰富的插件」. 在数据科学项目中, ...
解放生产力！20 个必知必会 VSCode 小技巧
本文转载于 SegmentFault 社区译者:漓漾li 这篇文章旨在帮助使用 VS Code 的人能够更快速的开发,不是每个人都有时间去研究每一个提示和技巧,去发现帮助他们更快开发的那一个 - 因 ...
vscode 调试技巧｜程序不是写出来的？是调出来的！
常用的调试手段作为程序猿的我可太清楚调试的重要性了,有一句话说的很对:程序不是写出来的,是调出来的.调试的方法很多,比如朴实的日志打印,打点的计量统计(比如 golang 的 pprof 信息),还 ...
前端开发工具 vscode 使用技巧篇：控制台由powershell切换为cmd方法，windows下新旧版控制台cmd与powershell互切方法
vscode 控制台切换方法可以看到右上角是 powershell 不是 cmd. 通过 ctrl+shift+p,搜索出默认的 shell. 然后选择 cmd. 最后重启 vscode 就好了. ...
vscode 使用技巧(持续更新)
全栈工程师开发手册 (作者:栾鹏) 架构系列文章安装中文商店搜索 Chinese 安装 Chinese (Simplified) Language Pack for Visual Studio C ...
vscode使用技巧（2）
在vscode中我们想要跳到函数定义的地方去,要装个插件,点击下面红色圈住的地方在里面搜索插件来安装,输入我们要安装的插件,php IntelliSense,如下安装好后,它会扫描我们的项目,如下 ...

vscode使用技巧

插件篇