前端学习【工具篇】——工欲善其事,必先利其器

栏目: CSS · 发布时间: 6年前

内容简介:前端学习【工具篇】——工欲善其事,必先利其器

##安装IDE

首先你需要安装一款IDE。

个人推荐Node.js环境下的Sublime 3

首先,让我们打开Sublime,新建一个demo.html文件愉快的在代码区域中输入

前端学习【工具篇】——工欲善其事,必先利其器
在Sublime中输入`!`

对,你没看错!赶快输入 吧~

然后按下快捷键 Ctrl + E

前端学习【工具篇】——工欲善其事,必先利其器
按下快捷键 `Ctrl + E`

奇迹发生了!

sublime竟然自动生成了html的骨架!

与此同时,我们愉快的前端程序猿之路也正式开始了!

##安装插件

接下来,我要给你强烈安利几款sublime功能强大的插件。

但是,在这之前我们先来学习一下如何在sublime中安装插件。

首先,按下快捷键 Ctrl + Shift + P

前端学习【工具篇】——工欲善其事,必先利其器
输入`Ctrl + Shift + P`

你会发现屏幕上弹出了一个下拉搜索框。

接着,输入 INSTALL ,并点击回车

前端学习【工具篇】——工欲善其事,必先利其器
输入`INSTALL`
前端学习【工具篇】——工欲善其事,必先利其器
输入回车
这样就会弹出可安装插件的搜索框,然后你就可以愉快地在搜索框里输入你想要安装的插件并敲下回车进行安装了。(插件安装时间非常短,可以在sublime的左下角看到短暂的安装信息。等插件安装完成之后一般就会弹出插件的说明文本。注:部分插件需要 配置node.js的路径

。下面会就具体插件进行举例。)

最后 重启sublime ,然后你就能正常使用该插件了。是不是非常简单呢?没错,这就是我向你们强烈安利sublime的原因。

##重磅插件推荐

####Emmet插件(官方文档)

Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow.

Emmet的前身为 Zen Coding,如果你从事过前端相关工作,那么你对它一定不会陌生。其采用了 仿CSS选择器的语法 将你输入的代码片段生成为完整的HTML或CSS代码,极大的提高了代码的编写速度。

前端学习【工具篇】——工欲善其事,必先利其器
Emmet

#####一、安装

  • 输入 INSTALL ,并点击回车
前端学习【工具篇】——工欲善其事,必先利其器
输入`INSTALL`
  • 输入 Emmet ,并点击Emmet Css Snippets进行安装
前端学习【工具篇】——工欲善其事,必先利其器
点击Emmet Css Snippets
  • 点击 菜单栏>首选项>插件设置>Emmet>Settings-Default 可进行相关设置
前端学习【工具篇】——工欲善其事,必先利其器
Emmet设置文档
正常情况下,该插件不需要配置路径,只需 重启sublime

即可使用。

#####二、使用

Emmet的快捷键是Tab,有点类似于sublime自带的智能感知,但是需要在你输入代码片段后按下Tab来触发。

下面我来举一些 HTML 中例子:

  • 首先我们还是用 ! 来举例子,和之前没有安装Emmet会有什么不同吗?
前端学习【工具篇】——工欲善其事,必先利其器
输入 `!` ,并按下Tab

和之前完全一样,有木有!不同的是我们现在只需要按一下Tab键,不需要费力地用手去够快捷键了。

  • 输入 ul>li*6 ,按下Tab
前端学习【工具篇】——工欲善其事,必先利其器
`ul>li*6`

Boom!!!一个原本需要费劲的敲很久的列表标签就生成了!

  • 输入 div.foo>h1 ,按下Tab
前端学习【工具篇】——工欲善其事,必先利其器
`div.foo>h1`

