推荐 10 个很“哇塞”的Web“资源”给前端工友,收藏等于学会~

毋庸置疑:善用在线资源和工具可以加速开发,提高质量、让生活更 Chill 😎~ 本篇为前端工友们带来 10 个棒棒哒免费的 Web 资源,收藏⭐等于学会 (๑•̀ㅂ•́)و✧ 1. Undraw 如果你的网站需要免费的 SVG 插图,一定不要错过 Undraw 这个网站! SVG 插图资源是海量的,本瓜下拉了十几、二十次都拉不完(当然,搜索功能也是有的);并且,你还可以自定义插图的配色,简直不要太 NICE~ 海量资源,支持搜索🔍 随意更改配色🌈   2. Error 404 不知道你一般会去哪找 404 页面素材~ 现在你又多了一个选项:Error 404 酷酷酷~ 把本瓜一个切图仔的审美都拉上来了👆 3. Squoosh 压缩图片!! 对比 tinypng 有【更好的】压缩效果: tinypng 压缩 Squoosh 压缩   压缩效果:前者是 80%,后者是 95%;最终效果也不错~👍 Why not try ?   4. DevDocs DevDocs 见名思意,是 Web 开发技术文档,是非常不错的学习手册! 别的不说,就这 UI 本瓜就挺喜欢!还支持添加常用技术文档、更换主题等~   5. iHateRegex 如果你讨厌正则,那么一定不要错过这个网站?(ˉ▽ˉ;)… 不仅如此,还有细节图示!可恶,做的真好啊 ╮(╯▽╰)╭   6. Carbon 经常有人问,“这种好看的代码片段如何生成”,答案就在 Carbon! 你可以生成各种主题、各种语言的代码片段,并导出为图片或复制到其它平台,真滴好用👌 舒服了~~   7. Dribbble 寻找网页设计灵感,认准 Dribbble!!!     看到人家的管理后台设计,就想马上回去把自家的管理后台“撕”了🐶 8. Animista Css 动画,复制代码就能用!免安装,它不香嘛?   9. Shape Divider 你可以生成各式各样的分割线,并导出 SVG 格式; 花里胡哨的,我喜欢(❤ ω ❤)   10. Notion 如果你需要一个记笔记的平台,推荐一个选项:Notion 快速笔记、TaskList、日记、读书清单,各种类型,应有尽有,推荐~   作者:掘金安东尼 链接:https://juejin.cn/post/7003114103094902792 来源:掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

Web 开发者应该避免的 5 个 CSS 的做法

原文地址:5 CSS Practices To Avoid as a Web Developer 原文作者:Alexey Shepelev 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:霜羽 Hoarfroster 校对者:KimYang、Chorer 有人认为 CSS 很难学习,觉得 CSS 有很多的坑,甚至还有一点儿魔幻,难以理解,很容易会搬起石头砸自己的脚。对此我感到难过,毕竟,我可不这么认为。 在考虑了可以做什么之后,我提出了五个我挺讨厌的 CSS 的做法,希望帮助大家避免这些习惯。 1. 设置内外边距,然后将其重置 我经常看到人们为所有元素设置内外边距,然后为第一个元素或者最后一个元素清除刚刚写的边距。我不知道为什么你非要在一条规则就可以解决问题的情况下写两条规则。一次为所有必需的元素设置边距明显容易得多! 为简化 CSS,你可以选用以下几种选择器:nth-child 或 nth-of-type 选择器,还有 :not() 伪类或相邻元素组合器(即 +)。 不要这么写:

你可以这么写:

  或这样写:

或者用:

  2. 为 position 为 fixed 或 absolute 的元素添加 display:block 你知道吗?其实你无需为 position 为 fixed 或 absolute 的元素添加 display:block,因为这是默认发生的。 另外,如果你在这些元素上使用 inline-* 值,它们将按以下方式更改: inline、inline-block -> block inline-flex -> flex inline-grid -> grid inline-table -> table 因此,对于 position 为 fixed 或 absolute 的元素,你只需在要使用 flex 布局或者 grid 布局的时候设置 display。 不要这样写:

