sublime text3 前端插件介绍

简介: Emmet插件 Emmet插件可以说是使用Sublime Text进行前端开发必不可少的插件 它让编写HTML代码变得极其简单高效 基本用法:输入标签简写形式,然后按Tab键 关于Emmet的更多介绍,请查看官方文档 这份速查表,可以帮你快速记忆简写形式 JsFormat插件 这是...

Emmet插件

Emmet插件可以说是使用Sublime Text进行前端开发必不可少的插件

它让编写HTML代码变得极其简单高效

Emmet示例

基本用法:输入标签简写形式,然后按Tab键

关于Emmet的更多介绍,请查看官方文档

这份速查表,可以帮你快速记忆简写形式

JsFormat插件

这是一款将JS格式化的插件

同样使用Package Control安装JsFormat插件后

即可在JS文件中通过鼠标右键->JsFormat或键盘快捷键Ctrl+Alt+F对JS进行格式化

SideBarEnhancements插件

SideBarEnhancements是一款很实用的右键菜单增强插件

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

更强大的是,该插件还能让我们自定义快捷键呼出某个浏览器以预览页面

这样就不用到项目目录下寻找和拖动到特定浏览器中预览了

安装此插件后

点击菜单栏的preferences->package setting->side bar->Key Building-User

键入以下代码

