vscode css智能补全_高效率工具:web前端开发VScode必备插件大全

ff45768814a8bc98b3e4d8b539a6d002.png

Bracket Pair Colorizer

友好的给括号加上不同的颜色,便于区分不同的区块,使用者还可以定义括号类型和颜色,尤其是 Dart 语言开发,尤为重要。

6ec8558d3041d5ad0db101c72f228317.png

Terminal

编辑器中内嵌一个似 cmd 终端程序,直接在编辑器中运行终端命令。

d72899ae22a29963ab0e5d04c746d879.png

Path Intellisense

插件自动提示文件路径,支持各种文件无脑快速引入,非常方便。

89892eae1a74957e1e1cf32c1308721d.png

JavaScript(ES6) code snippets

ES6 语法智能提示及快速输入,不仅仅支持 .js,还支持.ts,.jsx,.tsx,.html,.vue。

12b67f293518a6822f3c391596b9315c.png

ES7 React/Redux/GraphQL/React-Native snippets

React/Redux/Reatc Native/react-router 语法智能提示,React 开发者必备。

4f5806e9ccdf515ffb7eda1b68a319b6.png

Vetur

Vue 多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。vscode 官方钦定 Vue 插件,Vue开发者必备。

3342ee59b2a8230e7762e576daa101ee.png

Npm Intellisense

npm 装包后,require 时的包智能提示,import 语句中自动填充 npm 模块。

52c37adfc2820a821fc6791b48b6abf9.png

Markdown Preview Enhanced

实时预览 Markdown,Markdown(.MD) 使用者必备。

131e11f6e2f806ad42617fb681530ade.png

code spell checker

检查你的英文单词拼写是否有误,如果有库里不存在的单词则会下下波浪线。

add09f4c8ac8d140c0c346bf86682a24.png

Better Comments

使注释有人性化的高亮显示,团队中非常适用,突出重点提示。 符号有:* 、! 、TODO 、@param。

709333b88947820a1701800dd7db228a.png

markdownlint

Markdown 语法纠错,快速上手 MD 语法。

3517925b56b00cffefe03c1906c0f5d7.png

Auto Close Tag

自动闭合 HTML / XML 标签,非常快速的编写 HTML 代码。

0f71f2cb36ce972b6ee1acf7d4e90f46.png

Auto Rename Tag

自动完成 HTML / XML 另一侧标签的同步修改,非常方便。

86de2c978dcfa301ce4f41c85ae3da9b.png

ESLint

JavaScript 语法纠错,可以自定义配置,也可以参照官网的配置,摆正开发者的代码格书写格式。

74979f749555e28033f3fc4fcb291581.png

GitLens

快捷方便查看 Git 日志,高频使用 Git 者必备,这里有配置教程。

3e2067509b3c00b2413bc1cd8852952c.png

HTML CSS Support

智能提示 CSS 类名以及 id 名,非常高效。

ce39f2a8d54af9c4ae4f71e4ef6aa698.png

HTML Snippets

智能提示 HTML 标签,以及标签的含义,再也不用翻手册了。

0d8e730825a92d930481701f559a5865.png

jQuery Code Snippets

jQuery 代码智能提示,非常优雅。

ad9f800613bf14a74a828fb29d5147cc.png

vscode-icons

美化插件,用于美化目录树图标主题。

df1770d1baeb9ac8358ed8ce39787636.png

Dracula Official

编辑器颜色主题,很漂亮。

212623dadeb56f8fcbdf1b080b858d21.png

Class autocomplete for HTML

智能提示HTML class =“”属性,很好用。

4efafd6f84949427e3be115d3741012f.png

IntelliSense for CSS class names

智能提示 css 的 class 名,无脑录入。

f6bdd63ee3845af4db8ee780b2cb7171.png

vsc-netease-music

写代码无聊,来点音乐?好的!

6c431e2cebff2350fa4f17867bcc34fb.png

Power Mode

打字炫酷特效震动光效插件,这是配置教程,可以装着玩玩。

e45a8b40d47d38bdfbf2b38e897259c8.png

live Server

模拟本地服务器,编写网页时保存后自动刷新,无需到浏览器中刷新。

9df73210967c9150f1babf555601064a.png

Visual Studio IntelliCode

给开发者提供最合适的 IntelliSense 上下文建议功能,除此之外,还有代码格式化和规则推测等功能。

ba81c0a1f5649a7546a74725e7eebbf7.png

Image Preview

鼠标悬浮在链接或者装订线(gutter)左边可以预览到图片,非常方便。

7955961a98bf3402f80339f8ba08ad7a.png

Output Colorizer

输出提示的文字颜色有一些变化,方便获取关键信息。

78943d322b81015e4c4de7bf0d63c4b5.png

filesize

在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间。

9efbce91a5063b460d5ead35c9bfd72d.png

SVG Viewer

无需离开编辑器,便可以打开 SVG 文件并查看。

640deb2c93bca1986aa4420d6664ce2a.png

WakaTime

如果你想记录每天编程所花的时间,它可以帮助记录和存储有关编程活动的指标和分析。

7ee9d4aa17b2958745a3ec078a4f3e6a.png

Color Info

提供你在 CSS 中使用颜色的相关信息,悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)。

2660c12db49afe18a8ac9554f5fceb95.png

Minify

用于压缩合并 JavaScript 和 CSS 文件的应用程序,命令生成 .min 文件。

95b784dc4f7cea0cc52c4da98b021b05.png
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值