【web前端开发】vs code插件推荐(以及一些使用技巧)

目录

插件推荐

0.Chinese (Simplified) Language Pack for Visual Studio Code

1.Prettier - Code formatter

2.Bracket Pair Colorizer 2 【现在新版vscode已经内置】

3.Highlight Line

4.GitLens — Git supercharged

5.Qwerty Learner  （摸鱼学英语单词的插件）

6.Luna Paint

7.vscode-drawio

8.驼峰翻译助手

9.Trailing Spaces

使用技巧

1.在文件目录中查找文件夹or文件名

---

插件推荐

0.Chinese (Simplified) Language Pack for Visual Studio Code

说明：简体中文版

1.Prettier ESLint

说明：代码格式化，比如我经常写有.tsx和.jsx的react项目，使用的便是这个

1.Prettier - Code formatter

说明：新公司是4格缩进派的，为了能在设置里改到插件的缩进配置，就改成了现在这个

 

2.Bracket Pair Colorizer 2 【现在新版vscode已经内置】

说明：使闭合的每组{}、[]、()显示相同的颜色，并且不同组的括号与括号之间颜色区分开。

如何在新版vs code中开启

3.Highlight Line

说明：高亮横行显示当前光标所在行

4.GitLens — Git supercharged

说明：当前光标的所在行会显示一个灰色斜体的git提交记录，显示作者以及commit信息

（重点推荐，也是给自己一个备忘，经常忘了这个插件叫啥）

效果图:

-----------------------------分割线------------------------------------------------------

20210507更新：

5.Qwerty Learner  （摸鱼学英语单词的插件）

6.Luna Paint

7.vscode-drawio

可以在.drawio文件里画流程图

8.驼峰翻译助手

给英文菜鸟快捷根据中译英起变量名（以前叫var-translate,现在改成纯中文名了，怪不得之前搜不到）

9.Trailing Spaces

显示标签后面的多余空格

备注：

可以配套indent-rainbow使用 

使用技巧

1.在文件目录中查找文件夹or文件名

聚焦到文件目录的文件夹上，然后ctrl+f可以呼出输入框，此时输入可以匹配和聚焦到符合条件的文件夹

也可以ctrl+p输入当前目录下的完整路径来找（左边目录不会有锚点效果）