zoukankan      html  css  js  c++  java
  • sublime前端编辑器入门与个人使用经验分享

          Sublime Text(以下简称sublime)是一款很好用的代码编辑器,小巧且很灵敏,几乎可以编写大部分主流的计算机语言代码,更是堪称前端代码编辑神器。

          你百度一下会发现许多sublime的安装和使用方法,但是个人觉得有一部分是相互转载的,而且叙述不是很清楚,所以我写了这篇sublime入门级的博客分享,也附上我的使用经验,希望能对那些sublime使用还不熟悉的小伙伴们有一丢丢的帮助吧(文章结尾将附上统一的链接与资源)。

    一、下载sublime

    1、在百度搜索"sublime"找到英文官网,进入下载页面
    2、或者直接进入官网,找到下载页面download即可。(PS:我目前使用的是Sublime Text3 build 8083版本,本文也将用这个版本做演示)

    二、安装sublime

    这个步骤就不赘述了,一路next,大家都会的。

    三、安装package control

    1.sublime本身是非常小巧的,以至于刚刚安装好之后,你会发现它打开以后是黑不溜秋的,虽然它也可以写代码,但是书写起来效率就比较低了哦。
    刚刚安装截图
    2.给个机会让sublime开始变得强大:在百度上搜索package control,首位的英文网站就是官网啦。进入后找到Installation,点击其中的链接,下载到你的电脑(文末提供下载文件)。3.打开sublime,在菜单栏找到Preferences -> Browse Packages,点击浏览文件夹,找到Sublime Text 3 -> Installed Packages文件夹,然后把你下载的package control文件放在里面就行了。
    4.如何知道是否操作正确?很简单,关闭sublime,再重新打开,菜单栏点击Preferences,如果里面有Package Control,说明就好了哦。

    四、安装插件的方法

    sublime需要插件去扩展它,才让让它变得强大好用,所以我们要安装一些前端常用的插件,安装方法是统一的:
    1.菜单栏找到Preferences -> Package Control,或者快捷键ctrl+shift+p(个人喜欢使用快捷键,这个控制台以后需要经常用到哦)
    2.在出现的控制台中输入install,选择install Package,回车。
    install
    3.sublime底部出现正在搜索,请等待一会
    正在搜索
    4.搜索好了会弹出下面这样的框子
    搜索完成
    5.输入你需要安装的插件名称,回车就能安装啦
    6.安装成功后sublime底部会有提示是否成功
    成功安装

    五、安装常用插件

    这里只提供本人推荐插件名称,安装方法统一使用上文中提到的方法,下面不再赘述。
    先按部就班的安装,后文会介绍如何使用

    1.Alignment -> 对齐插件
    2.AutoCompleteJS -> javascript语法提示插件
    3.AutoFileName -> 提示路径和文件名称插件
    4.BracketHighlighter -> 标签开始和结束高亮提示插件
    5.ConvertToUTF8 -> 转换UTF8格式插件
    6.DocBlockr -> 快速添加文本注释插件
    7.Emmet -> 快速书写html插件
    8.HTML5 -> html5属性提示插件
    9.jQuery -> jquery语法提示插件
    10.JsFormat -> javascript格式化对齐插件
    11.Tag -> html格式化对齐插件
    12.View In Browser -> 浏览器快捷键预览插件

    六、让sublime强大给你看!

    请确保安装了上文中的全部插件,然后再打开你的sublime,同步练习下文内容,让你写代码事半功倍!
    1.首先开启侧边栏
    菜单栏找到View->Side Bar->Show Open Files,点击搞定。
    以后再想显示或者隐藏侧边栏,直接快捷键ctrl+k+b,帮助你看到文件目录结构。
    侧边栏截图
    2.写一个js文件,当你在里面输入一些js常用词的时候,还没有等你输入完,就出来提示咯(AutoCompleteJS插件功劳)
    js提示
    3.写一个html文件,在标签中的src属性会自动提示图片路径,上下选择,敲敲回车键就能代替你输入长长的路径和名称咯,对css文件中的backgroud-images:url(../)同样适用(AutoFileName插件功劳)
    文件路径提示
    4.不管是html,css或是js文件,点击一个标签的起始,高亮显示标签的结尾哦,妈妈再也不用担心你找不到标签在哪里闭合了(BracketHighlighter插件功劳)
    html
    5.你还在为js文件的注释犯愁吗?好多*/需要打呢,现在你只需要在就是文件的任何地方输入/*或者/**然后敲回车,剩下自己看吧(DocBlockr插件功劳)
    js代码注释
    6.Emmet这个插件可强大了,场景设想:如果你需要一个表格下有20行10列,一个个手敲,或者不断的复制粘贴吗?不需要!在html文件中输入table>tr*20>td*10按下Tab键,duang!
    更多的快捷写法,请参阅官网
    7.jquery的代码提示,就依靠插件jQuery咯,试试看
    jquery提示
    8.请你找一个jquery任意版本的压缩文件。类似jquery-1.8.3.min.js这样的,然后打开这个文件,在package control控制台输入format,回车,你就知道JsFormat这个插件是干嘛的了,也可以使用快捷键ctrl+alt+f直接格式化js文件,但是这个快捷键容易和其他软件的快捷键冲突,建议还是通过控制台输入format方法格式化。
    js格式化
    9.假如你有强迫症,html也需要格式化对齐怎么办?在html文件里面打开控制台,输入format,回车就ok了。(Tag插件功劳)
    html格式化
    10.这里隆重介绍一下View In Browser插件。以前用DW写代码,里面可以用快捷键在浏览器预览,但是sublime不能快捷键预览,有了这个插件就能让你实现这个梦想了,但是需要配置一下。
    第一步:菜单栏Preferences -> Package Settings -> View In Browser -> Settings——Default点击打开,然后复制一下里面的全部内容。
    第二步:菜单栏Preferences -> Package Settings -> View In Browser -> Settings——User点击打开,里面默认是空的,不要紧张,把刚刚复制的内容粘贴进去保存就好。
    第三步:在文件中找到下图中的内容,然后修改对应的浏览器的路径,路径是你自己才知道的哦(一般IE的路径不需要修改,是系统默认的)。
    配置前
    修改后类似这样
    配置后
    第四步:快捷键预览!对应的快捷键分别是
    ctrl+alt+f -> 火狐
    ctrl+alt+i -> IE
    ctrl+alt+c -> 谷歌

    七、推荐的快捷键操作

    下面是我推荐的快捷键操作,对你写代码脱离鼠标操作有比较大的帮助哦,但是需要你不断的练习巩固记忆,不然容易记不得。
    1.在你知道文件名的情况下,不需要在目录里找,快捷键ctrl+p输入你需要的文件名,回车就出来了。
    快速查找文件
    2.想去到文件中的某一行,可以使用快捷键ctrl+g,输入行号,然后回车。
    跳转某行
    3.有时候,当你在代码的中间部分书写,突然需要去这一行代码的开头或者是结尾,使用homeend键就可以了。 突然想换行书写,不必去行尾回车,快捷键ctrl+回车就行了。
    突然想在上一行插入空格添加一段代码,使用快捷键ctrl+shift+回车吧。
    4.整行代码或者文字注释,在这一行的任何地方使用快捷键ctrl+/,如需要对一行中某一部分内容注释,选中内容后使用快捷键即可。取消注释的快捷键也是同样的。
    5.标签的折叠,光标在需要折叠的标签内任何地方,使用快捷键ctrl+shift+[
    折叠标签的展开,光标在需要折叠的标签内任何地方,使用快捷键ctrl+shift+]
    6.打开的文件比较多,需要在文件之间来回切换,使用快捷键alt+1``alt+2``alt+3这样的方式快速切换。
    7.快捷键shift+f11,切换全屏免打扰模式编辑代码,f11就只是切换全屏模式而已。
    8.快捷键shift+alt+数字,切换分屏显示代码,比如下图分别是shift+alt+5shift+alt+8的效果,其他的自己探索哦,默认是shift+alt+1
    4屏幕显示
    2屏幕显示
    9.保存或关闭全部文件,打开控制台,输入file,选择"save all"或"close all"
    个人感觉常用且方便的就快捷键就这么些,如有遗漏,以后再补充。其他例如复制、粘贴、撤销的操作和操作系统的快捷键一样,此处不再赘述。

    八、文中资源下载链接

    点击这里

  • 相关阅读:
    姐姐的vue(1)
    LeetCode 64. Minimum Path Sum 20170515
    LeetCode 56. 56. Merge Intervals 20170508
    LeetCode 26. Remove Duplicates from Sorted Array
    LeetCode 24. Swap Nodes in Pairs 20170424
    LeetCode 19. Remove Nth Node From End of List 20170417
    LeetCode No.9 Palindrome Number 20170410
    LeetCode No.8. String to Integer (atoi) 2017/4/10(补上一周)
    LeetCode No.7 Reverse Integer 2017/3/27
    LeetCode No.4 Median of Two Sorted Arrays 20170319
  • 原文地址:https://www.cnblogs.com/chaozhang/p/4664428.html
Copyright © 2011-2022 走看看