前几天进行了几轮的面试,发现面试官普遍会问到的一个问题是在编程过程中会用到的工具,然而其中有一个却难住了我,他问我是否知道所使用的工具是用什么生产出来的,说真的这个我可没有了解过。在我的认知中工具不就是用来写代码的吗,了解这么清楚干什么。
其实作为一名程序员,在你的职业生涯中不可能只呆在一家公司,你会因为各种原因离职,再求职。不同的公司使用的工具不一样,所以你必须多掌握几种工具这不仅能提高你的工作效率,还能提高面试的筹码,你可以牛逼的对面试官说,没有什么工具是我不会的,多爽啊。下面我列出了前端常用的四种工具:
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+[
或
]
ctrl+x
ctrl+shift+v
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).自动更新
有时候会弹出自动更新的框,解决方法:
Preferences -> Settings-User
(设置用户)}
”)前添加一句:"update_check":false
(2).不能获取插件列表 Package Control:There are no packages available for installation
ping sublime.wbond.net
链接一下看下sublime.wbond.net
这个域名的ip.C:\Windows\system32\drivers\etc\hosts
文件。在最后面加上例如50.116.34.243 sublime.wbond.net
这样的对应关系,IP是上面测试的。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 PluginsWebStorm 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 复制上一行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】