或者不要这样写:

  直接这样:

  或者这样写:

  3. 使用 transform: translate(-50%, -50%) 实现居中 曾几何时,有一个非常普遍的问题让开发者们烦恼不已。这种情况一直持续到 2015 年,而在此之前,该问题的所有解决方案或多或少都有毛病。这个问题就是 —— 将未指定高度的元素在水平和竖直方向居中。 特别地,一种解决方案是结合使用绝对定位和 transform 属性。此技术在基于 Chromium 的浏览器中会导致文本的模糊问题。 但是在引入 flexbox 之后,我认为这个解决方法已不再适用,毕竟这个方法存在文本模糊的问题,而且我们还得使用五个属性才能实现居中。现在我想向大家分享一个技巧,缩减代码为两个属性。 我们可以在 flex 容器内使用 margin: auto(只有这两个属性,仅此而已!)。浏览器会自动将元素居中。 不要这样写:

  直接这样写:

  4. 为块状元素使用 width: 100% 我们经常使用 flexbox 创建一个多列网格,然后转换为单列网格。 为了将多列网格转换为单列网格,开发人员使用了 width:100%。我不明白他们为什么这么做 —— 网格元素是块元素,默认情况下的宽度就是 100%,而无需使用其他属性。 因此,我们不需要使用 width:100%,而是应该编写媒体查询,以便 flexbox 仅用于创建多列网格。 不要这样写:

 

  直接这样写:

 

  5. 为 flex 项目设置 display: block 使用 flexbox 时,请务必记住,当创建一个 flex 容器(display: flex)时,所有子项(flex 项目)都会被转化为 block。 这意味着所有子项的 display 都会被默认设置为 block。 inline、inline-block -> block inline-flex -> flex inline-grid -> grid inline-table -> table 因此,无需在 flex 项目中添加 display:block,浏览器将为你完成此操作。 不要这样做:

  你可以直接这样:

  小结 希望在阅读本文后,你能够学会如何避免这些简单的错误并接受我的建议。感谢阅读! 如果发现译文存在错误或其他需要改进的地方,欢迎到 掘金翻译计划 对译文进行修改并 PR,也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。 掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域,想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。   作者:Hoarfroster 链接:https://juejin.cn/post/6963252241662738440 来源:掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

CSS 单位 2

CSS 有几个不同的单位用于表示长度。 一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width, 等。 长度有一个数字和单位组成如 10px, 2em, 等。 数字与单位之间不能出现空格。如果长度值为 0,则可以省略单位。 对于一些 CSS 属性,长度可以是负数。 有两种类型的长度单位:相对和绝对。 浏览器支持 下表中的数字表示支持该长度单位的最低浏览器版本。 长度单位 Chrome IE Firefox Safari Opera em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5 ch 27.0 9.0 1.0 7.0 20.0 rem 4.0 9.0 3.6 4.1 11.6 vh, vw 20.0 9.0 19.0 6.0 20.0 vmin 20.0 9.0* 19.0 6.0 20.0 vmax 26.0 不支持 19.0 不支持 20.0 注意: Internet Explorer 9 通过不标准的名称 vm 来支持 vmin 。 相对长度 相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。   单位 描述 在线实例 em 它是描述相对于应用在当前元素的字体尺寸,所以它也是相对长度单位。一般浏览器字体大小默认为16px,则2em == 32px; 尝试一下 ex 依赖于英文字母小 x 的高度 尝试一下 ch 数字 0 的宽度 rem rem 是根 em(root em)的缩写,rem作用于非根元素时,相对于根元素字体大小;rem作用于根元素字体大小时,相对于其出初始字体大小。 尝试一下 vw viewpoint width,视窗宽度,1vw=视窗宽度的1% 尝试一下 vh viewpoint height,视窗高度,1vh=视窗高度的1% 尝试一下 vmin vw和vh中较小的那个。 尝试一下 vmax vw和vh中较大的那个。 尝试一下 %   提示: rem与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。 绝对长度 绝对长度单位是一个固定的值,它反应一个真实的物理尺寸。绝对长度单位视输出介质而定,不依赖于环境(显示器、分辨率、操作系统等)。 单位 描述 在线实例 cm 厘米 尝试一下 mm 毫米 尝试一下 in 英寸 (1in = 96px = 2.54cm) 尝试一下 px * 像素 (1px = 1/96th of 1in) 尝试一下 pt point,大约1/72英寸; (1pt = 1/72in) 尝试一下 pc pica,大约 12pt,1/6英寸; (1pc = 12 pt) 尝试一下 像素或许被认为是最好的"设备像素",而这种像素长度和你在显示器上看到的文字屏幕像素无关。px实际上是一个按角度度量的单位。   from:https://www.runoob.com/cssref/css-units.html

