开始学习前端知识,做一些笔记来记录下~
之前学习都是使用的dw 现在前端开发工具既轻便功能也够强大。
下面记录下常用的前端工具:
- Sublime3:需要安装第三方包,一般
- Atom:继承度非常好
- VS code:智能提示非常强大
- Webstorm:大项目,建议使用
- markman:标注/测量工具(基于adobe air)
工具安装:
Sublime3安装
官网下载地址:http://www.sublimetext.com/
安装插件步骤:
第一步:安装插件的包管理器:package control 安装上
按快捷键ctrl+~ 调出命名控制行 (View > Show Console)
输入安装包管理器的代码粘贴到命令执行窗口(在联网的情况下操作,因为是在线下载包)
粘贴:
(sublime3)
1 | import urllib.request,os; pf = <span style= "color: #800000;" > '</span><span style="color: #800000;">Package Control.sublime-package</span><span style="color: #800000;">' </span>; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), <span style= "color: #800000;" > '</span><span style="color: #800000;">wb</span><span style="color: #800000;">' </span>).write(urllib.request.urlopen( <span style= "color: #800000;" > '</span><span style="color: #800000;">http://sublime.wbond.net/</span><span style="color: #800000;">' </span> + pf.replace(<span style= "color: #800000;" > '</span> <span style="color: #800000;">' </span>,<span style= "color: #800000;" > '</span><span style="color: #800000;">%20</span><span style="color: #800000;">' </span>)).read())
|
로그인 후 복사
(sublime2)
1 | import urllib2,os; pf=<span style= "color: #800000;" > '</span><span style="color: #800000;">Package Control.sublime-package</span><span style="color: #800000;">' </span>; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) <span style= "color: #0000ff;" > if </span> not os.path.exists(ipp) <span style= "color: #0000ff;" > else </span> None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), <span style= "color: #800000;" > '</span><span style="color: #800000;">wb</span><span style="color: #800000;">' </span> ).write( urllib2.urlopen( <span style= "color: #800000;" > '</span><span style="color: #800000;">http://sublime.wbond.net/</span><span style="color: #800000;">' </span> +pf.replace( <span style= "color: #800000;" > '</span> <span style="color: #800000;">' </span>,<span style= "color: #800000;" > '</span><span style="color: #800000;">%20</span><span style="color: #800000;">' </span> )).read()); print ( <span style= "color: #800000;" > '</span><span style="color: #800000;">Please restart Sublime Text to finish installation</span><span style="color: #800000;">' </span>)
|
로그인 후 복사
重启一下sublime
第二步:安装第三方插件
ctrl+shift+p ( Preferences>package control )打开命令面板
输入install package 回车
输入包的关键字进行搜索,回车安装(左击安装第三方的包)
建议安装的sublime插件:
1.ConvertToUTF8:解决文件编码转化问题
2.Emmet:快速编写html,css,js的神级插件
3.SublimeLinter:高亮有错误的代码行,也支持高亮一些注释
4.ColorPicker:颜色选择器
5.HTMLBeautify:html格式化插件
6.AllAutoComplete:自动提示
7.IMESupport:输入法支持插件
8.Material Theme:推荐主题
9.Chineselocation:qit汉化包
10.Alignment: 代码格式自动对齐
11.Bracket Highlighter:括号高亮
sublime的win 常用快捷键:
快捷键:
ctrl+/ :注释
ctrl+x\v\y\z 剪切、粘贴、重复、取消
ctrl+滚动 缩放大小
ctrl+n 新建
ctrl+回车,在光标当前行下面创建一个新行,并让光标跳到新行行首。
ctrl+shift+回车:正好相反。
ctrl+shift+v 粘贴并保持缩进
ctrl+shift+d 复制当前行
ctrl+shift+↑ 向上移动行,↓同样道理
shift+鼠标右键 选中多行同时编辑
ctrl+f查找
ctrl+h查找和替换
ctrl+[ 增加左缩进
ctrl+]增加右缩进
ctrl+g: 跳转到第几行
其他几个就不一一介绍了。