热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

前端常用编辑器SublimeText3用法及常用插件的安装使用(包含MarkDown语法及插件)

总有一款编辑器让你见到它,就舍不得离开它,很显然,在我第一次使用sublimetext之后,就再也不想使用其他编辑器了!简洁,酷炫,各种小插件的搭配使用(方便)!

        总有一款编辑器让你见到它,就舍不得离开它,很显然,在我第一次使用sublime text之后,就再也不想使用其他编辑器了!简洁,酷炫,各种小插件的搭配使用(方便)!

        所以,如果没有使用过的,不妨一试!点击下载

        当然,仅仅只是单纯的使用它是没有你想象中的方便的,还得搭配前端使用的各种小插件,下面是如何安装,删除,更新插件的步骤:

        安装Sublime text 3插件很方便,直接下载插件的安装包解压缩到Packages目录,然后打开Sublime text3(preferences->packages),下面主要介绍如何通过Package Control组件安装、删除及更新插件!

        1. 打开Sublime Text3 ,按Ctrl+`(和qq输入法快捷切换冲突,可以修改qq的输入法切换热键)

                在编辑器底端可以看到输入框,如下:


                输入的内容请点击该链接进入复制,如下图:


                输入内容回车请等待编辑器最低端安装提示,完毕之后重启!

                正在安装:


                安装完毕:


        2. 重启Sublime Text 3,查看Perferences->package settings下面是否有package control这一项,如果有,则安装成功

       3. 接下来就是安装插件了,按下Ctrl+Shift+P调出命令面板,输入install(IP) 选则列表中的 Install Package 选项并回车,稍微等待几秒,然后在出现的列表中搜索想要安装的插件回车即可



        4. 如果想要删除插件,Ctrl+Shift+P调出命令面板,输入remove,调出Remove Package选项并回车,选择要删除的插件即可,当然,更新插件,upgrade packages,通过简单的几个命令就可以方便的管理我们的插件了!


插件篇

Alignment (代码对齐)

一个非常简单和易于使用的插件,使你的代码组织和美观。当您重温代码时候非常有用。

使用方法:选中要调整的行,然后按 Ctrl + alt + a (需要注意的是,在这里会和qq的热键冲突)所以,需要在编辑器里面设置自己的快捷键。Perferences->package settings->Alignment->Key Bindings - User

输入

[

	{ "keys": ["ctrl+alt+z"], "command": "alignment" }
]


Emmet

Emmet绝对的节省时间。您可以轻松快速地编写HTML。Emmet指南

使用方法: Tab就行



Colorpicker

使用方法: 一系列快捷键冲突 ctrl + shift + c ,因为和其他几个默认的编辑器快捷键冲突,实在不方便修改,所以还是直接在ctrl+shift+p 控制面板中输入color picker调用吧


DocBlockr

一个真正简单的方式来轻松地创建许多语言包括Javascript,PHP和CoffeeScript的文档块。只要在函数的上面输入/**,按Tab就可以了。DocBlockr会观察函数需要的变量名和类型,并创建文档块。




Pretty Json

json 格式化插件,使用方法:ctrl + shift + j


JsFormat

JS格式化插件

使用方法:即可在JS文件中通过鼠标右键->JsFormat或键盘快捷键 ctrl + alt + f 对JS进行格式化


TrailingSpaces

高亮显示多余的空格和Tab



Terminal

在sublime中打开命令行窗口

使用方法: 右键 Open terminal here 或者 快捷键 ctrl + shift + t


CssComb

为CSS属性进行排序和格式化,官网地址

此插件依赖于Node.js , 下载地址

安装node后,即可使用CssComb插件

使用方法: 菜单Tools -> Run CSScomb 或者右键,或者快捷键 ctrl + shift + c

  


Autoprefixer

CSS私有前缀自动补全插件,依赖Node.js

使用方法:在输入css3属性后(冒号前)按Tab键,按一下按不动再按一下



MarkDown Editing

支持MarkDown语法高亮,用来编写github上面readme.md这种文件,排版相当好用

MarkDown语法


MarkDown Preview

按Ctrl + b 会生成html网页,可以预览readme.md文件,在最前面添加[TOC]可以自动生成目录



html5

支持html5 规范的插件,使用方法:输入html5,按Tab键



jQuery

支持jQuery规范的插件包




javaSciptNext - ES6 Syntax

ECMAScript 6中的新功能,如模块,简洁方法,箭头函数,类,生成器和访问器(ES5)。


BracketHighlighter

匹配括号,引号等符号内的范围




SideBarEnhancements

右键菜单增强插件

在安装该插件前,在Sublime Text左侧FOLDERS栏中点击右键

只有寥寥几个简单的功能


通过Package Control安装SideBarEnhancements插件后


可以看到,文件夹栏右键菜单马上增强不少

安装此插件后配置方法为

重启Sublime text 3后

打开任意一个JS文件,按ctrl+shift+space

这时候第一次运行会去下载对应的类库

可以按ctrl+`(也就是调出控制台)来看进度


参考链接:

http://www.css88.com/archives/5858

http://www.cnblogs.com/hykun/p/sublimeText3.html

https://www.jianshu.com/p/aa30cc25c91b


推荐阅读
author-avatar
白羊黔中草
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有