CSS cubic-bezier() 函数

实例 从开始到结束的不同速度过渡效果:

定义与用法 cubic-bezier() 函数定义了一个贝塞尔曲线(Cubic Bezier)。 贝塞尔曲线曲线由四个点 P0,P1,P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是(0,0)并且表示初始时间和初始状态,P3是(1,1)并且表示最终时间和最终状态。 从上图我们需要知道的是 cubic-bezier 的取值范围:

我们需要关注的是 P1 和 P2 两点的取值,而其中 X 轴的取值范围是 0 到 1,当取值超出范围时 cubic-bezier 将失效;Y 轴的取值没有规定,当然也毋须过大。 最直接的理解是,将以一条直线放在范围只有 1 的坐标轴中,并从中间拿出两个点来拉扯(X 轴的取值区间是 [0, 1],Y 轴任意),最后形成的曲线就是动画的速度曲线。 cubic-bezier() 可用于 animation-timing-function 和 transition-timing-function 属性。 支持版本:CSS3 浏览器支持 表格中的数字表示支持该函数的第一个浏览器版本号。 函数 cubic-bezier() 4.0 10.0 4.0 3.1 10.5 CSS 语法

值 描述 x1,y1,x2,y2 必需。数字值,x1 和 x2 需要是 0 到 1 的数字。   实例

  from:https://www.runoob.com/cssref/func-cubic-bezier.html

CSS calc() 函数

实例 使用 calc() 函数计算 <div> 元素的宽度:

定义与用法 calc() 函数用于动态计算长度值。 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% – 10px); 任何长度值都可以使用calc()函数进行计算; calc()函数支持 "+", "-", "*", "/" 运算; calc()函数使用标准的数学运算优先级规则; 支持版本:CSS3 浏览器支持 表格中的数字表示支持该函数的第一个浏览器版本号。 "webkit" 或 "moz" 或 "o" 指定的数字为支持该函数的第一个版本号前缀。 函数 calc() 26.0 19.0 -webkit- 9.0 16.0 4.0 -moz- 7.0 6.0 -webkit- 15.0 CSS 语法

值 描述 expression 必须,一个数学表达式,结果将采用运算后的返回值。   from:https://www.runoob.com/cssref/func-calc.html

Electron

使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序。 Electron提供了丰富的本地(操作系统)的API,使你能够使用纯JavaScript来创建桌面应用程序。与其它各种的Node.js运行时不同的是Electron专注于桌面应用程序而不是Web服务器。   比你想象的更简单 如果你可以建一个网站,你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架,它负责比较难搞的部分,你只需把精力放在你的应用的核心上即可。 Web 技术 Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。 开源 Electron 是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目。 跨平台 Electron 兼容 Mac、Windows 和 Linux,可以构建出三个平台的应用程序。

Blockquote

Blockquote 对象 Blockquote 对象代表着一个 HTML 引用(blockquote)块元素。 <blockquote> 标签定义摘自另一个源的块引用。 一个 <blockquote> 元素的内容通常展现为一个左、右两边进行缩进的段落。 在 HTML 文档中的每一个 <blockquote> 标签创建时,都会创建一个 Blockquote 对象。   from:

