前端四种常用的工具用法快捷键

    前几天进行了几轮的面试，发现面试官普遍会问到的一个问题是在编程过程中会用到的工具，然而其中有一个却难住了我，他问我是否知道所使用的工具是用什么生产出来的，说真的这个我可没有了解过。在我的认知中工具不就是用来写代码的吗，了解这么清楚干什么。

        其实作为一名程序员，在你的职业生涯中不可能只呆在一家公司，你会因为各种原因离职，再求职。不同的公司使用的工具不一样，所以你必须多掌握几种工具这不仅能提高你的工作效率，还能提高面试的筹码，你可以牛逼的对面试官说，没有什么工具是我不会的，多爽啊。下面我列出了前端常用的四种工具：

    1、sublime

        这是一款具有良好用户自定义功能的编辑器，你可以自己安装各种插件，非常的方便快捷，Sublime text，几乎所有（估计有99%）的代码，都是C++写的而极少数的部分，则用到了Object-C关于插件部分，用到了Python。它常用的快捷键有：

1. 就近选择相同项: ctrl+d

把光标放在一个单词上，按下ctrl+d，将选择这个单词。一直按住ctrl且按D多次，将选择当前选中项的下一个匹配项。通过按住ctrl，再按D三次，将选择三个相同的文本。

2. 选择当前文件所有匹配项: alt+f3

选择文件中的所有匹配项。小心使用这个，因为它能选择一个文件中的所有匹配项.

