vscode使用sass_15款好用的VS Code插件,记得收藏

用好 VS Code 插件,不仅能节省你的时间,还能提高工作效率。

VS Code 有个市场,它提供很多插件。开发人员可以把插件安装到文本编辑器,增强编辑器功能。在视图菜单中,选择扩展选项或按下 shift + cmd + X 即可进入市场。

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

1. Live Server

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

8d2e3f0acef443f8e4c7945bc7b45c5c.gif

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

下载地址:

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

2. Quokka.js

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

6342ce3b2608459f04dd565b13d0834b.gif

下载地址:

https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

3. Code Spell Checker

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

06effece22c1363f015986c6caf7fbf6.gif

下载地址:

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

c9a89f00afa9f2926f2fc80dab4430e9.png

下载地址:

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

6. ESLint

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

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

9111623287aec9c2f60f9fc329dff567.png

下载地址:

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

7. vscode-icons

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

3ce3f5b59414f8cd035c6ab47ae6bf39.png

下载地址:

https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

8. Live Saas Compiler

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

7aa9d39e2ae29e67df3498245272a467.png

下载地址:

https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass

9. JavaScript (ES6) code snippets

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

下载地址:

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

10. Browser Preview

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

b261e1f7d6da6ebd850ab27e3f32de61.png

下载地址

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

11. Path Intellisense

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

7a597489b9a433368ba3140234039a53.gif

下载地址:

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

12. Bracket Pair Colorizer

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

60dae6230fc8ef2116bc0c5f0a58004b.png

下载地址:

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

13. Vim

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

9aff74081100636ec31ca766d50c2207.png

下载地址:

https://marketplace.visualstudio.com/items?itemName=vscodevim.vim

14. TODO Highlight

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

f5d5f454cdb6af2dacddd875c61663ab.png

下载地址:

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

15. Color Highlight

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

下载地址:

https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

今天给大家的分享就到这吧!有收获,需要JAVA面试资料或者基础资料都可以关注小编同时转发此文章后再私聊小编回复【java】从里面获取2020年java架构师进阶学习资料和BAT面试题。大家一起交流成长!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值