WEB 前端开发环境的安装和SUBLIME TEXT的常用插件

PART 1.搭建WEB前端开发环境

之前一直没有正式的用通用的环境开发过前端,在慕课网看前端视频时讲师提到了开发环境如何搭建,所以这次自己在网上找的一些博客摸索着安装了一下,所以一下就是我实践的结果以及一些资源信息的整合。

1.1安装GIT

git是多人合作开发,进行代码版本管理的一个工具。

下载地址:https://git-scm.com/downloads

相关博客资源:https://www.cnblogs.com/smuxiaolei/p/7484678.html

1.2安装node.js

安装node.js是因为很多的前端框架基于node.js。需要配一下环境变量。安装完后可以点击开始--运行--cmd--打开命令行窗口后,输入node -v,此时如果安装成功会显示版本。在比较新的版本里,已经集成了npm,不需要额外安装。

下载地址:https://nodejs.org/en/download/(根据自己操作系统选择相对应的)

相关博客资源:

http://xiaoyaojones.blog.163.com/blog/static/28370125201351501113581/

http://www.cnblogs.com/haogj/p/4780982.html

1.3安装开发工具,这里用的是sublime text3

sublime text3是一个小巧的开发工具,它需要安装多个插件来实现更方便,高效的开发。

下载地址:http://www.sublimetext.com/3

安装插件可以直接在sublime text中进行,package control--输入install package,回车--在输入框里面输入要安装的插件名,之后会自动后台安装。

PART 2. Sublime Text 的常用插件

2.1 插件Docblockr

作用:快速作注释。插件有原快捷键,也可以自己设置快捷键。可以在https://packagecontrol.io/packages/DocBlockr查看详情。即,在https://packagecontrol.io/网页里输入插件的名字,就可以下载,查看功能,使用规则等,以下同。

2.2 插件bracketHighlighter

作用是标签框架的高亮显示,选中都高亮。可以自己修改配色。

2.3 插件jsformat

作用是js的格式化。默认格式js,也可选中部分用ctrl+alt+f格式化局部。

 

2.4 插件Autoprefixer

自动填充css的不同浏览器前缀,按快捷点添加和删除不必要的前缀。可以自己设置需要针对的浏览器版本(具体情况请自行搜索)另,可设置用户的快捷键,我设置的快捷键是ctrl+alt+p。

 

2.5 插件emmet

作用是提高编程的效率。以下是一些简单基础的使用语法。想看更多详细内容可以查看网页:https://packagecontrol.io/packages/Emmet#how-to-expand-abbreviations-with-tab-in-other-syntaxes

以下是语法:

  1. 标签扩展,按Tab键或者Ctrl+E。例如:div后按下Tab,等于<div></div>。
  2. 标签的包裹关系:>。li>a,按tab,等于<li><a href=""></a></li>
  3. 一次多个标签:*。div*5,按下tab,得到5个div。
  4. 给标签添加css选择器:li.item或者li#nav,添加类选择器或者id选择器。
  5. $,自动排序。li.item$*4,则4个li添加的类选择器为item1,item2..item4。
  6. {},编写标签内的内容。

以上是基本快速编码法则。另外需要记住的快捷键:

7.快速跳到内容编写点,ctrl+alt+->(指方向右键),表示下一个。同理,...+<-(方向左键),上一个。

8.ctrl+D,选中所有与光标处相同的内容。如果要同时修改多行,可多按几次Ctrl+D,逐行。

2.6 插件Colorpicker

颜色选取器。快捷键:ctrl+shift+c。

 

2.7 插件ConvertToUTF8

解决文字显示的编码问题。

 

附件

其他相关博客资源

node前端开发环境:http://www.imooc.com/article/17101

web+webpack前端开发:https://www.cnblogs.com/wuac/p/6406843.html

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页