推荐 12 个学习前端必备的神仙级工具类项目与网站

今天给大家推荐的是平时学习前端时,经常用到的一些辅助工具类网站。

网址 描述
unbug.github.io/codelf 变量命名智能推荐(支持中文)
www.docschina.org Web 前端开发人员提供优质中文文档
regexr.com 正则表达式验证匹配
any-rule 正则表达式库,非常全,使用起来很方便
www.toptal.com/developers 多张图片合成雪碧图,并生成对应 css
tool.lu 众多工具集合,包括时间戳转换,进制转换等
www.bootcdn.cncdn.baomitu.com 国内的CDN库,速度快
www.jsdelivr.com 国外的 cdn 库,支持 github,npm,WordPress
www.gitignore.io 根据选择会去生成 .gitignore 文件
codesandbox.io 在线编辑代码
www.typora.io 实用的 Markdown 写作工具,所见即所得
mdnice.com 使 markdown 语法更加美观,如果你有写博客,那这个非常合适你(强烈推荐)

1. codelf

有一种痛,不是程序员可能不懂,但如果是程序员一定懂,那就是给变量或函数命名。

随着项目越来越复杂,变量和函数数量越来越多,英语水平貌似也 hold 不住了。

虽然每个编程语言都有各种命名规范,但是也不能解决所有的问题。

每个程序员或多或少都在写代码的时候为变量和函数命名苦恼过!

image.png

也可以在自己用的编辑器里安装插件,支持 VS Code、Atom、Sublime Text 和 Chrome。

image.png
image.png

unbug.github.io/codelf/

2. docschina

印象中文,为 Web 前端开发人员提供优质中文文档。

image.png

www.docschina.org

3. regexr

RegExr 是一个基于 HTML/JS 开发的在线工具,用来创建、测试和学习正则表达式。

特性

  • 输入时,结果会实时更新
  • 支持 JavaScript 和 PHP/PCRE RegEx
  • 将匹配项或表达式移至详细信息
  • 保存并与他人共享表达式
  • 在编辑器中使用 cmd-Z/Y 撤消和重做
image.png

regexr.com/

4. any-rule

image.png

any-rule 正则表达式

any-rule 维护了一个常用正则表达式合集,并且本身是一个支持 Web/VS Code/idea/Alfred Workflow 多平台的正则表达式工具。

image.png
image.png

github.com/any86/any-r…

5. CSS Sprites Generato

在很多前端展示页面需要用到将小图标拼合为一整个图片,然后在使用的时候,自动裁剪为单一图片展示。

这个时候就需要一个便捷的工具,CSS Sprites Generator 就是这样一个便捷的CSS图像拼合工具。

比如多张图片生成雪碧图,还有国内的 CDN 库,赶紧去试一试吧。

image.png

www.toptal.com/developers/…

6. tool.lu

image.png

众多工具集合,包括时间戳转换,进制转换等

tool.lu/

7. bootcdn / baomitu

image.png

国内的CDN库,速度快

image.png

www.bootcdn.cn/cdn.baomitu.com/

8. jsdelivr

image.png

国外的 cdn 库,支持 github,npm,WordPress。

www.jsdelivr.com

9. gitignore

image.png

根据选择会去生成 .gitignore 文件。

根据用户输入的语言类型或者平台类型,自动生成对应的 gitignore 文件。

例如,输入 Vue,React,点击 "Create" 即可。

www.gitignore.io/

10. codesandbox

CodeSandbox 是一个在线的代码编辑器,主要聚焦于创建 Web 应用项目。

支持主流的前端相关文件的编辑:JavaScript、TypeScript、CSS、Less、Sass、Scss、HTML、PNG 等。

支持自动代码提示。

比如选择创建相关的项目

image.png

可以直接编辑代码运行


image.png

codesandbox.io/

11. typora

image.png

实用的 Markdown 写作工具,所见即所得。

www.typora.io

12. mdnice

image.png

MDNice 微信 Markdown 编辑器是一款 Markdown 微信编辑器,拥有良好的兼容性、海量主题样式、免费的图床、强大的技术团队,提供文章一键排版,同时支持知乎、掘金、微信。

使 markdown 语法更加美观,如果你有写博客,那这个非常合适你,强烈推荐。

资源传送门

  • 关注【做一个柔情的程序猿】公众号
  • 在【做一个柔情的程序猿】公众号后台回复 【python资料】【2020秋招】 即可获取相应的惊喜哦!
  • 自己搭建的博客地址:梦魇回生的博客

「❤️ 感谢大家」

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

推荐阅读更多精彩内容