使用VSCode开发必备的这20个插件，你都安装了吗

0

1、GitLens

强烈建议安装插件GitLens, 它是 VS Code 中我最推荐的一个插件, 简直是 Git 神器, 码农必备。GitLens 在 Git 管理上有很多强大的功能, 比如：将光标放置在代码的当前行, 可以看到这行代码的提交者是谁, 以及提交时间。这一点, 是 GitLens 最便捷的功能。查看某个 commit 的代码改动记录查看不同的分支可以将两个 commit 进行代码对比甚至可以将两个 branch 分支进行整体的代码对比。这一点, 简直是 GitLens 最强大的功能。当我们在不同分支 review 代码的时候, 就可以用到这一招。

2、Chinese (Simplified) Language Pack for Visual Studio Code

中文包, 让软件显示为简体中文语言, 没啥好说的吧当初在学校时傻傻的觉得直接用英文用习惯了就行了,不然以后工作了别人没用中文这种很美的语言中文包应该怎么给人安装调试?事实证明,大部分出来设备都用的中文包,你的英文编辑器放进去别人给你调试时反而不习惯。

3、Live Server

在本地启动一个服务器, 代码写完后可以实现「热更新」, 实时地在网页中看到运行效果。就不需要每次都得手动刷新页面了。特别是写demo的时候很好用使用方式：安装插件后, 开始写代码；代码写完后, 右键选择「Open with Live Server」

4、open in browser

安装open in browser插件后, 在 HTML 文件中「右键选择 –> Open in Default Browser」, 即可在浏览器中预览网页。也是初学前端更容易用到的插件

5、Settings Sync

惊喜和意外永远不懂得哪个先来, 可能突然之间你的电脑就不说了, 那么的VSCode如果进行了大量个性化配置, 那就可以说是灾难了我们要将配置云同步, 这样的话, 当我们换个电脑时, 即可将配置自动同步到本地, 就不需要重新使用插件了, 也不需要再配置软件。我们可以把配置分享其他用户, 也可以把其他用户的配置给自己用操作步骤详见上面 :[Ⅳ – VS Code 配置云服务](#Ⅳ – VS Code 配置注释)

6、javascript console utils：快速打印 log 日志

安装这个插件后, 当我们按住快捷键「Cmd + Shift + L」后, 即可自动出现日志 console.log()。简直是日志党福音。当我们选中某个变量 name, 然后按住快捷键「Cmd + Shift + L」, 即可自动出现这个变量的日志 console.log(name)。其他的同类插件还有：Turbo Console Log。不过, 生产环境的代码, 还是尽量少打日志比较好, 避免出现一些异常。编程有三等境界：第三等境界是打日志, 这是最简单、高效的方式, 略显低级, 一般初学者或资深技术员偷懒时会用。第二等层次是断点调试, 在前端、Java、PHP、iOS 开发时非常常用, 通过断点调试可以很直观地跟踪作执行逻辑、调用栈、变量等, 是最实用的技巧。第一等境界是测试硬件开发, 在做这个之前先写测试。与第二等的断点调试刚好相相反多数人都不是很习惯这种方法,但在国外的开发者或者说敏捷爱好者眼中,它是最为高效的编程方法,它对保证编码的质量、复原等都很有帮助,是现代编程的必要手段一部分。

7、Git History

有些同学习惯使用编辑器中的 Git 管理工具, 而不太喜欢要打开另外一个 Git UI 工具的同学, 这一款插件满足你查询所有 Git 记录的需求。

8、Git Graph

同上 是另一款GUI插件

9、代码跳转

前端开发必装

① vscode-elm-jump

常规的代码跳转定义，按ctrl，和webstrom一样

② CSS Peek

和webstrom一样，按ctrl可以跳转css定义，按ctrl，和webstrom一样

③ vue-helper

让你在vue单文件里面的变量函数跳转定义2推荐插件

1、TODO Highlight

写代码过程中, 突然发现一个 Bug, 但是又不想停下来手中的活, 以免打断思路, 怎么办？按照代码规范, 我们一般是在代码中加个 TODO 注释。比如：（注意, 一定要写成大写TODO, 而不是小写的todo）//TODO:标注此处有个BUG, 暂存 11或者：//FIXME:How are You? 11安装了插件 TODO Highlight之后, 按住「Cmd + Shift + P」打开命令面板, 输入「Todohighlist」, 选择相关的命令, 我们就可以看到一个 todoList 的清单。

2、Search node_modules

node_modules模块里面的文件夹和模块实在是太多了, 根本不好找。好在安装 Search node_modules 这个插件后, 输入快捷键「Cmd + Shift + P」, 然后输入 node_modules, 在弹出的选项中选择 Search node_modules, 即可搜索 node_modules 里的模块。

3、Local History(慎用)

保持本地的文件历史记录,可以安装,代码不慎丢失的时候,有时候能够救命,但有弊端,他在你的项目下面生成一个[.history]文件,当你提交的时候,它就无法正常工作。如果没有操作好,这些也会提交资料,造成不可避免的提交。

4、Image Preview

图片预览。鼠标移动到图片 url 上的时候, 会自动显示图片的预览和图片尺寸。

5、kiwi-linter –>国际化处理

kiwi 的 VS Code插件工具, 主要用于检测代码中的中文, 高亮出中文字符串, 并一键提取中文字符串到对应的语言 Key 库。同时优化开发体验, 在 VS Code 中提供搜索中文, 提示国际化值对应的中文功能。

6、Vscode counter –> 项目代码统计

快速统计项目中代码行数以及分类,直接拓展商店搜索安装即可

① 快速统计代码行数

② 显示结果

③查看详情

7、korofileheader

自动转换文件头部注释，自动升级最后编辑人、最后修改时间等。一键生成函数注释，支持函数参数自动提取并列到注释中。支持添加佛祖庇佑永无bug、神兽护体、甩葱少女等好玩诙谐的图像注释配置非常灵活便捷，各种细节都能配置，可以量身定做适合你的注释。支持所有主流语言, 配置文档十分详细，齐全。3针对 框架 或 技术 的插件此部分是针对技术或者框架出的插件

1、Vetur

Vue 多功能集成插件, 包括：语法高亮, 智能提示, emmet, 错误提示, 格式化, 自动补全, debugger。VS Code 官方钦定 Vue 插件, Vue 开发者必备。

2、Simple React Snippets

与上方Vetur类似, React代码提示与补全, 只不过是React开发者用的

3、ES7 React/Redux/GraphQL/React-Native snippets

React/Redux/react-router 的语法智能提示。

4、minapp:小程序支持

小程序开发必备插件

5、JavaScript(ES6) code snippets

ES6 语法智能提示, 支持快速输入。

6、Class autocomplete for HTML

自动重命名配对的HTML/XML标签(必备)4个性化插件

1、highlight-icemode：选中相同的代码时, 让高亮显示更加明显

VSCode 自带的高亮显示, 实在是不够显眼。用插件支持一下吧。所用了这个插件之后, VS Code 自带的高亮就可以关掉了：在用户设置里添加”editor.selectionHighlight”: false即可。参考链接：vscode 选中后相同内容高亮插件推荐

2、vscode-icons

vscode-icons 会根据文件的后缀名来显示不同的图标, 让你更直观地知道每种文件是什么类型的。

3、Markdown 相关插件

a) Markdown Shortcuts

