js函数提示 vscode_工欲善其事，必先利其器，VSCode高效插件

小黑

怎么了，小粉，愁眉苦脸的

小粉

刚刚一个问题找了半个小时，居然。。。

小黑

居然怎么样？

小粉

说了你不许笑我蠢，，，找了半个小时，

居然因为少写了一个括号?

小黑

哈哈哈

小粉

你还笑，这效率，

看来今晚又要加班了o(╥﹏╥)o

小黑

别苦着脸了，试试这几个vscode插件，

保证你开发效率提上来

小粉

真的吗，我看看... ...

vscode 插件Rainbow Brackets编码过程中，尤其在我们使用js进行函数式编程时，代码里会有很多的花括号，想要保证它们对称十分困难，所以就出现了上面小粉同学的尴尬局面，相信很多人都遇到过类似的情况。Rainbow Brackets，可以将同一对花括号给定相同的颜色，可以一眼就看出配对的两个花括号。Indent RainbowIndent Rainbow 则可以给代码的缩进提供颜色上提示，和 Rainbow Brackets 这搭配使用，可以在代码层级较多时，也能看起来很清晰，一目了然。

Project Manager工作中，我们经常会来回切换多个项目，每次都要找到对应项目的目录再打开，比较麻烦。Project Manager插件可以解决这样的烦恼，它提供了专门的视图来展示你的项目，我们可以把常用的项目保存在这里，需要时一键切换，十分方便，妈妈再也不用担心我忘记把项目放在哪个目录下了。

Import Cost在项目开发过程中，我们会引入很多npm包，有时候可能只用到了某个包里的一个方法，却引入了整个包，导致代码体积增大很多。Import Cost可以在代码中友好的提示我们，当前引入的包会增加多少体积，这很有助于帮我们优化代码的体积。

Pigment 遇到颜色代码时，Pigment会将颜色渲染在这段代码的下面。

GitLensGitLens可以显示每一行代码的作者，提交时间，以及commit信息，在想要知道哪行代码是谁改动的时候非常的实用。

把鼠标移到这条提示上，会弹出更详细的描述，

不止如此，GitLens 还可以查看代码的历史记录，能够查看某个 commit 的代码改动，能够 diff 任意commit或branch，进行对比。Settings SyncSettings Sync 提供了同步个人设置的功能，当我们需要换电脑进行开发时，比如回家用自己的电脑，或者换了新的电脑，该插件可以帮你同步之前做的设置，不需要在每台电脑上都重新设置一次。Markdown Preview Enhanced超级强大的 Markdown 插件，这款插件可以让你拥有飘逸的 Markdown 写作体验。程序员怎么可能不写文档？！Markdown Preview Enhanced对Markdown语法进行了增强。支持了目录，批注，自定义预览css，插入公式，纯文本绘图，导出导入文档，制作幻灯片，甚至，还可以在文档中跑代码。总之一句话非常强大，非常好用。文末给出了Markdown Preview Enhanced的中文文档地址，感兴趣可以去了解一下。ESlint

ESlint可以在我们在coding的时候，分析我们的代码，对有错误或不符合规范的地方，给出提示，让我们第一时间发现代码的问题。同时，还能在保存时，帮助我们自动修复一些问题。

关于eslint的更多使用方法，请戳谈谈前端代码规范

Path Intellisense

Path Intellisense可以智能提示路径，并帮我们自动补全路径

Document This

