vscode使用技巧

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

插件篇

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.org

root = 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，具体也还是看自己。

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