前端工具

作者: Zoemings | 来源:发表于2017-09-11 17:00 被阅读293次

在这里更新一些有关前端开发的工具,让你的效率更高!

图片处理类

马克鳗(MarkMan)

可以很方便的为设计稿添加标记,双击、滚轮、拖动。能够快速测量原型尺寸,取色等功能,重点是轻巧且颜值颇高。
支持PSD(需用最大兼容保存)、PNG、BMP、JPG格式,在标注的过程中,如果设计稿在被修改和保存了,马克鳗会自动重新载入设计稿。
贴心功能:

  • 长度自动测量


    2015062910404527878.gif

    `

  • 标记拖拽删除


    2015062910404657503.gif
  • 坐标和矩形标记


    2015062910404418542.gif
  • 色值标记
    2015062910404565256.gif
    下载地址: 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 终端
    自带命令行,直接在上面看输出结果简直不能再方便了

  • 快捷键
    官方文档,文档中列出了所有指令对应的快捷键。

相关文章

  • 程序员常用的网址

    开源站点 Github OSchinasgf51CTO 前端工具 前端工具箱

  • Grunt 与 Gulp 前端自动化集成工具

    前端自动化集成工具:前端框架+工具 例如:Yeoman / Bower / Grunt / Gulp 一、grun...

  • 前端入门必修1

    前端开发工具 介绍 前端开发工具非常多,有webstorm、vscode、notePad++、sumlime、...

  • 前端自动化测试工具

    掌握前端知识,一个必不可少的学习就是掌握前端工具。前端工具比较多,以下我们一起来看看几款常见的工具:Firebug...

  • 不要重复造轮子

    前端常用网站、工具

  • gulp && webpack

    gulp 前端自动化构建工具,此类的工具还有gruntwebpack 前端打包工具,打包:分析项目所依赖的内容,自...

  • 软件测试工具大全

    列出了部分相关工具: 前端工具:Dw ,HBuilder ,webstream ps:做前端也可以用java编写,...

  • 大牛指路:前端必备工具汇总

    作为一个前端,工具可以说是必不可少的。前端的你都在使用哪些工具呢?今天,小编给各位大神介绍几款前端工具,大家看看如...

  • gulp

    叫做前端自动化构建工具,此类工具还有:grunt前端自动化构建工具 是什么?答: 自动化 less sass ...

  • package.json中的browserlist是什么意思

    BrowserList是一个前端项目配置工具,功能是在前端工具之间共享目标环境的浏览器信息。 因为在现代前端项目中...

网友评论

    本文标题:前端工具

    本文链接:https://www.haomeiwen.com/subject/umsfsxtx.html