CSS 奇思妙想边框动画

今天逛博客网站 — shoptalkshow,看到这样一个界面,非常有意思: 觉得它的风格很独特,尤其是其中一些边框。 嘿嘿,所以来一篇边框特辑,看看运用 CSS,可以在边框上整些什么花样。 border 属性 谈到边框,首先会想到 border,我们最常用的莫过于 solid,dashed,上图中便出现了 dashed。 除了最常见的 solid,dashed,CSS border 还支持 none,hidden, dotted, double, groove, ridge, inset, outset 等样式。除去 none,hidden,看看所有原生支持的 border 的样式: 基础的就这些,如果希望实现一个其他样式的边框,或者给边框加上动画,那就需要配合一些其他属性,或是脑洞大开。OK,一起来看看一些额外的有意思的边框。 边框长度变化 先来个比较简单的,实现一个类似这样的边框效果: 这里其实是借用了元素的两个伪元素。两个伪元素分别只设置上、左边框,下、右边框,通过 hover 时改变两个伪元素的高宽即可。非常好理解。

CodePen Demo — width border animation 接下来,会开始加深一些难度。 虚线边框动画 使用 dashed 关键字,可以方便的创建虚线边框。

当然,我们的目的是让边框能够动起来。使用 dashed 关键字是没有办法的。但是实现虚线的方式在 CSS 中有很多种,譬如渐变就是一种很好的方式:

看看,使用渐变模拟的虚线如下: 好,渐变支持多重渐变,我们把容器的 4 个边都用渐变表示即可:

效果如下: OK,至此,我们的虚线边框动画其实算是完成了一大半了。虽然 border-style: dashed 不支持动画,但是渐变支持呀。我们给上述 div 再加上一个 hover 效果,hover 的时候新增一个 animation 动画,改变元素的 background-position 即可。

OK,看看效果,hover 上去的时候,边框就能动起来,因为整个动画是首尾相连的,无限循环的动画看起来就像是虚线边框在一直运动,这算是一个小小的障眼法或者小技巧: 这里还有另外一个小技巧,如果我们希望虚线边框动画是从其他边框,过渡到虚线边框,再行进动画。完全由渐变来模拟也是可以的,如果想节省一些代码,使用 border 会更快一些,譬如这样:

由于 border 和 background 在盒子模型上位置的差异,视觉上会有一个很明显的错位的感觉: 要想解决这个问题,我们可以把 border 替换成 outline,因为 outline 可以设置 outline-offset。便能完美解决这个问题:

最后看看运用到实际按钮上的效果: 上述 Demo 完整代码如下: CodePen Demo — dashed border animation 其实由于背景和边框的特殊关系,使用 border 的时候,通过修改 background-position 也是可以解决的,就是比较绕。关于背景和边框的填充关系,可以看这篇文章:条纹边框的多种实现方式 渐变的其他妙用 利用渐变,不仅仅只是能完成上述的效果。 我们继续深挖渐变,利用渐变实现这样一个背景:

注意,这里运用了元素的伪元素生成的这个图形,并且,宽高都是父元素的 200%,超出则 overflow: hidden。 接下来,给它加上旋转:

看看效果: 最后,再利用一个伪元素,将中间遮罩起来,一个 Nice 的边框动画就出来了 (动画会出现半透明元素,方便示意看懂原理): 上述 Demo 完整代码如下,这个效果我最早见于这位作者 — Jesse B CodePen Demo — gradient border animation 改变渐变的颜色 掌握了上述的基本技巧之后,我们可以再对渐变的颜色做一些调整,我们将 4 种颜色变成 1 种颜色:

