在这里更新一些有关前端开发的工具,让你的效率更高!
图片处理类
马克鳗(MarkMan)
可以很方便的为设计稿添加标记,双击、滚轮、拖动。能够快速测量原型尺寸,取色等功能,重点是轻巧且颜值颇高。
支持PSD(需用最大兼容保存)、PNG、BMP、JPG格式,在标注的过程中,如果设计稿在被修改和保存了,马克鳗会自动重新载入设计稿。
贴心功能:
-
长度自动测量
`
-
标记拖拽删除
-
坐标和矩形标记
- 色值标记
下载地址: Markman官网
tinypng
如何把网页中要用到的图片压缩到最小,这是前端攻城师们在写网页时都会考虑的一个问题,今天给各位带来了给前端攻城师们真正的良心网站---TinyPNG。
只需要简单的两步就可以把你要压缩的PNG格式图片压缩到小很多又基本上不会影响图片的质量:
1.打开网址:http://tinypng.org/
2.选择你要压缩的PNG图片或者直接将你要压缩的图片拖拽到网页中间的大框框内。
3.压缩完成,点击download下载即可。
一般的图片都可以压缩到50%以上,再也不用担心图片太大加载过慢的问题了~
代码编辑器
Visual Studio Code的定位应该还是Editor,一个全功能的Editor,非常轻量级,搭配各种插件的话,打开大文件完全没问题且书写过程超级爽,并且作为一个颜控表示真的蛮好看的。。。
常用插件:
下载后面几个插件的话,直接就可以通过alt+shift+f直接格式化代码,代码一下子清爽多了
- 默认配置 setting.json文件
// 将设置放入此文件中以覆盖默认设置
{
"window.zoomLevel": 1,
"editor.tabSize": 2,
"files.autoSave": "onFocusChange",
"window.restoreWindows": "all",
"editor.multiCursorModifier": "ctrlCmd",
"files.associations": {
"*.vue": "vue"
},
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html",
"vue": "html",
"plaintext": "jade"
},
// "emmet.useNewEmmet": false,
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
// "editor.emmet.action.expandAbbreviation": "c",
// "markdown.enableExperimentalExtensionApi": true,
"git.confirmSync": false,
"git.enableSmartCommit": true,
"workbench.activityBar.visible": true
}
git操作完全可视化
包含简单的拉取,提交,推送,合并,简洁方便简直vscode terminal 终端
自带命令行,直接在上面看输出结果简直不能再方便了快捷键
官方文档,文档中列出了所有指令对应的快捷键。