VScode 插件推荐 献给所有前端开发者

于 2019-03-27 11:39:14 发布
阅读量1.1k 收藏 9
点赞数 3
文章标签： VS插件 vscode插件 vscode plug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34846662/article/details/88840776
版权

VScode 插件推荐 献给所有前端开发者

HTML Snippets

初级H5代码提示,很实用

在这里插入图片描述

CSS Formatter

给CSS代码提供格式化支持 按alt+shift+f即可一键格式化代码

CSS Peek

在HTML源码中查看CSS类的定义 按F12直接跳转到定义编辑页,按alt+F12则可以再当前页面查看CSS类的定义

在这里插入图片描述

JS & CSS Minifier

用来压缩css和js文件 按下F1后输入minify即可使用 会在原路径中生成对应的.mim.js和.min.css文件

css-minify

安装前面那款可以不用安装这个
按ctrl+F1启动css minify(没有反应的话就按下F1输入css-minify) >用来压缩css文件 在css原路径中生成 [你的文件名].min.css文件 保持源码没有变动的情况下大幅减少css文件体积

Quokka.js

可以实时显示js代码中的变量值 使用时先按F1输入quokka选择new file再开始写代码

在这里插入图片描述

HTML CSS Support

让 html 标签上写class 智能提示当前项目所支持的样式

在这里插入图片描述

vscode-icon

让 vscode 资源树目录加上图标，清晰易懂

在这里插入图片描述

Path Intellisense

自动补全路径
在这里插入图片描述

vscode-fileheader

按ctrl+alt+i 自动为文档加上作者信息,可以在插件设置里修改

在这里插入图片描述

Color Info

显示代码中颜色的详细信息 rgba cmyk 16进制的都可以使用 悬浮在颜色代码上即可看到详细信息

在这里插入图片描述

filesize

在vscode中显示当前文件的大小
按下Crtl-shift-'可以在控制台显示当前文件的大小,压缩后大小,创建和修改日期

在这里插入图片描述

HTML Boilerplate

HTML5的代码模板 创建html文件后输入html即可使用

在这里插入图片描述