得到这样一个图形: 同样的,让它旋转一起,一个单色追逐的边框动画就出来了: CodePen Demo — gradient border animation 2 Wow,很不错的样子。不过如果是单线条,有个很明显的缺陷,就是边框的末尾是一个小三角而不是垂直的,可能有些场景不适用或者 PM 接受不了。 那有没有什么办法能够消除掉这些小三角呢?有的,在下文中我们再介绍一种方法,利用 clip-path ,消除掉这些小三角。 conic-gradient 的妙用 再介绍 clip-path 之前,先讲讲角向渐变。 上述主要用到了的是线性渐变 linear-gradient 。我们使用角向渐变 conic-gradient 其实完全也可以实现一模一样的效果。 我们试着使用 conic-gradient 也实现一次,这次换一种暗黑风格。核心代码如下:

效果图和示意图如下,旋转一个部分角向渐变的图形,中间的部分使用另外一个伪元素进行遮罩,只漏出线条部分即可: CodePen Demo — Rotating border 3 clip-path 的妙用 又是老朋友 clip-path,有意思的事情它总不会缺席。 clip-path 本身是可以进行坐标点的动画的,从一个裁剪形状变换到另外一个裁剪形状。 利用这个特点,我们可以巧妙的实现这样一种 border 跟随效果。伪代码如下:

效果图与示意图一起: CodePen – clip-path border animation 这里,因为会裁剪元素,借用伪元素作为背景进行裁剪并动画即可,使用 clip-path 的优点了,切割出来的边框不会产生小三角。同时,这种方法,也是支持圆角 border-radius 的。 如果我们把另外一个伪元素也用上,实际实现一个按钮样式,可以得到这样的效果: CodePen – clip-path border animation 2 overflow 的妙用 下面这个技巧利用 overflow 实现。实现这样一个边框动画: 为何说是利用 overflow 实现? 贴个示意图: CodePen Demo — 巧用overflow及transform实现线条hover效果 两个核心点: 我们利用 overflow: hidden,把原本在容器外的一整个元素隐藏了起来 利用了 transform-origin,控制了元素的旋转中心 发现没,其实几乎大部分的有意思的 CSS 效果,都是运用了类似技巧: 简单的说就是,我们看到的动画只是原本现象的一小部分,通过特定的裁剪、透明度的变化、遮罩等,让我们最后只看到了原本现象的一部分。 border-image 的妙用 利用 border-image,我们也可以实现一些有意思的边框动画。关于 border-image,有一篇非常好的讲解文章 — border-image 的正确用法,本文不对基本定义做过多的讲解。 如果我们有这样一张图: 便可以利用 border-image-slice 及 border-image-repeat 的特性,得到类似的边框图案:

在这个基础上,可以随便改变元素的高宽,如此便能扩展到任意大小的容器边框中: CodePen Demo — border-image Demo 接着,在这篇文章 — How to Animate a SVG with border-image 中,还讲解了一种利用 border-image 的边框动画,非常的酷炫。 与上面例子不一样的是,我们只需要让我们的图案,动起来,就是我们需要这样一个背景图(掘金不支持 SVG 动图,原图地址): 那么,我们也就能得到运动的边框图,代码完全一样,但是,边框是运动的: CodePen Demo — Dancing Skull Border border-image 使用渐变 border-image 除了贴图引用 url 之外,也是可以直接填充颜色或者是渐变的。 之前也有一篇关于 border-image 的文章 — 巧妙实现带圆角的渐变边框 我们可以利用 border-image + filter + clip-path 实现渐变变换的圆角边框:

CodePen Demo — clip-path、border-image 加 filter 实现圆角渐变边框 最后 本文介绍了一些我认为比较有意思的边框动画小技巧,当然 CSS 产生还有非常多有意思的效果,限于篇幅,不一一展开。 本文到此结束,希望对你有帮助 :),想 Get 到最有意思的 CSS 资讯,千万不要错过我的 iCSS 公众号 😄 更多精彩 CSS 技术文章汇总在我的 Github — iCSS ,持续更新,欢迎点个 star 订阅收藏。 如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。 作者:chokcoco 链接:https://juejin.cn/post/6918921604160290830 来源:掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