[    { "keys": ["ctrl+shift+c"], "command": "copy_path" },    //firefox    { "keys": ["f1"], "command": "side_bar_files_open_with",             "args": {                "paths": [],                "application": "F://Firefox Developer Edition//firefox.exe",                "extensions":".*" //匹配任何文件类型            }    },    //chrome    { "keys": ["f2"], "command": "side_bar_files_open_with",            "args": {                "paths": [],                "application": "C://Program Files (x86)//Google//Chrome//Application//chrome.exe",                "extensions":".*"            }     },    //ie    { "keys": ["f3"], "command": "side_bar_files_open_with",             "args": {                "paths": [],                "application": "C://Program Files//Internet Explorer//iexplore.exe",                "extensions":".*"            }    }]

这里设置其按Ctrl+Shift+C复制文件路径

分别按F1、F2和F3即可分别在firefox,chrome,IE浏览器预览当前页面效果

当然,你也可以自己定义喜欢的快捷键

但要注意代码中的浏览器路径要以自己电脑里的文件路径为准

TrailingSpaces插件

有时候,在代码结尾打多了几个空格或Tab

并没有任何显示效果

TrailingSpaces这款插件能高亮显示多余的空格和Tab

Tag插件

这是HTML/XML标签缩进、补全、排版和校验工具

Tag插件使用方式

安装该插件后,可以如上图方式使用Tag插件对HTML/XML进行自动排版等操作

该操作快捷方式 ctrl+ alt + f;

Terminal插件

编程过程中,我们经常需要使用到命令行窗口

Terminal插件可以允许在Sublime Text 3中打开cmd命令窗口

安装好该插件后

即可使用快捷键Ctrl+Shift+T呼出命令行窗口

SublimeCodeIntel插件

这是一款代码提示插件,支持多种编程语言

该插件安装时间可能相对较长

CssComb插件

CssComb是为CSS属性进行排序和格式化插件 [官网]

使用Package Control安装CssComb插件后,你可能发现它并不能运行

它依赖于Node.js [官网]

Autoprefixer插件

这是一款CSS3私有前缀自动补全插件

该插件使用CanIUse资料库,能精准判断哪些属性需要什么前缀

与CssComb插件一样,该插件也需要系统已安装Node.js环境

使用方法:在输入CSS3属性后(冒号前)按Tab键,如下图示

其他:

 

plaintasks插件:

  主要是对文档类的编辑,写文档说明,做计划日志,工作记录……以及各种备忘录等都是很好的编辑文档,

IMESupport:

  还在纠结sublime里输入汉字时输入框不跟随光标的问题吗?有了这个,就都不是问题了。可以解决sublime里输入法不跟随光标走的问题

CSS Format:

  css代码格式工具,具体功能有:

  • Expanded:

    body {
        background: #fff; font: 12px/2em Arial, Helvetica, sans-serif; }
  • Expanded (Break Selectors):

    body {
        background: #fff; font: 12px/2em Arial, Helvetica, sans-serif; } ol, ul, li { margin: 0; padding: 0; }
  • Compact:

    body { background: #fff; font: 12px/2em Arial, Helvetica, sans-serif; }
  • Compact (No Spaces):

    body{background:#fff;font:12px/2em Arial,Helvetica,sans-serif;}
  • Compact (Break Selectors):

    ol, ul, li { margin: 0; padding: 0; } a { color: rgba(65, 131, 196, 0.8); } 
  • Compact (Break Selectors, No Spaces):

    body{background:#fff;font:12px/2em Arial,Helvetica,sans-serif;} ol, ul, li{margin:0;padding:0;}
  • Compressed:

    body{background:#fff;font:12px/2em Arial,Helvetica,sans-serif}ol,ul,li{margin:0;padding:0}a{color:rgba(65,131,196,0.8)}

 

Autoprefixer:

  详细介绍:http://www.w3cplus.com/blog/tags/470.html

  使用方法:按 ctrl+shift+P调出搜索框,输入autoPrefixer 点击选择!

  Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里,使用Can I Use的数据来决定哪些前缀是需要的。

  所有你需要做的就是把它添加到你的资源构建工具(例如 Grunt)并且可以完全忘记有CSS前缀这东西。尽管按照最新的W3C规范来正常书写你的CSS而不需要浏览器前缀。像这样:

1
2
3
a{
      transition :transform 1 s
}

  Autoprefixer使用一个数据库根据当前浏览器的普及度以及属性支持提供给你前缀:

1
2
3
4
5
a{
      -webkit-transition :-webkit-transform 1 s;
      transition :-ms-transform 1 s;
      transition :transform 1 s
}

 

 

.md文件编辑:

  Markdown Editing 和 Markdown Preview

  自定义快捷键

    如果我们想要直接在浏览器中预览效果的话,可以自定义快捷键:点击 Preferences --> 选择 Key Bindings User,输入:

    "keys": ["alt+m"], "command": "markdown_preview", "args": { "target": "browser"} 

     保存后,直接输入快捷键:Alt + M 就可以直接在浏览器中预览生成的HTML文件了。

  不知道md文件编辑格式请自行搜索学习。

  markdown(md)是为那些需要经常码字或者进行文字排版的、对码字手速和排版顺畅度有要求的人群设计的,他们希望用键盘把文字内容啪啪啪地打出来后就已经排版好了,最好从头到尾都不要使用鼠标。
  这些人包括经常需要写文档的码农、博客写手、网站小编、出版业人士等等

  

 

Package Control:安装SublimeText后必须安装的东西
Trmmer:会自动删除这些不必要的空格 DocBlockr:对代码建立文档 Snippets:快速书写代码
Soda:一个流行的主题,包含代码着色、标签、图标 
Sublime Prefixr:CSS3 私有前缀自动补全插件 JS Format:一个JS代码格式化插件。
SublimeEnhancements:边栏菜单带来扩充的功能 SideBarEnhancements:一个左边栏增强 SublimeLinter:行内高亮语法 FileDiffs:两个不同文件的差异 
jQuery:jQuery插件 

ColorPicker:调色板
SASS Build:CSS的预处理器
FTPSync:免费和易用的FTP工具 Git:git的支持插件

SyncedSidebarBg:自动同步侧边栏底色为编辑窗口底色;PS:有时改完后侧边栏颜色没变化,不知什么原因,打开包控制,然后列一下已安装包就刷新了

sublimeLinter:是少数几个能在sublime text 3工作的代码检查插件

目录
相关文章
|
JavaScript
Sublime Text3 直接运行js调试控制台
Sublime Text3 直接运行js调试控制台
215 0
sublime text3 快速生成方法注释
sublime text3 快速生成方法注释
150 0
|
9月前
Sublime Text3安装插件报错:There are no packages available for installation
Sublime Text3安装插件报错:There are no packages available for installation
116 0
|
IDE Go 开发工具
Sublime Text3搭建go运行环境
Sublime Text3搭建go运行环境
250 1
|
Python
解决 sublime text3 运行python文件无法input的问题
解决 sublime text3 运行python文件无法input的问题
107 0
|
Java Shell Linux
搭建Sublime Text3 Java编译运行环境
搭建Sublime Text3 Java编译运行环境
|
Ubuntu
Ubuntu下sublime text3安装和配置
Ubuntu下sublime text3安装和配置
128 0
|
机器学习/深度学习 移动开发 前端开发
Sublime Text3快捷键大全--正则表达式元字符-详细说明
Sublime Text3快捷键大全--正则表达式元字符-详细说明
315 0
|
SQL
Sublime text3配置切换大小写转换
Sublime text3配置切换大小写转换
296 0

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    详解智能编码在前端研发的创新应用
  • 5
    巧用通义灵码,提升前端研发效率
  • 6
    智能编码在前端研发的创新应用
  • 7
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
  • 10
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    29
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    51
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    93
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    141
  • 6
    详解智能编码在前端研发的创新应用
    96
  • 7
    智能编码在前端研发的创新应用
    83
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    121
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75