前端工具

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

图片处理类

马克鳗(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 终端
  自带命令行，直接在上面看输出结果简直不能再方便了

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