移动端:div在手机页面上随意拖动/拖拽

为了兼容PC和移动端,想出了以下办法: 拖动时候用到的三个事件: mousedown 、 mousemove 、 mouseup 在移动端都不起任何作用。毕竟移动端是没有鼠标的,查资料后发现,在移动端与之相对应的分别是: touchstart 、 touchmove 、 touchend 事件。还有一点要注意的是在PC端获取当前鼠标的坐标是: event.clientX 和 event.clientY ,在移动端获取坐标位置则是: event.touches[0].clientX 和 event.touches[0].clientY 。下面就来说说怎么实现这个效果吧,先看一下效果: PC端 : 移动端 : 先来分析一个拖动的流程,以PC端为例,首先是鼠标按下( mousedown 事件),然后移动( mousemove 事件),最后释放鼠标( mouseup 事件),首先要设置一个变量记录鼠标是否按下,在鼠标按下的时候,我们做一个标记,然后需要记录一下鼠标当前的坐标,还有这个div当前的偏移量,当鼠标开始移动的时候,记录下鼠标当前的坐标,用鼠标当前的坐标减去鼠标按下时的坐标再加上鼠标按下时div的偏移量就是现在div距离父辈元素的距离,当鼠标释放的时候将标记改为鼠标已经释放。下面来看一下代码:

然后在将事件加入到这个div中即可,下面再来看一个在移动端需要做些什么,首先是事件不同,只需要在添加移动端的 touchatart 、 touchmove 、 touchend 就可以了,还有一个不同的时移动端获取坐标是 event.touches[0].clientX 和 event.touches[0].clientY ,这也很简单,只要加上判断就可以了,如果是PC端就使用event,如果是移动端就使用 event.touches :

还有一点要注意,在移动端拖动div的时候移动端的页面会自动产生滑动效果,所以还需要在 touchmove 的是给页面添加一个阻止默认事件的函数。 下面是整个代码,可以在Chrome下模拟移动端测试,点击这里查看:

  from:https://www.cnblogs.com/joyco773/p/6519668.html

webview调用ios或者安卓的方法(内嵌h5页面调用app原生方法)

1.配合使用调用app原生的方法(h5页面不需要回调和数据) 实例1

  实例2

  2.配合使用调用app原生的方法(h5页面需要回调和数据) // 从App获取UUID(手机唯一标识)

标红字段为调用的app端定义的方法名,需要app端定义方法配合   from:https://www.cnblogs.com/wendyAndJken/p/9318501.html

精选!18个 VS Code 高效插件,献给需要的前端程序猿/媛

