前端学习一 - 喵小柒

开始学习前端知识，做一些笔记来记录下～

之前学习都是使用的dw 现在前端开发工具既轻便功能也够强大。

下面记录下常用的前端工具：

1. Sublime3:需要安装第三方包，一般
2. Atom:继承度非常好
3. VS code:智能提示非常强大
4. Webstorm:大项目，建议使用
5. markman:标注／测量工具（基于adobe air）

工具安装：

Sublime3安装

官网下载地址：http://www.sublimetext.com/

安装插件步骤：

第一步：安装插件的包管理器：package control 安装上

按快捷键ctrl+~ 调出命名控制行 （View > Show Console）

输入安装包管理器的代码粘贴到命令执行窗口（在联网的情况下操作，因为是在线下载包）

粘贴：

（sublime3）

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）

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  回车

输入包的关键字进行搜索，回车安装（左击安装第三方的包）

 

 

包管理器的官方网址 ：https://packagecontrol.io

 

建议安装的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: 跳转到第几行

 

其他几个就不一一介绍了。

atom 官方网址：https://atom.io

webstorm 官方网址：http://www.jetbrains.com