墨抒颖 msy.plus
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
博客
webpack,vite为JS、HTML、CSS开启条件编译,宏剔除,代码剔除
06-25 952
webpack,vite为JS、HTML、CSS开启条件编译,宏剔除,代码剔除
博客
VSCode 使用Settings Sync同步配置(最新版傻瓜教程)
08-13 2万+
VSCode 使用Settings Sync同步配置(最新版傻瓜教程)准备工作安装Settings SyncVSCode 使用Settings Sync同步配置(最新版傻瓜教程)之前无意中听到有人说,vsCode最大的缺点就是每次换个电脑或者临时去个新环境,就要配置一下各种插件,好不麻烦,以至于面试都不敢说自己用vsCode 说着无心,听着有意,因为我也发现了这个问题,索性认真找了一下网上...
博客
E: Sub-process /usr/bin/dpkg returned an error code (1) 解决办法
06-09 519
#现将info文件夹更名sudo mv /var/lib/dpkg/info /var/lib/dpkg/info.bk#建一个新的info文件夹sudo mkdir /var/lib/dpkg/info#安装修复sudo apt-get updatesudo apt-get install -f #执行完上一步操作后，在info文件夹下生成一些文件，现将这些文件全部移到inf...
博客
Ubuntu apache安装,配置,卸载
06-09 266
阿里云服务器等记得到控制台开启防火墙安装sudo apt-get updatesudo apt-get install apache2配置apache2 默认的几个配置文件/etc/apache2/apache2.conf是主要配置文件(这个文件的末尾可以看到，include了其它所有的配置文件)。/etc/apache2/ports.conf始终包含在主配置文件中。它用于确...
博客
avaScript树状结构遍历算法
06-25 189
💡 欢迎您在底部评论区留言，一起交流~
博客
【css灵感】模拟3D地球
01-23 783
在css中有3d变换的方法，一般用它做一些矩形的效果，如果是圆形则比较困难了。这里用一种障眼法的方式实现了3d的效果。点击这里查看无纯净广告版实现方法<div class="css-inspiration-earth-planet-body"> <div class="css-inspiration-earth-planet-earth"></div></div><style>:root { --stars: 5vw
博客
【hexo指南】hexo配置ER图流程图时序图插件
01-14 290
偏技术的文章有时会用到各种图形，一般来说可以做好图然后截图放到文章中就好了，虽然但图片本身也很小，但存一大堆图片占用空间总觉得不是很好。mermaidmermaid官方网站mermaid支持很多种图形的渲染，用它是个不错个选择。它可以渲染出多种复杂的图形。例如下面这个。#mermaid-svg-3gTFbeMhExW6J8RC .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family
博客
【css灵感】渐变圆角边框
12-21 342
点这里查看原始纯净版内容使用 clip-path 和 border-image 实现圆角渐变边框。border-image 用来指定作为元素周围边框的图像：clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部 SVG 的路径。因为使用了 clip-path 裁剪后的元素，只有元素的剪切区域才能被显示，所以我们可以通过 clip-path: inset() 裁剪出带圆角的矩形元素。<h
博客
【css灵感】渐变字
12-20 289
直接上效果看不到效果点这里方法一：借助mask-image属性从CSS代码可以看出，效果的实现除了“content内容生成技术”以外，主要是使用了mask-image属性，内容则是“webkit核心浏览器下的渐变”了。<h2 class="text-gradient" data-text="【css灵感】渐变字">【css灵感】渐变字</h2> <style>.text-gradient { display: inline-block;
博客
【vscode高级玩家】设置酷炫字体Fira Code
12-20 3041
点此查看纯净无广告的原始内容Fira Code字体是一种适用于编程的等宽字体。使用它可以减少我们在编程时处理逻辑标记的脑力消耗。问题Fira Code字体的作者认为开发者们在编程时使用的->,>=,:=,===这些字体其实是一个单一的逻辑标记，虽然它们只使用了两到三个字符，但时我们在阅读的时候一九要花费一部分脑力去阅读，将多个字符理解为一个逻辑字符。理想情况下所有的编程语言的操作符都可以设计为Unicode符号，不过目前并不是这样。解决方案Fira Code字体时一种免费的等宽字体，其
博客
【mapbox自定义样式】根据高度着色
12-19 948
mapbox根据地形高度渲颜色这里分为两种方式来实现，分别对应适用于设计师的mapbox studio配置方式，和适用于开发者的代码更改方式，惯例先看最终效果查看交互式的最终效果适用于设计人员的方式先新建一个地图，基础样式任意选择先设置高度，这样就有了线稿一般的轮廓然后我们新建一个图层，注意这一步选择如图所示的内容可以拿到地形高度信息，随后在type里设置为fill-extrusion然后设置颜色就和上色一样，规则由您任意定制适用于开发者的方式需要注意如果您使用了自己的DEM源，
博客
mapbox获取各种经纬度
12-19 1320
点击地图即可获取经纬度，也可以手动输入经纬度来换算在线查看运行效果实现方法mapbox中通过地图点击事件来获取到坐标，然后转换为其他的坐标系并输出在屏幕上即可获取坐标方法很简单，给地图添加一个监听事件即可。map.on('click', e=>{ const {lng, lat} = e.lngLat console.log(lng,lat)})坐标转换直接上代码,复制粘贴就能用/** * Created by Wandergis on 2015/7/8. * .
博客
【vscode高级玩家】❤️图文并茂讲你没了解过的vscode设置同步(全新方式)❤️
10-10 1370
请点此链接查看该文章的完整纯净版vscode 高级玩家系列的【vscode 高级玩家】VSCode 使用 Settings Sync 同步配置(最新版傻瓜教程)文章内容已经略微过时了，虽然还可以使用，但是vs code已经支持新的配置同步方式了，这里重新写一篇教程适用于新版vs code前置条件条件简介github 账户或微软账户如果您没有 github 账户，您可以参考这篇教程注册一个vscode号称宇宙第一编辑器下载链接 和 安装教程选择登录方式安装好 vs
博客
【vscode高级玩家】Visual Studio Code❤️安装教程(最新版教程小白也能看懂！)
10-10 485
目录如果您在浏览过程中发现文章内容有误，请点此链接查看该文章的完整纯净版下载LinuxMac OS安装运行安装程序同意使用协议选择附加任务准备安装开始安装安装完成如果您在浏览过程中发现文章内容有误，请点此链接查看该文章的完整纯净版使用和配置系列文章如果您在浏览过程中发现文章内容有误，请点此链接查看该文章的完整纯净版Visual Studio Code，简称 VSCode。它一款免费开源的现代化轻量级代码编辑器，使用方便快捷，功能强大，支持各种的文件格式，跨平台支持 Win、Mac 以及 Linux。接下
博客
jenkins设置任务超时⏱（多种方法:图文并茂）
10-06 4636
在使用jenkins进行自动编译、构建时有些任务可能由于网络或其他原因一直阻塞，导致该项目不能再次执行编译构建。我们希望在某些任务执行时间超过一定值时将其终止。方法一(普通)jenkins的”build timeout plugin”插件可以帮我们完成该任务。我使用的是jenkins-2.7.1, 默认就已经安装了该插件，如果默认没有安装可在插件管理中搜索进行安装。方法二(Pipeline)Jenkins Pipeline 提供了很多的步骤（step），这些步骤可以相互组合嵌套，方便地解决像重复执
博客
❤️github注册教程最新版(✨图文并茂最新版保姆级教程:建议收藏)
10-04 3239
准备拥有一个可以接受信息的邮箱即可开始点击github官网githubstep1.进入注册页面点击Sign Up进入注册流程step2.输入邮箱这个时候会浮现出一些文字，等到出现这个界面的时候就输入您的邮箱地址。????记住每次输入完内容后，点击一下Continue或者旁边的背景确保github给出提示如果您一切正常的话，您会看到Continue亮起，点击它！进入到下一步。但如果您出现这个提示，不要慌，这表示您其实拥有github账户，尝试找找密码，在第一步中点击Sign In登录
博客
hexo配合github action 自动构建（多种形式）
10-03 212
已经使用HEXO正常构建GitHub页面根据github action 给hexo配置自动部署github page前往墨抒颖的个人网站查看纯净版1. 为仓库设置访问密钥第一步先生成密钥，打开命令行并生成一组密钥ssh-keygen -f github-deploy-key -C "HEXO CD"记得跳过密码啥的，这里连按三次回车就好随后我们会获得两个密钥文件，这两个等下会用到2. 上传私钥github仓库地址 → Settings → Secrets → New secret
博客
anacond 或python3 报check_hostname requires server_hostname错误
09-29 255
前往墨抒颖的网站查看纯净版本anacond 或python3 报check_hostname requires server_hostname错误在anaconda启动过程中提示如下错误或者你可以在python3中看到类似的错误错误解析出现问题的主要原因是Urllib3 的 1.26.4 版本中存在一个错误。在 Python 3.4 和 2.7.9 中，SSLContext 上有一个 check_hostname 属性，它将让 SSLContext 实例处理检查 do_handshake 中
博客
带你深入了解nginx基本登录认证：使用python生成密码
09-08 287
centos 7.x上可以使用python语句简单地代替grub-crypt，下面的python语句都是交互式的。python -c 'import crypt,getpass;pw=getpass.getpass();print(crypt.crypt(pw) if (pw==getpass.getpass("Confirm: ")) else exit())'如果要非交互式，使用下面python语句：python -c 'import crypt,getpass;pw="123456";prin
博客
带你深入了解nginx基本登录认证：使用openssl生成密码
09-08 918
openssl passwd 手动生成密码引言:在Linux系统中我们要向手动生成一个密码可以采用opensll passwd来生成一个密码作为用户账号的密码。Linux系统中的密码存放在/etc/shadow文件中，并且是以加密的方式存放的，根据加密方式的不同，所产生的加密后的密码的位数也不同。选项说明：-crypt：UNIX标准加密算法，此为默认算法。如果加盐(-salt)算密码，只取盐的前2位，2位后面的所有字符都忽略。-1(数字)：基于MD5的算法代号。-apr1(数字)：apache中
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值