VSCode 基础必备插件

基础必备插件

1、View In Browser

在浏览器里预览网页必备

2、vscode-icons

改变编辑器里面的文件图标,个人比较稀饭这个。其他的这里就不说了。

image

3、Bracket Pair Colorizer

给嵌套的各种括号加上不同的颜色

image

4、Highlight Matching Tag

高亮对应的 HTML 标签 以及 标识出对应的各种括号

image

5、Auto Rename Tag

自动修改匹配的 HTML 标签

image

6、Path Intellisense

智能路径提示,可以在你输入文件路径时智能提示。

image

7、Markdown Preview

实时预览 markdown

8、stylelint

CSS / SCSS / Less 语法检查

image

进价必备插件

9、Live Server

彩蛋1:

下面的小字注解: n p mNode 包管理器

是这样写出来的:<ruby>n p m<rp>(</rp><rt>Node 包管理器</rt><rp>)</rp></ruby>

一个不错的 Markdown 书写技巧是吧?提升阅读体验,真是太刺激了 : )

我以前使用 Live Server 都是 n p mNode 包管理器 下载的,而且使用的时候需要在控制台手动敲启动代码。还好 VSCode 有了相应的插件,现在只需要鼠标点几下就行了。

这个插件基本功能是预览网页,但它的特点是:会将网页在本地服务器上预览,最重要的是代码保存之后,浏览器自动刷新,有多方便不用我说了吧?

使用方法:

image

在 HTML 文件上右键

打开 HTML 文件,点击编辑器右下角 Go Live 按钮

image

10、Prettier

格式化插件。有的人可能会推荐 Beautify。我原来也是一直用这个,后来发现这个并不能格式化 React 的代码。所以果断换成 Prettier。

11、carbon-now-sh

将代码分享为图片(图片的格式可以为 png 和 svg),最最最重要的是: 图片逼格敲高 ↓↓↓

之所以将代码分享为图片,是因为如果直接分享代码,在有些地方代码格式可能会乱。

比如:你在评论区和别人交流代码,结果那个评论区做的很垃圾,粘贴上去的代码格式会很乱,有的代码甚至被解析了?所以是不是有必要将代码分享为图片呢?

image

12、Codelf

Codelf 是一个用来给变量命名的网站,你只要输入你想起的中文名,它就会给你提供很多建议的命名:

image

可能很多人知道有 Codeif 这么个网站,其实 VSCode 上有插件哦,是不是很神奇 : )

image

冲这个网站的逼格,必须安排!

13、Turbo Console Log

快捷添加 console.log,一键 注释 / 启用 / 删除 所有 console.log

简直好用到犯规!

image

简单说下这个插件要用到的快捷键:

ctrl + alt + l 选中变量之后,使用这个快捷键生成 console.log

alt + shift + c 注释所有 console.log

alt + shift + u 启用所有 console.log

alt + shift + d 删除所有 console.log

14、GitLens

详细的 Git 提交日志

Git 重度使用者必备,尤其是多人协作时:哪一行代码,何时、何人提交都有记录。

image

妈妈再也不用担心我背锅了!

15、Regex Previewer

实时预览正则表达式的效果

image

16、css-auto-prefix

自动添加 CSS 私有前缀

image

17、Change Case

转换命名风格

image

18、CSS Peek

定位 CSS 类名

image

19、vscode-json

处理 JSON 文件,用法看图:

image

20、HTML Boilerplate

虽然 VSCode 已经内置了一键生成 HTML 模板的快捷方式,但这个有另外的用处,看图:

image

21、settings sync

在不同电脑间同步你的插件

安装了这么多插件,换了台电脑又得重新安装,所以,这个插件不考虑入手吗?

image

这里简述下这个插件怎么用:

首先要想在不同的设备间同步你的插件, 需要用到 Token 和Gist id

Token 就是你把插件上传到 github 上时, 让你保存的那段字符,Gist id 在你上传插件的那台电脑上保存着。

ps: 如果你没有保存Token,也不知道Gist id,不要慌, 可以这样获取:

在你上传 Sync 设置的 VSCode 里,按 F1, 然后输入 Sync,选择 Sync: 高级选项:

image

然后选择:

image

这样就会进入一个压缩的文件,然后鼠标右键整理一下文档格式如下:

image

这样就能看见你的 Token 了。

接下来就是获取你的 Gist id:

在 VSCode 里,依次打开: 文件 -> 首选项 -> 设置,然后输入 Sync 进行搜索:

image

这样就获取到你的 Gist id。

知道了 Token 和 Gist id,就能在不同设备间同步你的 VSCode 插件。

(当然,你也可以把 Token 和 Gist id 分享给别人,这样别人就能一键下载你用的 VSCode 插件!)

彩蛋2:

我的 Token 和 Gist id 分别是:

Token:

4f5135c3c9e7275950f58133bc4b5f75461ceef3

Gist id:

ce3ff9d53df48d738f1e9e86fff55a8c

里面有我用的所有 VSCode 插件 : )

其他插件推荐

22、React/Redux/react-router Snippets

React 代码快捷生成

image

23、Minify

压缩 HTML、CSS、JS 代码

image

24、:emojisense:

快速挑选 Markdown 中的 Emoji

image

当然不想下载这个插件,可以去这个网站找你想用的 Markdown Emoji 代码:Emoji cheat sheet for Github

也可以下载浏览器插件,去寻找你想要的 Markdown Emoji代码 (这里我用的火狐浏览器):

image
image

当然,还有一个网站: Emoji Homepage,可以直接复制粘贴 Emoji,但是相应的 Markdown Emoji 代码,需要自己转换一下,比如这个表情:

image

鼠标经过显示 See No Evil 那么他的 Markdown Emoji 代码就是 :see_no_evil:(全部小写, 空格用下划线代替)

25、TODO Highlight

高亮 TODO,FIXME、还可以自己配置要高亮的关键字。

我猜小伙伴们在跑代码时一定和我一样,经常打一些 TODO 标记吧?

所以,这个插件很适合你!

image

26、Icon Fonts

添加字体图标

image

27、SVG View

预览 SVG

image

28、px to rem

像素转 rem

作者:Rising_life
链接:https://www.jianshu.com/p/8b4d9ca571e6
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,948评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,371评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,490评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,521评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,627评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,842评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,997评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,741评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,203评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,339评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,955评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2 349

推荐阅读更多精彩内容