3. 选择文本的包裹标签: ctrl+shift+` （ESC键下面的那个）

这是一个法宝。也许你希望所有属性保持不变，但只是想选择标签。这个快捷键为你这样做，会注意到你可以在一次操作多个标签。ps：需要Emmet插件（可以直接到后面看插件的安装）

4. 向上扩展一层: ctrl+shift+a

如果你把光标放在文本间再按下上面的键将选择文本，就像ctrl+d。但是再次按下它，将选择父容器，再按，将选择父容器的父容器。ps：需要Emmet插件（可以直接到后面看插件的安装）

5. 选择括号内的内容: ctrl+shift+m

这有助于选择括号之间的一切。同样适用于CSS。

6. 整行的上下移动:  ctrl+shift+↑ 或  ctrl+shift+↓

7. 复制行或选中项: ctrl+shift+d

如果你已经选中了文本，它会复制你的选中项。否则，把光标放在行上，会复制整行。

8. 增加和减少缩进:  ctrl+[ 或 ]
9. 单行剪辑或选中项:  ctrl+x
10. 粘贴并复制格式:  ctrl+shift+v
11. 用标签包裹行或选中项:  alt+shift+w

12. 移除未闭合的容器元素: ctrl+shift+;

这会移除与你的光标相关的父标签。对清除标记很有帮助。

13. 大写和小写: 大写 ctrl+k+u 、小写 ctrl+k+l

14. 注释选中项/行: ctrl+/

这个在所有语言下都可用， 对行和选中项都可用。

插件部分：首先是安装包管理器Package Contro

1. emmet 2. 侧边栏增强插件SideBarEnhancements 3. 控制台呼出插件Terminal 4. 代码提示插件SublimeCodeIntel 5. 代码排版插件Sublime-HTMLPrettify

自己遇到的问题：

（1）.自动更新

有时候会弹出自动更新的框，解决方法：

1. 找到Preferences -> Settings-User（设置用户）
2. 在最后一个花括号结尾（“｝”）前添加一句："update_check":false
3. 然后请关闭Submine Text并重启，即不会再弹出更新提醒了

（2）.不能获取插件列表 Package Control：There are no packages available for installation

1. cmd下输入ping sublime.wbond.net链接一下看下sublime.wbond.net这个域名的ip.
2. 打开C:\Windows\system32\drivers\etc\hosts文件。在最后面加上例如50.116.34.243 sublime.wbond.net这样的对应关系，IP是上面测试的。
3. 然后请关闭Submine Text并重启，即不会再弹出更新提醒了。

2.webstorm

不仅可以编写代码，还提供编译打包、版本控制、自动构建以及调试等功能。

快捷键：

ctrl + shift + ]/[: 选中块代码
ctrl + / : 单行注释
ctrl + shift + / : 块注释
ctrl + shift + i : 显示当前CSS选择器或者JS函数的详细信息
ctrl + '-/+': 可以折叠项目中的任何代码块，它不是选中折叠，而是自动识别折叠。
ctrl + '.': 折叠选中的代码的代码。
ctrl+/ 单行注释
ctrl+shift+/块注释
ctrl+shift+ +/-展开/折叠
ctrl+alt+L 格式化代码
ctrl+shift+ up/down 上下移动句子
Alt+回车 导入包,自动修正
Ctrl+N 查找类
Ctrl+Shift+N 查找文件
Ctrl+Alt+L 格式化代码
Ctrl+Alt+O 优化导入的类和包
Alt+Insert 生成代码(如get,set方法,构造函数等)
Ctrl+E或者Alt+Shift+C 最近更改的代码
Ctrl+R 替换文本
Ctrl+F 查找文本
Ctrl+Shift+Space 自动补全代码
Ctrl+空格 代码提示
Ctrl+Alt+Space 类名或接口名提示
Ctrl+P 方法参数提示
Ctrl+Shift+Alt+N 查找类中的方法或变量
Alt+Shift+C 对比最近修改的代码
Shift+F6 重构-重命名
Ctrl+Shift+先上键
Ctrl+X 删除行
Ctrl+D 复制行
Ctrl+/ 或 Ctrl+Shift+/ 注释（// 或者/*...*/ ）
Ctrl+J 自动代码
Ctrl+E 最近打开的文件
Ctrl+H 显示类结构图
Ctrl+Q 显示注释文档
Alt+F1 查找代码所在位置
Alt+1 快速打开或隐藏工程面板
Ctrl+Alt+ left/right 返回至上次浏览的位置
Alt+ left/right 切换代码视图
Alt+ Up/Down 在方法间快速移动定位
Ctrl+Shift+Up/Down 代码向上/下移动。
F2 或Shift+F2 高亮错误或警告快速定位
代码标签输入完成后，按Tab，生成代码。
选中文本，按Ctrl+Shift+F7 ，高亮显示所有该文本，按Esc高亮消失。
Ctrl+W 选中代码，连续按会有其他效果

选中文本，按Alt+F3 ，逐个往下查找相同文本，并高亮显示。

Ctrl+Up/Down 光标跳转到第一行或最后一行下Ctrl+B 快速打开光标处的类

ctrl + F12: 可以显示当前文件的结构ctrl + x: 剪切(删除)行，不选中，直接剪切整个行，如果选中部分内容则剪切选中的内容

alt + left/right:标签切换

ctrl + r: 替换

ctrl + d: 行复制

常用到的插件：

1、 Markdown

2、 WebStorm APICloud Plugins

WebStorm APICloud Plugins是APICloud为开发者提供的一套开源的WebStorm扩展插件，包括：应用管理、应用框架、页面模板、代码提示、代码管理、Widget打包、真机同步、日志输出、管理自定义AppLoader等功能，其他的功能插件也在不断增加；所有插件都已开源，开发者可以下载这些插件在自己的WebStorm中安装后使用，开发者也可以在此基础上按需求扩展自己的插件。

3、 AngularJS

支持AngularJS的标签提示

4、 AceJump

快速定位光标位置，有了它你可以丢弃鼠标了

   1、Hbulider

HBuilder是当前最快的HTML开发工具，强大的代码助手帮你快速完成开发，最全的语法库和浏览器兼容性数据让浏览器碎片化不再头痛。

快捷键：

创建HTML结构： h 8 （敲h激活代码块列表，按8选择第8个项目，即HTML代码块，或者敲h t Enter）

中途换行： 'Ctrl+Enter'

设置charset： m e 6 Enter

引用外部js： s 2 Enter 'Ctrl+Enter

创建js区块： s Enter

创建函数： f u n 3 （或者 f u n n Enter）

为函数命名：W h o i s E

跳转到函数末尾： End 'Alt+[' ↓ 'Ctrl+Enter' （Alt+[是跳转到匹配括号的意思）

创建style节点： s t Enter ↓ 'Ctrl+Enter'

引用外部css： l Enter Enter

跳转到下一个可编辑区： 'Alt+↓'

创建img标签： i m Enter Enter 'Ctrl+Enter'

插入换行符： 'Shift+Enter' Enter

关闭标签页：'Ctrl+w' （切换标签页则可以用Ctrl+e）

添加自定义属性data-test并赋值1： → Space d 7 t e s t Tab 1

合并下行：'Ctrl+Alt+j' 'Ctrl+Enter'

创建超链接并设id： a Enter Enter → Space i Enter a 1

使用选择助手选中#d1：'Ctrl+Alt+←' 'Ctrl+Alt+←' 'Ctrl+Alt+←' (如果快捷键冲突,可使用Alt+S U，或者鼠标双击引号)

重新修改链接指向新创建的a1： BackSpace 'Alt+/' Enter 'Ctrl+Enter'

创建ul： u Enter 

折叠代码：'Ctrl+Alt+-'

向上插入空行：'Ctrl+Shift+Enter' Tab （一般Ctrl+某字母的快捷键，变成Ctrl+Shift+相同字母，大多代表相反意义）

没有代码块时，使用emmet语法创建标签：n a v Tab

使用shift转码输入空格：'Shift+Space' （如果与输入法快捷键冲突，也可输入& n 2）

创建按钮：'Ctrl+Enter' i n Enter Enter Tab Tab w h o Space i s Space e →

添加点击事件： Space o n c k Enter w h o Enter → （onck是模糊匹配，不用输入完整单词也会模糊匹配，除代码块外所有语法提示都支持模糊匹配）

使用转到定义到js函数：'Ctrl+Alt+D' ↓

------以下为js部分

定义一个变量e： v a r Space e ; Enter

为e赋值：e Space = Space d o Enter . g 6 " Enter （可提示样式列表）

使用回车或Tab跳转光标到绿色竖线（若没有绿色竖线请使用End到行尾）：Enter ; Enter

为e赋值2：e Space = Space d o Enter . g 8 " d 8 Enter ; Enter （可提示标签列表）

为e赋值3(这个代码块很常用)：e Space = Space $ (或者dg) Enter 2 Enter ; Enter （可提示id列表，注意选择d1）

为e设置algin属性： e . s e 2 " a l Enter → , " c Enter Enter ; Enter

设置自定义属性：e . s e 2 " d Enter → , " 2 Enter ; Enter

提示字体列表： e . s t Enter . f o 2 = " Enter Enter ; Enter

提示图片列表： e . s t Enter . b 7 = " h b Enter Enter ; Enter

还能这么写css： e . s t Enter . c s 2 = " b 7 h b Enter → ; Enter

写switch对e判断：s w 2 e . s t Enter . d i s Enter Tab

case处提示display的值域：" - w e Enter

跳转到switch结尾（有绿色竖线）：Enter Enter

写if代码块：i f f Enter (或者使用i f 2)

为if添加条件判断属性里的样式：e . g e t a t Enter " c Enter Enter ! = " Enter ↓

设置e的样式：e . c l 2 (此处也可以用c l n Enter) = " Enter Enter ; ↓ Enter

js里可以提示html： e . i n n Enter = " < f o Enter Space c o Enter Enter Enter ; Enter 

e赋值改为超链接：e Space = Space $ Enter Enter Enter ; Enter

给a1加链接地址：e . h r Enter = " Enter Enter ; Enter

给a1加target：e . t 5 = " Enter Enter ; Enter

e赋值改为image对象：e Space = Space n e w Space i m 6 Enter ; Enter

为img增加图片： e . s r Enter = " Enter Enter ; Enter

e赋值改为indexedDB对象：e Space = Space w i Enter . i Enter Space | | Space w i Enter . i n d e x e d 5 Space | | Space w i Enter . i n d e x e d 3 Space | | Space w i Enter . i n d e x e d 2 ; Enter 

确认e可被浏览器识别：i f f Enter (也可以使用i f 2) t y 4 e Enter ↓

执行indexdb的方法：e . o p Enter " t e s t Enter ; ↓ Enter

------以下为删除又添加上外部css引用

定义head变量：v a r Space h e a d Space = Space d o Enter . g 8 " h e Enter Enter [ 0 → ; Enter

with里也可以提示： w i t h h (或者w i t 2) Enter h Enter ↓

获取head的最后一个子节点：v a r Space l Space = Space l e c Enter ; Enter （with里的head可直接识别子对象）

去掉该子节点：r e m 6 l → ; ↓ Enter （head的lastElementChild就是外部引用的css）

动态生成一个css文件引用：e Space = Space d c Enter l 5 Enter ; Enter

添加属性：e . r 3 = " s t y Enter Enter ; Enter

设置type： e . t y Enter = " c Enter Enter ; Enter

设置href：e . h r Enter = " . c Enter Enter ; Enter

将e加入head中：h Enter . a p Enter e Enter Enter ; Enter

------演示重构，即重命名变量

用代码块定义一个变量s：v a r s Enter Tab e Space i s Space 'Ctrl+Enter'

判断e的属性：i f e（或i f 3） Enter e . g 2 " d Enter Enter = = n u 2 ↓

为s赋值：s = s + e . o u Enter ; 'Alt+↓'

为s赋值：s = s + " u n k n o w → ; ↓ Enter

将s打印出来：a l Enter s 

选择s并转到定义：'Shift+←' 'Ctrl+Alt+D'（按Alt点击鼠标也可以）

重构s的命名为ss：'Ctrl+F2' Enter s s Enter Enter (弹出对话框可预览重构结果)

跳转到函数末尾：'Alt+↓' 'Alt+↓' Enter

添加一个启动事件： a d Enter " d o m l o Enter → , f u n a Enter (此处也可以是f u 6) ↓

提示自定义函数的jsdoc： f i n i Enter 1

------css部

跳转到CSS：'Alt+↓'

给body加样式：b o Enter { Enter

emmet方式增加textalign：t c Tab Enter

模糊匹配增加user-select：u s e r s 4 5

写下一个样式：↓ Enter

为input增加样式：i n Enter [ t y Enter = Enter → { Enter

使用代码块设置宽度：w 9 9 0 ↓ Enter

为ul加样式：u l { d n Enter 'Ctrl+Enter'

ID也可以提示：# 2 { Enter

提示字体列表：f f Enter Enter Enter

回车自动补行尾分号：Enter

增加background-image：b i Enter h b Enter

大功告成，保存并运行起来看看：'Ctrl+s' 'Ctrl+r'Ctrl+P，左边保存右边自动刷新Alt + [ 匹配括号Alt + ↓跳转到下一个可编辑区Ctrl + Alt + j 合并下一行Ctrl + Alt + ←选择助手Ctrl + 回车 换行Ctrl + Shift + 回车 向上换行Ctrl + d 删除一行Ctrl + Shift +R 复制上一行

4.Deamweaver

  Dreamweaver是一款集设计和编码于一体的软件，熟练掌握Dreamweaver软件的使用，无论是设计师还是工程师，它都能有效提高你的工作效率。

快捷键：

新建(New)一个网页【Ctrl】+【N】 　　

打开(Open)一个存在的网页【Ctrl】+【O】

在框架中打开(Open)...【Ctrl】+【Shift】+【O】

关闭(closedoWn)当前网页【Ctrl】+【W】

保存（Save）当前网页【Ctrl】+【S】 

另存为 【Ctrl】+【Shift】+【S】 

检查联接的有效性【Shift】+【F8】

撤消上一步操作【Ctrl】+【Z】/【Alt】+【BackSpace】

重复上一步操作【Ctrl】+【Y】/【Ctrl】+【Shift】+【Z】

剪切到剪贴板【Ctrl】+【X】/【Shift】+【Del】 

拷贝（Copy）到剪贴板【Ctrl】+【C】/【Ctrl】+【Ins】

将剪贴板的内容粘贴到当前文件中【Ctrl】+【V】/【Shift】+【Ins】

拷贝（Copy）HTML代码【Ctrl】+【Shift】+【C】

粘贴HTML代码【Ctrl】+【Shift】+【V】

全部（All）选择【Ctrl】+【A】

选择上一级标签【Ctrl】+【Shift】+【<】

选择下一级标签【Ctrl】+【Shift】+【>】

查找（Find）和替换...【Ctrl】+【F】/【Ctrl】+【H】

查找下一个【F3】 　　缩进代码【Ctrl】+【]】

取消缩进代码【Ctrl】+【[】

平衡背带【Ctrl】+【】

设置断点（Breakpoint）【Ctrl】+【Alt】+【B】

调用外部编辑器（ExternalEditor【Ctrl】+【E】

参数设置（setUp）...【Ctrl】+【U】

在编辑窗口和代码窗口间进行切换【Ctrl】+【Tab】

刷新视窗显示【F5】 　　显示/隐藏头文件【Ctrl】+【Shift】+【W】

表格用标准显示方式【Ctrl】+【Shift】+【F6】

表格显示为版面【Ctrl】+【F6】

显示/隐藏不可见因素【Ctrl】+【Shift】+【I】

显示/隐藏标尺（Rulers）【Ctrl】+【Alt】+【R】

显示/隐藏网格【Ctrl】+【Alt】+【G】

捕捉到网格（Grid）【Ctrl】+【Alt】+【Shift】+【G】

播放（Play）外部插件【Ctrl】+【Alt】+【P】

停止播放外部插件【Ctrl】+【Alt】+【X】

播放所有的外部插件【Ctrl】+【Alt】+【Shift】+【P】

停止所有外部插件【Ctrl】+【Alt】+【Shift】+【X】

插入图像（Image）【Ctrl】+【Alt】+【I】

插入Flash动画【Ctrl】+【Alt】+【F】

插入Shockwave影片【Ctrl】+【Alt】+【D】

插入表格（Table）【Ctrl】+【Alt】+【T】

入书签命名锚点（Anchor）【Ctrl】+【Alt】+【A】

插入回车符号【Shift】+【Enter】

插入非间断空格【Ctrl】+【Shift】+【Space】

修改页面属性...【Ctrl】+【J】

打开/关闭物体属性设置面板【Ctrl】+【Shift】+【J】

快速代码编辑【Ctrl】+【T】

新建链接（Link）...【Ctrl】+【L】

删除链接（Link）【Ctrl】+【Shift】+【L】

选择表格【Ctrl】+【A】

合并（Merge）单元格【Ctrl】+【Alt】+【M】

[1]　分离（Split）单元格...【Ctrl】+【Alt】+【S】

插入一行【Ctrl】+【M】 　　插入一列【Ctrl】+【Shift】+【A】

删除一行【Ctrl】+【Shift】+【M】 　　删除一列【Ctrl】+【Shift】+【-】

增加单元格跨度【Ctrl】+【Shift】+【]】

减少单元格跨度【Ctrl】+【Shift】+【[】

左对齐选择物体【Ctrl】+【Shift】+【1】

右对齐选择物体【Ctrl】+【Shift】+【3】

顶对齐选择物体【Ctrl】+【Shift】+【4】

底对齐选择物体【Ctrl】+【Shift】+【6】 

使宽度相同【Ctrl】+【Shift】+【7】

使高度相同【Ctrl】+【Shift】+【9】 

将对象添加到库（Library）中【Ctrl】+【Shift】+【B】

在模板中新建一个可编辑区域...【Ctrl】+【Alt】+【V】

添加物体到时间线（Timeline）上【Ctrl】+【Alt】+【Shift】+【T】

在时间线上添加关键帧【F6】

删除时间线上的关键帧【Shift】+【F6】

文本缩进【Ctrl】+【Alt】+【]】

取消文本缩进【Ctrl】+【Alt】+【[】

设置段落格式为无【Ctrl】+【0】