俗话说 欲先善其事必先利器,作为一个21新世纪的打工人,怎么可以没有一个趁手的编辑器工具呢。今天的主角就是 VS Code ,一个炒鸡强大的编辑器,我们先来介绍一下这个编辑器。
VS Code 全称 Visual Studio Code 是由微软开发的一款免费、跨平台的轻量级代码编辑器。以功能强大、提示友好、不错的性能和颜值俘获了大量开发者的青睐,对 JavaScript 和 NodeJS 的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全等。
再强大的IDE那也不可能面面俱到什么功能都塞进去,那样只会导致IDE本身太臃肿。功能嘛,按需索取,所以,vscode的很多强大功能都是基于插件实现的,IDE只提供一个最基本的框子和最基本功能,由插件来丰富和扩展它的功能。
一个美美的编辑器,在我们的开发过程中是非常友好的,所以我们先来介绍一下用于美化的插件
Material Theme 插件是一款用于美化主题的图标的插件,该插件包含两个子插件,分别是 Community Material Theme 该插件用于美化主题,还有一个 Material Theme Icons 用于美化图标的。
VSCode Great Icons 插件是 VS Code 图标插件,可以控制 VS Code 中的文件管理的树目录显示图标。不过如果安装上面那个插件这个插件也就不需要了。
Color Highlight 插件是 VS Code 中的颜色高亮插件,可以在编辑器中看出其背景颜色。
该插件也是一款颜色高亮插件,同上一个插件类似,是我现在使用的一个颜色高亮的插件
为不同的括号拥有不同的颜色,可以使嵌套结构表现特别明显,这个插件是我非常喜欢的一个插件,给我安排它。
Search node_modules 插件是一款高效的查找插件,当我们的文件太多时,需要找到某个定义的方法时,可以通过该插件在当前文件夹进行搜索内用
Path Intellisense 插件是一个路径智能感知插件,该插件在我非常喜欢的一个插件,对路径识别特别友好。
该插件不仅可以帮你搭建一个小的服务器,而且还可以实现实时预览 HTML ,再也不用这边 Ctrl+s 保存,回到浏览器 Ctrl + R 刷新了。
该插件会根据工作区中找到的定义或通过元素引用的外部文件为 HTML 属性提供 CSS 类名。
该插件用于翻译功能,官方描述是:许多优秀的项目,都有丰富的注释,使用者可以快速理解代码意图。但是如果使用者并不熟习注释的语言,会带来理解困难。本插件使用 Google Translate API 翻译 VSCode 的编程语言的注释。
该插件可以帮助我们在 HMTL 页面中直接查看 其 CSS 样式,(Ctrl + hover),也可以实现跳转(F12)到该 CSS 写的地方
该插件用于代码格式化,是我非常喜欢用的一个插件,非常的简单高效
这个插件可以帮助我们自动闭合 HTML/XML 标签,非常高效,必须推荐
这个插件的基本功能就是当我们修改 HMTL 标签名的时候,需要修改开始标签和闭合标签两个内容,如果多了会是一个非常烦的操作,不过这个使用这个插件,当我们修改开始标签的时候闭合标签也跟着一起修改。最后这两个插件在前端学习中我是极力的推荐的,真的给出的高效。
一个完美的码农的注释绝对是非常非常美观的,以下的插件可以帮助我们写出完美的注释
koroFileHeader 插件是在 VS Code 中用于生成文件头部注释和函数注释的插件,该插件功能强大使用简单
通过该插件可以使注释拥有一些样式,包含:代办、强调、警告等样式
Markdown 是我特别喜欢的一个工具,其样式美观,基本脱离鼠标的编辑方式真的是太赞了,VS Code 对 Markdown 也是非常友好的,拥有很多的插件,介绍几个我比较常用的。
Markdown Preview Enhanced 插件是超级强大的 Markdown 插件。 这款插件意在让你拥有飘逸的 Markdown 写作体验。
该插件提供了常用操作便利的快捷键、目录、实时预览等强大的功能
这些插件是我用 VScode 之后一直在使用的,今天整理分享出来,欢迎大家进行补充。
知识是共享的,技术是开源的。
作者:is_sweet
链接:https://juejin.im/post/6895742013560815629
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。