vscode预览md文件插件安装完毕, 重启VSCode, 然后打开.md文件。Ctrl + Shift + V, 即可预览。然后双击相应位置即可修改对应内容

b) Markdown Preview Enhanced

预览 Markdown 样式。

c) Markdown All in One

这个插件将帮助你更高效地在 Markdown 中编写文档。

4、Prettier

Prettier是单独关注的编码格式化,不包含验证功能, multi-team开发中,统一的代码写法规范很重要。一套规则可以让我们写代码的更快速度。码达到协调的风格, 增长代码的可读性和统一性。自然保障性也会得到提高。

5、Beautify

代码格式化工具。备注：相比之下, Prettier 是当前最流行的代码格式化工具, 比 Beautify 用得更多。

6、ESLint：代码格式校验

ESLint, 一个让初学者或者萌新牙痒痒的东西, 包括空格缩进大小写都会进行判定日常开发中, 可以用 Prettier 做代码格式化, 然后用 eslint 做校验。

7、 Courier New

一款好看字体

8、indent-rainbow：突出显示代码缩进

indent-rainbow插件：突出显示代码缩进。其实如果你装了ESLint, 就不太需要这个了, 因为缩进错误会报错效果如下图

9、 Code Spell Checker：单词拼写错误检查

这个拼写检查程序的目标是帮助捕获常见的单词拼写错误, 可以检测驼峰命名。从此告别 Chinglish.

10、 Polacode-2020：生成代码截图

可以把代码片段保存成美观的图片, 内容不同, 代码的配色方案也不同, 也也可自定义设置图片的线条颜色、大小、阴影。尤其是在我们做 PPT 分享时也会用到代码片段时, 或者需要在网路上优雅地分享代码块时, 这一招很管用。

特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.

/阅读下一篇/ 返回网易首页 下载网易新闻客户端