前端工具库

一 vscode篇

• 1 Todo Tree 让代码注释高亮显示 容易看见 在左边点击打勾的图标 可以树形图展示写过的注释 高亮显示的颜色可以通过自定义来设置

效果图

• 2 Any-rule 正则大全 你想要的正则都在这里 现里面已经收集82条正则表达式

安装Any-rule 鼠标右键直接显示搜索

• 3 Bracket Pair Colorizer （着色括号匹配插件） 这个插件主要针对代码多的时候有助于我们快熟的定位代码块 主要作用就是相邻的两个括号呈不同颜色 点击对应的括号有提醒

效果图

• 4 Code Translate （代码翻译软件） 对于我这类英语不好的人来说 在阅读代码时 经常因为不知道变量名的含义而被带到沟里去 还要经常的在翻译软件和vscode中切换 这款插件的出出现解决了这个问题

效果图

• 5 Polacode vscode中快速生成漂亮的代码截图 快捷键 Ctrl+Shift+P
  shadow 是否设置阴影 Transparent 设置最外层

效果图

• 6 CSS Navigation
  这是一款追踪css样式的插件， 让你更快的在代码中找到书写的样式 按住Ctrl 鼠标移上去 就能出现样式了

二 js/css篇

• 1 Day.js
  一个极简的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持一样, 但体积仅有2KB 地址 dayjs.fenxianglu.cn/ 安装 npm install dayjs
  基础用法
  import dayjs from 'dayjs'

dayjs().format('YYYY-MM-DD HH:mm') // => 2022-01-03 15:06
dayjs('2022-1-3 15:06').toDate() // => Mon Jan 03 2022 15:06:00 GMT+0800 (中国标准时间)

• 2 js-cookie 一个极简的js-cookie 库，安装 npm install js-cookie
  基础用法
  import Cookies from 'js-cookie'

Cookies.set('name', 'value', { expires: 7 }) // 有效期7天
Cookies.get('name') // => 'value'

• 3 CSS Guidebook

  这是一个css的网站 关于css的讲解特别仔细 涉及基础 布局 工程化 应用 tsejx.github.io/css-guidebo…

三 综合篇

CODEIF

 CODEIF 这是一个起变量名的工具  https://unbug.github.io/codelf  对于英文不好人来说真是一个福音

这些命名都是符合驼峰命名法，有了这个插件以后，以后编代码时，就不会在为如何给变量命名而苦恼了。 unbug.github.io/codelf

DocsChina（印记中文）

这是一个前端中文文档合集网站 这里包含了前端中经常使用的前端中文文档   

链接 docschina.org/

tool.lu -在线工具

程序员总是有很多的小工具要使用 比如图片, Base64编码 Markdown编辑器 在线运行各种语言代码 这个网站包含了太多程序员需要用的小工具 tool.lu/

zcool -站酷

这是一个设计类网站 www.zcool.com.cn/

unDraw

这是一个插画类网站 undraw.co/illustratio…

OUCH

这个与上面的一样 igoutu.cn/illustratio…

美工网站

www.meigong8.com/