HTML5学堂-码匠 HTML5学堂

您当前位于:开发工具 ——> Sublime Text编辑器,插件的安装与配置

Sublime Text编辑器,插件的安装与配置

2015/08/05 15:11:52 | 作者:HTML5学堂(码匠) | 分类:开发工具 | 关键词:sublime,插件,编辑器,汉化,emmet

Sublime Text插件安装与配置方法

HTML5学堂:本文当中,主要针对Sublime的汉化方法、相关插件-Emmet的安装以及基本配置方法进行介绍。最后则针对初学者,提到了如何对待这些工具类的插件。

刘国利:正好今天HTML5-7班的讲师讲到Sublime的插件-Emmet,想来貌似自己之前从来没写过插件的使用和安装方法,于是,写一下喽~~~想吐槽的就是,给我那么短的时间内写完这篇文章;还想吐槽的是,孩纸们啊,你们一直用英文的Sublime,舒服么~~~为啥不下载一个中文汉化包啊?很简单的三步操作就能汉化的说……唉,做一个勤于思考的人吧~~~

Sublime Text2 软件汉化

三个基本步骤

1、点击此处下载Sublime汉化包

2、解压,将default中的8个文件取出

3、打开Sublime,找到菜单中的“Preferences”——>“Browse Packages”(含义为浏览程序包)。打开文件夹之后,找到default文件夹,然后将刚才取出的8个文件替换掉原来的文件即可。

下载Emmet插件

个人很喜欢emmet插件(该插件原来的名字是Zen Coding)

Emmet插件下载地址

点击此处进入链接:http://emmet.io/download/

进入页面之后,点击下图download,下载压缩包,之后将压缩包解压。

下载emmet
点击下载emmet压缩包

文件加载完毕之后,调整文件位置

依旧是“Preferences”——>“Browse Packages”(汉化后则是“偏好”——>“浏览程序包”),然后把解压后的文件夹“emmet-sublime-master”放置于其中即可。

重启Sublime编辑器,稍等片刻之后即可使用。

检测是否安装成功

首先新建一个文件,存储为.html为后缀的网页文件,之后在编辑器中输入英文叹号(!),之后按下Tab键,如果能够生成出基本的html文件结构(包含doctype、head和body),则说明安装成功

关于Emmet插件的相关配置

依旧是“Preferences”——>“Browse Packages”(汉化后则是“偏好”——>“浏览程序包”),找到文件夹“emmet-sublime-master”,再在里面找到“emmet”文件夹,之后将其中的snippets.json,拖拽到Sublime当中。

按下Ctrl+G,输入822,通过行号快速定位。

在此处,我将该行修改为如下内容:(这一行可以由各位根据情况去修改)

  1. "doc": "html>(head>meta[charset=UTF-8]+title{HTML5学堂 - H5course}+link[rel=stylesheet][href=../css/reset.css]+link[rel=stylesheet][href=../css/index.css])+body>.wrap",

定位行号835,将"html:5": "!!!+doc[lang]"修改为"html:5": "!!!+doc"

最后,重启Sublime。

此时,当我们再新建一个文件,存储为.html为后缀的网页文件,之后在编辑器中输入英文叹号(!),之后按下Tab键,就会呈现如下效果:

配置emmet之后的显示效果

为何刚开始不建议使用插件

记得自己在使用插件之前,应该是用手敲了3年左右吧,后来教学生时也是特意注意了这个问题。作为一个编写代码的工程师,必须要了解基本的代码书写规范,并能够在书写过程中记忆清晰。另外一些单词也是必须要记下来的。因此在课程的操作当中,通常是在大家学习1个月左右的时间,再让大家逐渐的使用插件,提升代码速度。换句话说,代码质量和代码速度其实都是开发者应当追求的东西,希望各位使用插件的时候不要忘记基本的语法和规范,同时能够让插件充分发挥它的作用,将自己的代码速度提升一个档次~

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端