15款好用的VS Code插件

时间: 2020-01-23阅读: 458标签: 插件

用好 VS Code 插件,不仅能节省你的时间,还能提高工作效率。VS Code 有个市场,它提供很多插件。开发人员可以把插件安装到文本编辑器,增强编辑器功能。在视图菜单中,选择扩展选项或按下 shift + cmd + X 即可进入市场。

善用 VS Code 插件,不仅节省时间,还能提高工作效率,让你成为更好的开发人员。


1 Live Server

该插件允许我们在更改 IDE 中的代码时,自动重新加载 Web 页面。

一旦安装 Live Server 后,在 html 文件上右键单击,可看到选项 Open with Live Server[Alt + L + Q]。

下载地址:https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer


2 Quokka.js

Quokka.js 会在你输入时自动计算结果,并在 IDE 中打印结果。

下载地址:https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode


3 Code Spell Checker

它是一款拼写检查程序,可以为开发者报告一些常见的拼写错误。它很适合驼峰式代码

下载地址:https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker


4 GitLens

GitLens 可增强 Visual Studio Code 中内置的 Git 功能。

它不仅能帮助你通过 Git blame 注解直观地看到代码作者,而且还可以无缝浏览和探索 Git 存储库,通过强大的比较命令获得有价值的见解等等。

下载地址:https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens


5 Prettier

Prettier 是一个严格基于规则的代码格式化程序。

它解析代码并使用自己的规则重新打印代码,从而实现风格一致。这是一个重要的工具,无需开发人员做任何工作,它就能让我们获得格式正确的代码。

Prettier 提供合理的默认值,但你也能在项目的根目录下提供一个配置文件来设置自己的标准,比如行长度、制表符 / 空格的数量等等。

下载地址:https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode


6 ESLint

ESLint 是一款静态代码分析工具,用来识别 JavaScript 代码中出现的有问题的模式。

ESLint 中的规则是可配置的,用户可以定义和加载自己的规则。它还涵盖了代码质量和编码风格问题。

下载地址:https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint


7 vscode-icons

该插件会基于文件扩展名在 the tree view 中的文件名旁添加图标,让你更容易地识别文件。

下载地址:https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons


8 Live Saas Compiler

它能帮你实时把 SASS/Scss 文件编译 / 转译成 css 文件,并且提供在线浏览器重载。

下载地址:https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass


JavaScript (ES6) code snippets

这个插件包含面向 VS Code 编辑器的 ES6 语法的 JavaScript 代码片段(支持 JavaScript 和 TypeScript)。

下载地址:https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets


10 Browser Preview

它可以让你在编辑器中打开一个用于调试的真正的浏览器预览。

下载地址:https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview


11 Path Intellisense

该扩展可以自动补全代码中的路径和文件名。

下载地址:https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense


12 Bracket Pair Colorizer

这个扩展允许用颜色来标识匹配的括号。用户可以定义要匹配的字符和要使用的颜色。

下载地址:https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer


13 Vim

VSCodeVim 是一个用于 Visual Studio Code 的 Vim 仿真器,为你的文本编辑器带来 Vim 的强大功能。

下载地址:https://marketplace.visualstudio.com/items?itemName=vscodevim.vim


14 TODO Highlight

高亮显示代码中的 TODO、FIXME 及其他注解。

下载地址:https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight


15 Color Highlight

这个扩展可以风格化在你的文件中找到的 css/web 颜色,所以你无需打开页面就能看到它们是什么颜色。

下载地址:https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight


相关阅读:https://levelup.gitconnected.com/15-vs-code-extension-to-save-your-time-and-make-you-a-better-developer-506f79baec53


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/7575

关闭

babel插件的相关知识

Babel 是 JavaScript 编译器,更确切地说是源码到源码的编译器,通常也叫做“转换编译器(transpiler)”。 意思是说你为 Babel 提供一些 JavaScript 代码,Babel 更改这些代码,然后返回给你新生成的代码

分享 10 个超实用的 Chrome 扩展

CSSViewer这个工具在识别和显示元素的CSS属性方面很有用。它包括一个浮动窗口,您可以把鼠标悬停在页面上任一元素上以查看它的所有CSS属性。您可以通过快捷键在CSSViewer的窗体中轻松复制您选定元素的样式。

能让你开发效率翻倍的 VSCode 插件配置

工欲善其事必先利其器,软件工程师每天打交道最多的可能就是编辑器了。入行几年来,先后折腾过的编辑器有 EditPlus、UltraEdit、Visual Studio、EClipse、WebStorm、Vim、SublimeText、Atom、VSCode,现在仍高频使用

用webpack发布一个vue插件包

先到npm官网上注册一通,然后npm login,顺利的登录了,再运行npm publish,然后报错:只有管理员可以发布此模块,上网查了之后说是npm镜像的问题,不能用淘宝镜像,于是就安装了nrm专门用于切换镜像

总结18个webpack插件

何为插件(Plugin)?专注处理 webpack 在编译过程中的某个特定的任务的功能模块,可以称为插件。Plugin 是一个扩展器,它丰富了 webpack 本身,针对是 loader 结束后,webpack 打包的整个过程

使用CodeMirror插件遇到的问题

结果你会发现,可以复制代码,没问题,但是不可以粘贴复制的代码,那问题到底出现在了哪里呢?首先呢,排除clipboard插件的问题,这个很简单,随便找个例子测试一下就行了

实现一个vue-router插件

要想自己实现一个vue-router插件,就必须先了解一下vue-router插件的基本使用,我们在使用vue-router的时候,通常会定义一个router.js文件,里面主要就是干了以下几件事:

Js二维码插件:qrious

二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据类型。

EXIF.Js读取图片的EXIF信息

EXIF(Exchangeable Image File)是“可交换图像文件”的缩写,当中包含了专门为数码相机的照片而定制的元数据,可以记录数码照片的拍摄参数、缩略图及其他属性信息,简单来说,Exif信息是镶嵌在 JPEG/TIFF 图像文件格式内的一组拍摄参数

js轮播插件_轮播图js代码插件总汇

这篇文章为大家分享图片轮播插件,最全最简单最通用的 幻灯片轮播插件,pc端和移动端都可完美使用,能满足绝大部分网站的轮播需求。js轮播插件包括Swiper、slick、owl carousel2、jssor/slider 、iSlider 等

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!