1. 全栈程序员必看首页

vs code必备插件_手机flash player插件

全栈程序员-用户IM • • 未分类

vs code必备插件_手机flash player插件基础必备插件：1、ViewInBrowser在浏览器里预览网页必备。2、vscode-icons改变编辑器里面的文件图标。个人比较稀饭这个，其他的你们可以自行选择。3、SublimeTextKeymapandSettingsImporter这个名字挺长，说白了就是sublime的快捷键插件。由于以前我是用sublime这款编辑器的，所以换成vscode之后没有su…

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

文中有彩蛋，欢迎探索并食用 : )

这些插件按照 我平时使用的频率排序（从前往后成递增关系）

目前更新到了 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 有了相应的插件，现在只需要鼠标点几下就行了。

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

使用方法：

  1. 在 HTML 文件上右键
    在这里插入图片描述
  2. 打开 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。

不定期更新！

喜欢可以收藏一下~

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/190939.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

赞 (0)
全栈程序员-用户IM全栈程序员-用户IM
0 0
blank

相关推荐

  • 大数据Hbase 面试题「建议收藏」

    大数据Hbase 面试题「建议收藏」

    大数据Hbase 面试题「建议收藏」1.2hbase的特点是什么  (1)Hbase一个分布式的基于列式存储的数据库,基于Hadoop的hdfs存储，zookeeper进行管理。(2)Hbase适合存储半结构化或非结构化数据，对于数据结构字段不够确定或者杂乱无章很难按一个概念去抽取的数据。(3)Hbase为null的记录不会被存储.(4)基于的表包含rowkey，时间戳，和列族。新写入数

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年5月31日
  • 双边滤波加速「建议收藏」

    双边滤波加速「建议收藏」

    双边滤波器是同时考虑空间域和值域信息的类似传统高斯平滑滤波器的图像滤波、去噪、保边滤波器。其模板系数是空间系数d与值域系数r的乘积。其思想是：空间系数是高斯滤波器系数，值域系数为考虑了邻域像素点与中心像素点的像素值的差值，当差值较大时，值域系数r较小，即，为一个递减函数（高斯函数正半部分），带来的结果是总的系数w=d*r变小，降低了与“我”差异较大的像素对我的影响。从而达到保边的效果，同时

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年4月16日
  • Linux lvm扩容

    Linux lvm扩容

    Linux lvm扩容Linuxlvm扩容一、格式化##Fdisk/dev/sdb##Command(mforhelp):t#转换类型##Hexcode(typeLtolistcodes):L#查看可用类型:##Hexcode(typeLtolistcodes):8e#修改为8e,即LinuxLVM类型##Command(mforhelp):w#保存并退出##mkfs-text4/dev/sdb（centos6）…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年6月20日
  • 修复受损的系统的两个小妙招

    修复受损的系统的两个小妙招

    修复受损的系统的两个小妙招

    全栈程序员-用户IM 全栈程序员-用户IM
    2021年7月28日
  • mutual information loss_munication

    mutual information loss_munication

    mutual information loss_munication今天挺paperreading的时候，听到了最大化互信息，还不清楚互信息是个什么东东，google了一下，从http://en.wikipedia.org/wiki/Mutual_information摘过来了：    DefinitionofmutualinformationFormally,themutualinformationoftwod

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年9月17日
  • Spring mvc介绍

    Spring mvc介绍

    Spring mvc介绍Spring mvc介绍

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年4月22日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号