乐趣区

关于前端:VS-code-高效使用说明二

VS Code 有一个很弱小的性能就是反对插件扩大,让你的编辑器好像领有了三头六臂,能极大进步工作效率。

上图中,点击红框局部,即可在输入框里,查找你想要的插件名,而后进行装置。

这里举荐一些实用的插件,倡议珍藏备用!

1、GitLens【荐】

几乎是 Git 神器,码农必备。GitLens 在 Git 治理上有很多弱小的性能,比方:

  • 将光标搁置在代码的以后行,能够看到这样代码的提交者是谁,以及提交工夫。这一点,是 GitLens 最便捷的性能。
  • 查看某个 commit 的代码改变记录
  • 查看不同的分支
  • 能够将两个 commit 进行代码比照
  • 甚至能够将两个 branch 分支进行整体的代码比照。这一点,几乎是 GitLens 最弱小的性能。当咱们在不同分支 review 代码的时候,就能够用到这一招。

2、Git History

有些同学习惯应用编辑器中的 Git 管理工具,而不太喜爱要关上另外一个 Git UI 工具的同学,这一款插件满足你查问所有 Git 记录的需要。

3、Live Server【荐】

在本地启动一个服务器,代码写完后能够实现「热更新」,实时地在网页中看到运行成果。就不须要每次都得手动刷新页面了。

应用形式:装置插件后,开始写代码;代码写完后,右键抉择「Open with Live Server」。

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

让软件显示为简体中文语言。

5、Bracket Pair Colorizer 2:突出显示成对的括号【荐】

Bracket Pair Colorizer 2插件:以不同色彩显示成对的括号,并用连线标注括号范畴。简称 彩虹括号

另外,还有个 Rainbow Brackets 插件,也能够突出显示成对的括号。

6、sftp:文件传输【荐】

如果你须要将本地文件通过 ftp 的模式上传到局域网的服务器,能够装置 sftp 这个插件,很好用。在公司会常常用到。

7、open in browser

装置 open in browser 插件后,在 HTML 文件中「右键抉择 –> Open in Default Browser」,即可在浏览器中预览网页。

8、highlight-icemode:选中雷同的代码时,让高亮显示更加显著【荐】

VSCode 自带的高亮显示,切实是不够显眼。用插件反对一下吧。

所用了这个插件之后,VS Code 自带的高亮就能够关掉了:

在用户设置里增加 "editor.selectionHighlight": false 即可。

9、vscode-icons

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

10、Project Manager

工作中,咱们常常会来回切换多个我的项目,每次都要找到对应我的项目的目录再关上,比拟麻烦。Project Manager 插件能够解决这样的懊恼,它提供了专门的视图来展现你的我的项目,咱们能够把罕用的我的项目保留在这里,须要时一键切换,非常不便。

11、TODO Highlight

写代码过程中,忽然发现一个 Bug,然而又不想停下来手中的活,免得打断思路,怎么办?依照代码标准,咱们个别是在代码中加个 TODO 正文。比方:(留神,肯定要写成大写TODO,而不是小写的todo

//TODO: 这里有个 bug,我一会儿再拾掇你

或者:

//FIXME: 我也不晓得为啥,but it works only that way.

装置了插件 TODO Highlight之后,按住「Cmd + Shift + P」关上命令面板,输出「Todohighlist」,抉择相干的命令,咱们就能够看到一个 todoList 的清单。

12、Markdown Preview Github Styling【荐】

以 GitHub 格调预览 Markdown 款式,非常简洁优雅。就像上面这样,左侧书写 Markdown 文本,右侧预览 Markdown 的渲染成果:

13、Markdown Preview Enhanced

预览 Markdown 款式。

Markdown All in One

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

14、Vetur

Vue 多功能集成插件,包含:语法高亮,智能提醒,emmet,谬误提醒,格式化,主动补全,debugger。VS Code 官网钦定 Vue 插件,Vue 开发者必备。

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

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

16、minapp:小程序反对

小程序开发必备插件。

17、Prettier:代码格式化

Prettier 是一个代码格式化工具,只关注格式化,但不具备校验性能。在一个多人协同开发的团队中,对立的代码编写标准十分重要。一套标准能够让咱们编写的代码达到统一的格调,进步代码的可读性和统一性。天然维护性也会有所提高。

18、ESLint:代码格局校验

日常开发中,倡议用能够用 Prettier 做代码格式化,而后用 eslint 做校验。

19、Beautify

代码格式化工具。

备注:相比之下,Prettier 是以后最风行的代码格式化工具,比 Beautify 用得更多。

20、JavaScript(ES6) code snippets

ES6 语法智能提醒,反对疾速输出。

21、Search node_modules【荐】

node_modules模块外面的文件夹和模块切实是太多了,基本不好找。好在装置 Search node_modules 这个插件后,输出快捷键「Cmd + Shift + P」,而后输出 node_modules,在弹出的选项中抉择 Search node_modules,即可搜寻 node_modules 里的模块。

22、indent-rainbow:突出显示代码缩进

indent-rainbow插件:突出显示代码缩进。

装置实现后,成果如下图所示:

23、Code Spell Checker:单词拼写错误查看

这个拼写检查程序的指标是帮忙捕捉常见的单词拼写错误,能够检测驼峰命名。从此辞别 Chinglish.

24、Local History【荐】

保护文件的本地历史记录,强烈建议装置。代码意外失落时,有时能够救命。

25、Polacode-2020:生成代码截图【荐】

能够把代码片段保留成好看的图片,主题不同,代码的配色计划也不同,也也能够自定义设置图片的边框色彩、大小、暗影。

尤其是在咱们做 PPT 分享时须要用到代码片段时,或者须要在网络上优雅地分享代码片段时,这一招很有用。

生成的成果如下:

其余同类插件:CodeSnap。咱们也能够通过 https://carbon.now.sh/ 这个网站生成代码图片

26、Image Preview【荐】

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

27、Auto Close Tag、Auto Rename Tag

主动闭合标签、主动对标签重命名。

28、Better Comments

为正文增加更醒目、带分类的色调。

29、CSS Peek

加强 HTML 和 CSS 之间的关联,疾速查看该元素上的 CSS 款式。

30、Vue CSS Peek

CSS Peek 对 Vue 没有反对,该插件提供了对 Vue 文件的反对。

31、Color Info

这个便捷的插件,将为你提供你在 CSS 中应用色彩的相干信息。你只需在色彩上悬停光标,就能够预览色块中色调模型的(HEX、RGB、HSL 和 CMYK)相干信息了。

32、Import Cost

在我的项目开发过程中,咱们会引入很多 npm 包,有时候可能只用到了某个包里的一个办法,却引入了整个包,导致代码体积增大很多。Import Cost插件能够在代码中敌对的提醒咱们,以后引入的包会减少多少体积,这很有助于帮咱们优化代码的体积。

33、Paste JSON as Code

此插件能够将剪贴板中的 JSON 字符串转换成工作代码。反对多种语言。

退出移动版