先写前面 俗话说 欲先善其事必先利器,作为一个21新世纪的打工人,怎么可以没有一个趁手的编辑器工具呢。今天的主角就是 VS Code ,一个炒鸡强大的编辑器,我们先来介绍一下这个编辑器。 VS Code 全称 Visual Studio Code 是由微软开发的一款免费、跨平台的轻量级代码编辑器。以功能强大、提示友好、不错的性能和颜值俘获了大量开发者的青睐,对 JavaScript 和 NodeJS 的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全等。 再强大的IDE那也不可能面面俱到什么功能都塞进去,那样只会导致IDE本身太臃肿。功能嘛,按需索取,所以,vscode的很多强大功能都是基于插件实现的,IDE只提供一个最基本的框子和最基本功能,由插件来丰富和扩展它的功能。 美化插件 一个美美的编辑器,在我们的开发过程中是非常友好的,所以我们先来介绍一下用于美化的插件 1. Material Theme 插件 Material Theme 插件是一款用于美化主题的图标的插件,该插件包含两个子插件,分别是 Community Material Theme 该插件用于美化主题,还有一个 Material Theme Icons 用于美化图标的。 image-20201116212608537 2. VSCode Great Icons 插件 VSCode Great Icons 插件是 VS Code 图标插件,可以控制 VS Code 中的文件管理的树目录显示图标。不过如果安装上面那个插件这个插件也就不需要了。 image-20201116213037910 代码高亮插件 1. Color Highlight 插件 Color Highlight 插件是 VS Code 中的颜色高亮插件,可以在编辑器中看出其背景颜色。 image-20201116213858966 2. vscode-pigments 插件 该插件也是一款颜色高亮插件,同上一个插件类似,是我现在使用的一个颜色高亮的插件 image-20201116214057772 3. Bracket Pair Colorizer 插件 为不同的括号拥有不同的颜色,可以使嵌套结构表现特别明显,这个插件是我非常喜欢的一个插件,给我安排它。 image-20201116225424675 高效插件 1. Search node_modules 插件 Search node_modules 插件是一款高效的查找插件,当我们的文件太多时,需要找到某个定义的方法时,可以通过该插件在当前文件夹进行搜索内用 image-20201116214435807 2. Path Intellisense 插件 Path Intellisense 插件是一个路径智能感知插件,该插件在我非常喜欢的一个插件,对路径识别特别友好。 image-20201116215246078 3. Live Server 插件 该插件不仅可以帮你搭建一个小的服务器,而且还可以实现实时预览 HTML ,再也不用这边 Ctrl+s 保存,回到浏览器 Ctrl + R 刷新了。 image-20201116220159540 4. IntelliSense for CSS class names in HTML 插件 该插件会根据工作区中找到的定义或通过元素引用的外部文件为 HTML 属性提供 CSS 类名。 image-20201116220803440 5. Comment Translate 插件 该插件用于翻译功能,官方描述是:许多优秀的项目,都有丰富的注释,使用者可以快速理解代码意图。但是如果使用者并不熟习注释的语言,会带来理解困难。本插件使用 Google Translate API 翻译 VSCode 的编程语言的注释。 image-20201116221408439 6. CSS Peek 插件 该插件可以帮助我们在 HMTL 页面中直接查看 其 CSS 样式,(Ctrl + hover),也可以实现跳转(F12)到该 CSS 写的地方 image-20201116221807883 7. Beautify 插件 该插件用于代码格式化,是我非常喜欢用的一个插件,非常的简单高效 image-20201116221931046 8. Auto Close Tag 插件 这个插件可以帮助我们自动闭合 HTML/XML 标签,非常高效,必须推荐 image-20201116230043776 9. Auto Rename Tag 插件 这个插件的基本功能就是当我们修改 HMTL 标签名的时候,需要修改开始标签和闭合标签两个内容,如果多了会是一个非常烦的操作,不过这个使用这个插件,当我们修改开始标签的时候闭合标签也跟着一起修改。最后这两个插件在前端学习中我是极力的推荐的,真的给出的高效。 image-20201116230522353 注释插件 一个完美的码农的注释绝对是非常非常美观的,以下的插件可以帮助我们写出完美的注释 1. koroFileHeader 插件 koroFileHeader 插件是在 VS Code 中用于生成文件头部注释和函数注释的插件,该插件功能强大使用简单 image-20201116213515996 2. Better Comments 插件 通过该插件可以使注释拥有一些样式,包含:代办、强调、警告等样式 image-20201116225114489 Markdown 插件 Markdown 是我特别喜欢的一个工具,其样式美观,基本脱离鼠标的编辑方式真的是太赞了,VS Code 对 Markdown 也是非常友好的,拥有很多的插件,介绍几个我比较常用的。 1. Markdown Preview Enhanced 插件 Markdown Preview Enhanced 插件是超级强大的 Markdown 插件。 这款插件意在让你拥有飘逸的 Markdown 写作体验。 image-20201116215726559 2. Markdown All in One 插件 该插件提供了常用操作便利的快捷键、目录、实时预览等强大的功能 image-20201116220439225 写在最后 这些插件是我用 VScode 之后一直在使用的,今天整理分享出来,欢迎大家进行补充。 知识是共享的,技术是开源的。 作者:is_sweet 链接:https://juejin.im/post/6895742013560815629 来源:掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。