当前栏目
猿创征文|超实用的前端开发工具分享
🍳作者: 贤蛋大眼萌,一名很普通但不想普通的程序媛 color{#FF0000}{贤蛋 大眼萌 ,一名很普通但不想普通的程序媛} 贤蛋大眼萌,一名很普通但不想普通的程序媛🤳
🙊语录: 多一些不为什么的坚持 color{#0000FF}{多一些不为什么的坚持} 多一些不为什么的坚持
超实用的前端开发工具分享
前言
每个程序都有自己独有的工具库,有着不同的开发习惯,借着这个机会,结合过去的日子用过的开发工具和学习方法,分享给大家一些前端开发的实用工具,希望对正在看此文章的你有一定的帮助。
🍭 代码编辑器–Vscode
VScode是一款拥有强大插件的编辑器,讲究编码编辑轻量级。自诞生以来,以其各自优异的特性迅速走红,安装不同的插件就可以开发不同的项目,本质上有点类似我们的记事本,需要插件和环境辅助进行。重点就是,免费!免费!免费!
① 拥有强大的键盘快捷键
-
ctrl + p
快速搜索文件并跳转,添加:
可以跳转到指定行 -
ctrl + shift + p
根据您当前的上下文访问所有可用命令。 -
ctrl + shift + c
在外部打开终端并定位到当前项目路径 -
ctrl + 按键1左边的符号
显示隐藏终端面板 -
Ctrl+B
切换侧边栏 -
Ctrl+
快速拆分文件编辑 -
alt + 单机左键
添加多处光标 -
alt + shift + 单击左键
同一列所有位置添加光标 -
alt + shift + 鼠标选择
选择相同开始和结束的区域
![image-20221106214839542](https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/4624/image-20221106214839542.png)
② 强大的插件系统
下次有机会出一篇专门关于Vscode插件的文章
![image-20221106215510267](https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/4624/image-20221106215510267.png)
![image-20221106213905309](https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/4624/image-20221106213905309.png)
🎯 截图工具–Snipaste
① 悬浮截屏,实现多屏办公
② 截图记忆功能
想找之前的截图画面怎么办呢
按F1,再按【,】和【.】,也就是逗号和句点。snipaste会展现你的截图记录
③ 强大的快捷键操作
![image-20221107090040376](https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/4624/image-20221107090040376.png)
④ 取色器
对于前端开发人员,取色器是一个必不可少的工具,Snipaste就有自带取色器,截图成功后按下键盘键C,就能取到当前鼠标所在位置的颜色代码
⑤ 丰富的标注工具
🥩 markdown工具–Tyora
Typora 是一款由 Abner Lee 开发的轻量级 Markdown 编辑器,与其他 Markdown 编辑器不同的是,Typora 没有采用源代码和预览双栏显示的方式,而是采用所见即所得的编辑方式,实现了即时预览的功能,但也可切换至源代码编辑模式。
![image-20221107093322732](https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/4624/image-20221107093322732.png)
-
MarkDown的语法简单,记住几个常用的就可以释放鼠标了
- 比如,我想要将 “这是个标题” 设置成二级标题,只需要在标题前添加
##
+空格即可实现,而不需要用鼠标先选中 “这是个标题”,然后在设置成二级标题。学会Markdown语法,能够快速时间博客文章编辑,排版也好看。
- 比如,我想要将 “这是个标题” 设置成二级标题,只需要在标题前添加
-
当前许多网站都支持用 Markdown 来撰写文档
- 如CSDN、简书、语雀 等,有了这么多网站的支持,你可以随时随地上传本地 MarkDown 文件到博客中
-
支持emoji表情
- 在 Typora 中,你可以用
:emoji:
的形式来打出 emoji,软件会自动给出图形的提示。
- 在 Typora 中,你可以用
-
上传图片
- 使用腾讯云+picGo上传图片
![image-20221107091631729](https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/4624/image-20221107091631729.png)
🍬 思维导图–Xmind
XMind 是一款非常实用的业务思维导图软件,使用世界上最先进的 Eclipse RCP 软件体系结构,创建易于使用和高效的视觉思维软件,强调软件的可伸缩性、跨平台、稳定性和性能,致力于使用高级软件技术来帮助用户真正提高生产力。
![image-20221107092306617](https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/4624/image-20221107092306617.png)
🥤在线工具网站
1. JSON 格式化
https://smalldev.tools/
JSON 在线格式化的网站有很多,基本上都能满足我们的需要。
![image-20221107092923334](https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/4624/image-20221107092923334.png)
2. 表情符号
https://www.emojiall.com/zh-hans
这个网站有很多颜文字,并且可以直接 cv,国内外很多博客用的都是这上面的表情符号。也支持自己搜索
![image-20221107093221750](https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/4624/image-20221107093221750.png)
3. 封面模板-canva
https://www.canva.cn/
我们在写文章或者有时候要自己制作一些封面图片,canva上面有很多免费的素材和模板,用起来很方便。
PS:在CSDN的文章封面都是我自己在canva上制作
相关文章
- Apache Spark机器学习3.7 部署Apache
- 从jamwiki出发,构建个人推荐网站(1)–规划
- Ceph分布式存储学习指南3.1 Ceph存储架构
- Angular从零到一1.1 Angular 2简介
- Angular从零到一1.2 环境配置要求
- Angular从零到一1.3 第一个小应用 Hello Angular
- Angular从零到一1.4 第一个组件
- Angular从零到一1.5 一些基础概念
- 如何让你的JavaScript代码更加语义化
- Angular从零到一1.6 引导过程
- Angular从零到一1.7 代码的使用和安装
- Angular从零到一2.1 对于login组件的小改造
- Angular从零到一2.2 建立一个服务完成业务逻辑
- Angular从零到一2.3 双向数据绑定
- bootstrap类加载原理
- Angular从零到一2.5 验证结果的样式自定义
- Angular从零到一2.6 组件样式
- Angular从零到一2.7 小练习
- Angular从零到一3.1 建立routing的步骤
- Angular从零到一3.2 让待办事项变得有意义