可以帮我们快速生成代码注释，比如一些函数的注释，能够自动抽取出参数的定义。比如下面的函数，只需在上面输入/**，就会自动触发 Document This插件，生成如下的注释。

小粉

哇，感觉好棒啊，我都要用起来，

你刚刚给我说了插件有

Markdown Preview Enhanced，还有，，，

还有啥了，我记不住了

小黑

。。。。。。。。。猪脑子

小粉

你刚才都说哪些插件了，再说一遍！

小黑

那你晚上陪我看电影，我就告诉你?

小粉

啥？？？我晚上要加班呢?

小黑

有了这些插件，你还用加班呢？！

小粉

是哦，那好吧。

如何分享插件分享插件，除了将插件名字告诉你的小伙伴，当然还有其他的办法了！可以在项目的 .vscode 目录下创建文件 extensions.json。然后给 recommendations提供一个想要分享给同伴的插件的 ID 数组，这样当他们打开项目，并且没有安装某些插件时，VS Code就会提示安装了，并且可以一键全部安装。

.vscode/extensions.json文件内是这样的。

{    "recommendations": [      '2gua.rainbow-brackets',      'oderwat.indent-rainbow',             'alefragnani.project-manager',             'wix.vscode-import-cost',             'jaspernorth.vscode-pigments',             'eamodio.gitlens',             'shan.code-settings-sync',             'shd101wyy.markdown-preview-enhanced',             'dbaeumer.vscode-eslint',             'christian-kohler.path-intellisense',             'joelday.docthis'       ]}

可以直接复制上面的代码到自己项目的.vscode/extensions.json 文件中，一键安装本文介绍的所有插件。

recommendations数组中是插件的ID，不是名字，插件ID可以在这里查看。

小粉

哇~ 一下子就都安装上了，好赞啊

小黑

嘿嘿嘿，别忘了去看电影啊~

小粉

最近「哪吒」比较火，要不就看它？

小黑

好呀，我们下班走起

小粉

看完电影是不是太晚了？没地铁了咋办

(小黑偷笑，，，此处省略××字，具体情节请自行脑补)

故事纯属虚构，如有雷同，纯属巧合。祝大家提高效率，不再加班！相关链接Markdown Preview Enhanced文档：https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/

初识Threejs，一起学习成长

长按关注 “初识Threejs”

把有用的知识，分享给更多人

你“在看”我吗？

js函数提示 vscode_工欲善其事，必先利其器，VSCode高效插件相关推荐

js函数提示 vscode_为VSCode / Monaco Intellisence添加JavaScript类型提示
有没有办法暗示VSCode / Monaco的intellisense变量的类型. 我有一些像这样的代码 var loc = window.location; var gl = context1.ge ...
js函数提示 vscode_VSCode + JSDoc 完美实现（almost）JavaScript代码提示
弱类型脚本语言的代码提示功能一直是开发者一个隐隐的痛点,没有它也不是不能干活,但是经常因为出现拼写错误或不经意的修改导致的变量丢失而耗费无畏的时间在与业务逻辑无关的地方.VSCode的出现大有统一轻量 ...
JS的组成-JS数组方法-JS函数-系统化学习
JS Day01 什么是js的组成? ECMAScript(es) 其实就是js的规范(规则) DOM 文档对象模型 div span BOM 浏览器对象模型 JS的使用方式行内样式的书写(不经常使 ...
工欲善其事必先利其器-C语言拓展–嵌入式C语言（一）
工欲善其事必先利其器-C语言拓展–嵌入式C语言(一) 我是golang出生,当时做项目的时候java.c++.js.python都折腾过,但是关于c语言的接触,基本上都停留在大一的那个暑假.后来因为要 ...
js函数使用详细讲解！
文章目录使用函数定义函数声明函数构造函数函数直接量定义嵌套函数调用函数函数调用函数的返回值方法调用使用call和apply调用使用new调用函数参数形参和实参获取参数个数 ...
【CS-Notes】工欲善其事必先利其器（Code、Git、Docker、Linux）
文章目录 Code工作台(工欲善其事必先利其器) 1.通用工具 1.1.编辑器 1.2.Git 基本版本控制 1.3.Docker容器 2.Linux工作台 2.1.Linux命令 2.2.开发工具 ...
毕业总结：工欲善其事必先利其器(公开版)（更新中）
短短的研究生生涯已然结束,回望初到上海的情景,自己还是一无所知的科研小白.在老师的悉心教导以及实验室兄弟姐妹的相互帮助下,自己获得了能力上的提升,也取得了一定的科研成果.科研路漫漫,站在巨人的肩膀上才 ...
vscode 高效开心开发uniapp
vscode 高效开心开发uniapp 因为之前一直都是使用vscode开发前端项目,现在有一些小程序或者h5项目采用uniapp开发,在体验了一段时间hbuiler之后,还是觉得vscode香,以下 ...
100多个基础常用JS函数和语法集合大全
网站特效离不开脚本,javascript是最常用的脚本语言,我们归纳一下常用的基础函数和语法: 1.输出语句:document.write(""); 2.JS中的注释为// 3.传 ...

js函数提示 vscode_工欲善其事，必先利其器，VSCode高效插件

js函数提示 vscode_工欲善其事，必先利其器，VSCode高效插件相关推荐

最新文章

热门文章