一个class为foo,并且嵌套着一个h1标签的div标签就这样瞬间生成了!

  • 输入 (div.foo>h1)+(div#foo>img) ,按下Tab
前端学习【工具篇】——工欲善其事,必先利其器
`(div.foo>h1)+(div#foo>img)`

想想我们可以为此节省了多少时间?是不是有点小激动呢?

然而Emmet的强大绝不仅限于 HTML ,下面我再来举一些 CSS 中的例子:

-输入 w100 ,按下Tab

前端学习【工具篇】——工欲善其事,必先利其器
`w100`

-输入 h75p ,按下Tab

前端学习【工具篇】——工欲善其事,必先利其器
`h75p`

-输入 ov-h ,按下Tab

前端学习【工具篇】——工欲善其事,必先利其器
`ov-h`

是不是感觉酷毙了!

由于篇幅关系,笔者在这里仅仅举出了一些简单的例子,目的是让读者能对Emmet插件有个大概的认识。这个插件的优点就是上手极快,可以充分发挥自己的想象力,大大提高码代码的速度。你还在等什么,快去试试吧!

####CSSComb插件(官方文档)

Makes your code beautiful

这款插件可以使用指定的 排序 方式对CSS的属性进行排序,使你的CSS代码更加规范

#####一、安装

  • 输入 INSTALL ,并点击回车
前端学习【工具篇】——工欲善其事,必先利其器
输入`INSTALL`
  • 输入 CSScomb ,点击安装
前端学习【工具篇】——工欲善其事,必先利其器
输入`CSScomb`
  • 点击 菜单栏>首选项>插件设置>CSScomb>Settings-Default ,将里面的 "node-path"属性 设置为你电脑上node.js的安装路径即可
前端学习【工具篇】——工欲善其事,必先利其器
修改路径
  • 最后一步, 重启sublime

#####二、使用

右键 run CSScomb 即可

前端学习【工具篇】——工欲善其事,必先利其器
使用前
前端学习【工具篇】——工欲善其事,必先利其器
使用后

效果还是很明显的~

####CSS Format插件

强大的CSS格式工具,有多种格式可供选择

#####一、安装

与上面的插件安装步骤完全一致,后面不再放图

  • 输入 INSTALL ,并点击回车

  • 输入 CSS Format ,点击安装

  • 不需要配置路径, 重启sublime 即可

#####二、使用

  • 右键 CSS Format >Expanded (注意,与CSScomb不同,不会改变CSS属性的顺序)
前端学习【工具篇】——工欲善其事,必先利其器
Expanded
  • 右键 CSS Format >Compact
前端学习【工具篇】——工欲善其事,必先利其器
Compact
  • 右键 CSS Format >Compressed (一行CSS代码)
前端学习【工具篇】——工欲善其事,必先利其器
Paste_Image.png

####HTML-CSS-JS Prettify插件

最后来讲一讲前端通吃的格式优化插件 HTML-CSS-JS Prettify

#####一、安装

与上面的插件安装步骤完全一致,后面不再放图

  • 输入 INSTALL ,并点击回车

  • 输入 CSS Format ,点击安装

  • 需要配置路径,将你电脑对应系统的路径改为node.js的安装目录保存即可(对了,在sublime中保存的快捷键为 Ctrl + S

前端学习【工具篇】——工欲善其事,必先利其器
路径配置
  • 最后 重启sublime 即可

#####二、使用

使用方法和前面的类似,也是右键选择即可。这款插件除了能够修改CSS的格式外,还能修改HTML与JS的格式。但需要注意,这款插件也不能改变CSS属性的顺序。

小结:笔者一口气给大家安利了4款比较常用的插件,部分插件的功能可能存在重复,但是我们可以各取所长。比如, 对于CSS文件一般可以先用CSScomb调整CSS属性的顺序,然后再用CSS Format转化为自己想要的格式。对于HTML和JS文件,我们则选用HTML-CSS-JS Prettify插件。

##结语

工欲善其事,必先利其器。

掌握了上述IDE以及插件,那么你的前端之路想必已经有了很好的开端。笔者想要告诉你的是,虽然已经有了一把得心应手的武器,但是前端学习之路才刚刚开始,多动手多打怪才是提高编程能力的不二法门。加油吧!骚年!


以上所述就是小编给大家介绍的《前端学习【工具篇】——工欲善其事,必先利其器》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

编程卓越之道

编程卓越之道

Hyde R / 韩东海 / 电子工业出版社 / 2006-4-1 / 49.80

各位程序员一定希望自己编写的代码是能让老板赞赏、满意的代码;是能让客户乐意掏钱购买的代码;是能让使用者顺利使用的代码;是能让同行欣赏赞誉的代码;是能让自己引以为豪的卓越代码。本书作者为希望能编写出卓越代码的人提供了自己积累的关于卓越编程的真知灼见。它弥补了计算机科学和工程课程中被忽略的一个部分——底层细节,而这正是构建卓越代码的基石。具体内容包括:计算机数据表示法,二进制数学运算与位运算,内存组织......一起来看看 《编程卓越之道》 这本书的介绍吧!

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具