超实用VS Code插件推荐
文中有彩蛋,欢迎探索并食用 : )
这些插件按照 我平时使用的频率排序(从前往后成递增关系)
目前更新到了 30 个插件
感谢评论区小伙伴花时间提出的名称问题。为了防止歧义,文中提到的插件名称和在 VS Code 中搜索到的保持一致(大小写,连字符等)
下面进入正题:
基础必备插件
1、View In Browser
在浏览器里预览网页必备。
2、vscode-icons
改变编辑器里面的文件图标,个人比较稀饭这个。其他的这里就不说了。
3、Bracket Pair Colorizer
给嵌套的各种括号加上不同的颜色。
4、Highlight Matching Tag
高亮对应的 HTML 标签和标识出对应的各种括号的功能。
5、Auto Rename Tag
自动修改匹配的 HTML 标签。
6、Path Intellisense
智能路径提示,可以在你输入文件路径时智能提示。
7、Markdown Preview
实时预览 markdown。
8、stylelint
CSS / SCSS / Less 语法检查
进价必备插件
9、Live Server
彩蛋1
:
下面的小字注解: n p m(Node 包管理器)
是这样写出来的:<ruby>n p m<rp>(</rp><rt>Node 包管理器</rt><rp>)</rp></ruby>
一个不错的 Markdown 书写技巧是吧?提升阅读体验,真是太刺激了 : )
我以前使用 Live Server 都是 n p m(Node 包管理器) 下载的,而且使用的时候需要在控制台手动敲启动代码。还好 VSCode 有了相应的插件,现在只需要鼠标点几下就行了。
这个插件基本功能是预览网页,但它的特点是:会将网页在本地服务器上预览,最重要的是代码保存之后,浏览器自动刷新,有多方便不用我说了吧?
使用方法:
- 在 HTML 文件上右键
- 打开 HTML 文件,点击编辑器右下角 Go Live 按钮
10、Prettier
大名鼎鼎的 格式化插件。有的人可能会推荐 Beautify。我原来也是一直用这个,后来发现这个并不能格式化 React 的代码。所以果断换成 Prettier。
11、CSScomb
2019/5/23 更新
看名字应该可以联想到它的功能了吧?没错,正如其名,一把梳理 CSS 属性顺序的 “梳子”。CSS 属性书写顺序非常重要,一个合格的前端er 一定会有他遵循的 CSS 书写顺序规则。至于 CSS 属性书写顺序,这里我推荐腾讯 AollyTeam 团队的规范:http://alloyteam.github.io/CodeGuide/#css-declaration-order
下面简单说下这个插件怎么用。按照插件的文档说明:
在项目的根目录下创建一个名为:.csscomb.json
/ csscomb.json
/ .csscomb.js
/ csscomb.js
的文件,然后添加一些配置项。也可以将配置项写入项目的 package.json
文件中的 csscombConfig
字段。
至于添加的配置项,CSScomb 提供了示例配置文件:https://github.com/csscomb/csscomb.js/blob/master/config/csscomb.json
其中的 sort-order 就是 CSS 属性书写顺序,可以按照自己遵循的规范设置,所以我直接替换成了腾讯的。
这个配置文件里面各个字段的作用可以戳这里查看:https://github.com/csscomb/csscomb.js/blob/master/doc/options.md
放一个效果图:
下面的
content
属性放在第一个是我的个人习惯,其他的顺序都和 AollyTeam 的规范保持一致。
强迫癌看后表示很舒服!
12、carbon-now-sh
将代码分享为图片(图片的格式可以为 png 和 svg),最最最重要的是: 图片逼格敲高 ↓↓↓
之所以将代码分享为图片,是因为如果直接分享代码,在有些地方代码格式可能会乱。
比如:你在评论区和别人交流代码,结果那个评论区做的很垃圾,粘贴上去的代码格式会很乱,有的代码甚至被解析了?所以是不是有必要将代码分享为图片呢?
13、CodeIf
CodeIf
是一个用来给变量命名的网站,你只要输入你想起的中文名,它就会给你提供很多建议的命名:
可能很多人知道有 CodeIf
这么个网站,其实 VS Code 上有插件哦,是不是很神奇 : )
冲这个网站的逼格,必须安排!
14、Turbo Console Log
快捷添加 console.log,一键 注释 / 启用 / 删除 所有 console.log。
简直好用到犯规!
简单说下这个插件要用到的快捷键:
ctrl + alt + l 选中变量之后,使用这个快捷键生成 console.log
alt + shift + c 注释所有 console.log
alt + shift + u 启用所有 console.log
alt + shift + d 删除所有 console.log
15、GitLens
详细的 Git 提交日志。
Git 重度使用者必备,尤其是多人协作时:哪一行代码,何时、何人提交都有记录。
妈妈再也不用担心我背锅了!
16、LeetCode
2019 / 4 / 24 更新。今天妇联4首映,没有去看,还被剧透,很难受。
看到这个名字是不是很熟悉???没错,它就是有名的刷题网站 LeetCode 啦。今天我是才知道 VS Code 中有插件,果断入手 (๑•̀ㅂ•́)و✧
使用很简单输入用户名和密码就行了,看图:
是不是想着自己刷完 LeetCode,拿到大厂 offer 的样子已经激动地搓手手了呢 ?那就赶紧入手吧!
17、Regex Previewer
实时预览正则表达式的效果。
18、css-auto-prefix
自动添加 CSS 私有前缀。
19、change-case
转换命名风格。
10、CSS Peek
定位 CSS 类名。
21、vscode-json
处理 JSON 文件,用法看图:
22、HTML Boilerplate
虽然 VSCode 已经内置了一键生成 HTML 模板的快捷方式,但这个有另外的用处,看图:
23、Settings Sync
在不同电脑间同步你的插件。
安装了这么多插件,换了台电脑又得重新安装,所以,这个插件不考虑入手吗?
这里简述下这个插件怎么用:
- 首先要想在不同的设备间同步你的插件, 需要用到
Token
和Gist id
Token
就是你把插件上传到 github 上时, 让你保存的那段字符,Gist id
在你上传插件的那台电脑上保存着。
ps
: 如果你没有保存Token
,也不知道Gist id
,不要慌, 可以这样获取:
在你上传 Sync 设置的 VSCode 里,按 F1, 然后输入 Sync,选择 Sync: 高级选项
:
然后选择:
这样就会进入一个压缩的文件,然后鼠标右键整理一下文档格式如下:
这样就能看见你的 Token
了。
接下来就是获取你的 Gist id
:
在 VSCode 里,依次打开: 文件 -> 首选项 -> 设置,然后输入 Sync 进行搜索:
这样就获取到你的 Gist id
。
知道了 Token
和 Gist id
,就能在不同设备间同步你的 VSCode 插件。
(当然,你也可以把 Token
和 Gist id
分享给别人,这样别人就能一键下载你用的 VSCode 插件!)
彩蛋2
:
我的Token
和Gist id
分别是:
Token
:
4f5135c3c9e7275950f58133bc4b5f75461ceef3
Gist id
:
ce3ff9d53df48d738f1e9e86fff55a8c里面有我用的所有 VSCode 插件 : )
其他插件推荐
24、ES7 React/Redux/GraphQL/React-Native snippets
React/Redux/GraphQL/React-Native 代码快捷生成。
25、Minify
压缩 HTML、CSS、JS 代码。
26、:emojisense:
快速挑选 Markdown 中的 Emoji。
当然不想下载这个插件,可以去这个网站找你想用的 Markdown Emoji 代码:Emoji cheat sheet for Github
也可以下载浏览器插件,去寻找你想要的 Markdown Emoji代码 (这里我用的火狐浏览器):
当然,还有一个网站: Emoji Homepage,可以直接复制粘贴 Emoji,但是相应的 Markdown Emoji 代码,需要自己转换一下,比如这个表情:
鼠标经过显示 See No Evil
那么他的 Markdown Emoji 代码就是 :see_no_evil:
(全部小写, 空格用下划线代替)
27、TODO Highlight
高亮 TODO,FIXME、还可以自己配置要高亮的关键字。
我猜小伙伴们在跑代码时一定和我一样,经常打一些 TODO 标记吧?
所以,这个插件很适合你!
28、Icon Fonts
添加字体图标。
29、SVG Viewer
预览 SVG。
30、px to rem
像素转 rem。
不定期更新!
喜欢可以收藏一下~
超实用VS Code插件推荐相关推荐
- 超实用的IDEA插件推荐,百万级下载量
超实用的30多款idea插件,有百万级下载量的优秀插件,你值得拥有! 好的工具助你事半功倍,快速协助敲出更漂亮更有效率的代码.搬运工这里收集了很不错的IDEA插件,相信你一定会喜欢的. 〓必备插件列表 ...
- Visual Studio Code 插件推荐安装
给大家推荐一波vs studio code好用的插件: 1).C/C++,这个肯定是必须的. 2).C/C++ Snippets,即 C/C++重用代码块. 3).C/C++ Advanced Lin ...
- chrome vue插件_VS Code 前端常用插件推荐
⊕.vscode安装插件只需要点击图片所示按钮,即可进入拓展,在搜索框中输入插件名点击安装后,等待安装好即可点击重新加载重启vscode使得插件生效. Ξ.当你不需要某个插件时只需要进入扩展,点击对应 ...
- 推荐windows live writer插件(有图有真相有下载,有最好的code插件)
博客园本身提供的博客editor工具,用起来是很揪心的,网速慢点,博客后台反应就很迟钝,插入图片,插入代码,页面布局都不是很方便.windows live writer是一款不错的博客客户端,而且又提 ...
- 程序员请收好:10个非常有用的Visual Studio Code插件
作者 | Daan 译者 | Elle 出品 | CSDN(ID:CSDNnews) [导读]一个插件列表,可以让你的程序员生活变得轻松许多.无论你是经验丰富的开发人员还是刚刚开始第一份工作的初级开发 ...
- visual studio 代码提示插件_程序员请收好:10个非常实用的 VS Code 插件
关注上方"数据挖掘工程师",选择"星标公众号", 关键时间,第一时间送达! 编译:CSDN-Elle,作者:Daan 无论你是经验丰富的开发人员还是刚刚开始第一 ...
- 10 款 VS Code 插件神器,第 7 款超级实用!
VS Code 是这两年非常热门的一款 IDE,它不仅有提升开发体验的界面.轻量化的编辑器,还有丰富而强大的插件,这些优秀的插件使得 VS Code 生态体系更加吸引人,让开发效率大大提升.本文来介绍 ...
- vscode php调试插件,构建VSCode开发调试环境(强大且实用的插件推荐)
随着VSCode的不断完善和强大,是时候将部分开发迁移到VS Code中了. 目前使用VS2019开发.NET Core应用,一直有一个想法,在VS Code中复刻VS的开发环境,同时迁移到VS Co ...
- 10种JavaScript开发者必备的VS Code插件
摘要: 好的代码插件可以让工作效率翻倍,心情也更加舒畅! 原文:10 Must-have VS Code Extensions for JavaScript Developers 作者:Michael ...
- flutter开发vscode插件推荐(开发必备)
这里是坚果前端小课堂,大家喜欢的话,可以关注我的公众号"坚果前端,",或者加我好友,获取更多精彩内容 vscode开发插件推荐 扩展是完成工作的快捷方式.许多扩展有助于减少重复性工 ...
最新文章
- elementui table 固定列_elementUI Table组件 如何设置合并列
- 她是直播聊学习成“网红”的北大博士,毕业后入职民办学校,年薪70万
- 教你玩转CSS 伪类
- zTree v2.6 - v3.0 文件对比
- 2021互联网医疗行业洞察
- bootstrapSwitch bootstrap 的开关组件扩展
- 学习React之前你需要知道的的JavaScript基础知识
- 计算机会计学ufo报表,UFO报表管理实验报告.doc
- HikariCP 的使用
- 网络信息安全期末复习要点
- Oracle获取拼音简码
- 手机录制连续点赞并周期执行(免代码)
- 手机控制虚拟服务器app,手机控制云服务器的app
- 一个可以给文件添加备注信息的小工具
- 成人统考《计算机基础》模拟考试题目及答案(access部分,2012年计算机二级Access第五十套上机试题及答案详解...
- 云适配联合IT巨头拟成立“中国企业级HTML5产业联盟”
- 行测-数量关系-解题技巧-代入排除法
- pdf会签_跟我们做流程管理.pdf
- 【机器学习】数据挖掘/知识发现/人工智能相关概念梳理
- C#windows人事信息管理系统,员工评价系统
热门文章
- 淘宝客商城带分销APP源码(原生双端IOS+安卓+后台+数据 库+开发文档),用于学习或二开使用,开发语言:安卓java,苹果oc,后台php。
- c语言数据结构课程设计算术表达式求值,《数据结构 课程设计》表达式求值 实验报告...
- 自己动手写操作系统-经典书籍
- Latex:字体设置
- 虚拟机安装windows xp系统时,找不到网络连接
- u盘文件名乱码linux,科学网—u盘文件夹名称乱码,双击打开提示无法访问解决办法 - 芦红的博文...
- lufylegend引擎制作接水果小游戏
- 8086汇编语言程序设计
- SEOBOOK中文电子书-SEO基础教程
- 主题插件WordPress淘宝客ZZDGM主题Upanel插件使用补充