当前位置:首页 > 技术教程 > HTML- sublime的使用——前端开发入门篇
收藏文章返回上一页

sublime的使用——前端开发入门篇

管理员 发表于 2018-09-16 22:40:16      浏览统计:453

首先小编告诉大家,学习任何技术都是没有捷径的,大神之路必定是漫长而艰苦的。但是只要你认真并且每天坚持去学习,一定会有所收获的。分享一句小编学习前端之路的座右铭和大家共勉:


你必须非常努力,才能看起来毫不费力。


什么是编辑器?


编辑器其实就是编写代码的一个工具,简称--IDE。每一款编辑器用法大致相同,如果你会使用其中一个,那么其他的你也差不多会了。在众多的编辑器中,小编认为webStorm和Sublime还比较不错。因为后续的教程都是用sublime编写,所以今天给大家讲一下Sublime Text 3的安装和使用。


1.下载


http://www.sublimetext.com/3 官网下载。


2.Windows下的安装


如果你的电脑是Win7/Win8 64位系统,可以下载 Windows 64 bit来安装。安装时,注意勾选Add to explorer context menu,这样Sublime Text可以被添加到右键中,在右键单击文件时,可以直接使用Sublime Text打开。


3.安装插件


3.1 安装 Package Control


Sublime Text可以使用Package Control,来更方便的浏览、安装和卸载插件。


(1)使用 [Ctrl + `] 打开Sublime Text控制台,将下面的Python代码粘贴到控制台里,然后点击回车安装:


import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

sublime的使用——前端开发入门篇

注意:上面的代码会随着版本不同而改变,所以最好到官网去复制代码。如果不能自动安装的话,官网也提供了手动(Manual)安装方法。

(2)等待出现下载安装成功的提示后, 重启sublime Text 3。如果在Perferences->package settings中看到package control这一项,则表明安装成功。安装好Package Control,就可以安装你想要的插件了。

3.2 安装快捷键Emmet

(1)快捷键是每个编辑器必不可少的插件,可以提高你编码的效率。按下Ctrl+Shift+P调出命令面板。

(2)输入install 调出 Install Package 选项并回车

sublime的使用——前端开发入门篇

(3)搜索emmet,列表中第一个就是。选中这个或者单击它即可安装,在编辑器的左下角即可看到安装的状态。

(4)安装成功后,在菜单->preferences->Package Settings选项里即可看到Emmet:

sublime的使用——前端开发入门篇

4.Sublime的使用

安装好Eemmet,我们就可以在编写代码时使用Tab键提高我们的编码的效率。如果你无法使用Tab,可能是默认填充的快捷键是Ctrl+E。

在设置菜单栏里找到如下路径,路径如下:Preferences>PackageSettings>Emmet>KeyBindings-User:

在出现的界面中粘贴如下配置信息,保存。

[

{

"keys": [

"tab"

],

"args": {

"action": "expand_abbreviation"

},

"command": "run_emmet_action",

"context": [

{

"key": "emmet_action_enabled.expand_abbreviation"

}

]

}

]

检查快捷键Tab是不是可以使用了,如果不可以重启一下sublime试试。

快捷键创建文件:

点击file>New File 创建一个新文件,点击右下角可以选择文件类型:

以创建一个html为例:

sublime的使用——前端开发入门篇

选择html类型

在页面中输入!,按Tab键生成文本:

sublime的使用——前端开发入门篇

输入英文的!

sublime的使用——前端开发入门篇

按Tab键生成html

Ctr+S保存,一个html文件创建成功了。

以上便是小编总结的sublime的安装和使用,后续我们会进入前端体系的学习,从html,css,javscript一点点入门到进阶。

想学习前端或者进阶的童靴们都可以关注奇点资源网~~



最近热门

组织机构代码 15006347-1| 去你妈逼| 奇点资源网与你同在!| APP软件著作权证书| 举报邮箱:qq@svip88.cn | 法律顾问:盈科律师事务所 |站长统计

晋ICP备15006347号-1| YzmCMS官方博客 | YzmCMS官方网站| YzmCMS官方论坛| 本程序由YZMCMS强力驱动支持

全力做好网上治安秩序打击整治专项行动,打造打造最优绿色资源下载基地 www.svip88.cn 版权所有