VSCode 基础必备插件

基础必备插件

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:

下面的小字注解: npmNode 包管理器

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

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

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

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

使用方法:

在 HTML 文件上右键

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

10、Prettier

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

11、carbon-now-sh

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

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

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


12、Codelf

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

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

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

13、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

14、GitLens

详细的 Git 提交日志

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

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

15、Regex Previewer

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

16、css-auto-prefix

自动添加 CSS 私有前缀

17、Change Case

转换命名风格

18、CSS Peek

定位 CSS 类名

19、vscode-json

处理 JSON 文件,用法看图:

20、HTML Boilerplate

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

21、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 插件 : )

其他插件推荐

22、React/Redux/react-router Snippets

React 代码快捷生成

23、Minify

压缩 HTML、CSS、JS 代码

24、: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:(全部小写, 空格用下划线代替)

25、TODO Highlight

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

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

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

26、Icon Fonts

添加字体图标

27、SVG View

预览 SVG

28、px to rem

像素转 rem

29、ny-rule 正则插件 

使用

方式1:

F1(mac下fn+F1)打开正则列表.

输入关键词搜索, 比如"手机".

方式2:

右键选择"🦕正则大全".

方式3:

在代码任意位置输入"@zz".

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

推荐阅读更多精彩内容