Package Control组件在线安装
  1. 按Ctrl+`调出console(注:避免热键冲突)
  2. 粘贴以下代码到命令行并回车:
import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
3. 重启Sublime Text 3。
4. 如果在Perferences->package settings中看到package control这一项,则安装成功。
用Package Control安装插件的方法:
  1. 按下Ctrl+Shift+P调出命令面板
  2. 输入install 调出 Install Package 选项并回车,然后在列表中选中要安装的插件

1. ChineseLocalizations
一种让sublime汉化的插件
2. Emmet(原名 Zen Coding)
一种快速编写html/css的方法
3. BracketHighlighter
类似于代码匹配,可以匹配括号,引号等符号内的范围。
4.Autoprefixer
CSS3 私有前缀自动补全插件,显然也很有用哇
5.HTML-CSS-JS Prettify
使用说明:快速格式化html css js
快捷键:ctrl+shift+h
6.Colorpicker
使用一个取色器改变颜色
快捷键:ctrl+shift+c
7.SyncedSidebarBg
自动同步侧边栏底色为编辑窗口底色

8.sideBarEbhancements加强侧边栏

SideBarEnhancements的GitHub地址为:https://github.com/sidebarenhancements-org/sidebarenhancements ,详细的英文介绍请看这里。

  • SideBarEnhancements安装

    我这里只讲解命令行安装,因为根本没有必要进行手动安装,如果命令行安装有问题,那么就换一个网络环境,实在不行用4G的热点也是可以的,反正至今我没有遇到过命令行安装行不通的呢!

    1.用快捷键shift + command + P调出命令面板,输入install,并点击Intstall Package选项。(如图_2_1)

    图_2_1

    2.输入SideBarEnhancements,并点击SideBarEnhancements选项。(如图_2_2)

    图_2_2

    3.安装成功后重启Sublime,菜单Sublime Text → Preferences → Package Settings (放在),发现多了一项Side Bar,说明已经安装SideBarEnhancements成功。(如图_2_3)

    图_2_3

  • SideBarEnhancements配置

    右键Side Bar中的文件,此时和之前普通的Side Bar比,新增了好多功能(如图_3_1),有的功能的实现很简单不需要配置,但有的功能的实现需要配置。下面我针对一个对于Web前段工程师很重要的功能(快速预览)进行配置。

    图_3_1

    点击Open/Run选项。则只打开了该文件如图;若Open In Browser → 右侧任意一栏(点击),则在浏览器中预览。(如图_3_2)

    图_3_2

    • 设置默认预览浏览器,文件(右键单击) → Open In Browser → Default(点击)时,会以默认的浏览器打开,如果我们想自己设置默认浏览器,我们应该进行如下配置:
      ①.菜单Sublime Text → Preferences → Package Settings → Side Bar → Settings User(点击),则打开了Side Bar.sublime-settings文件。
      ②.复制下面的代码,粘贴到Side Bar.sublime-settings中,并保存。

      {
      "default_browser": "firefox" //one of this list: firefox, aurora, chrome, canary, chromium, opera, safari
      }
    • 设置浏览器预览的服务器路径(在安装过服务器环境的基础上),当我们需要以服务器路径预览网页时,需要进行如下配置。
      ①.文件(右键单击) → Project → Edit Preview URLS(点击),则打开SideBarEnhancement.json文件。(如图3_3)
      ②.复制下面的代码,粘贴到SideBarEnhancement.json中,并保存。

      *服务器入口的路径、服务器地址因人而异,不要照搬。另外,json文件中代码不能加注释。

      {
      "/Applications/MAMP/htdocs/":{"url_testing": "http://localhost:80/","url_production": "http://www.jianshu.com/"
      }
      }

      图3_3

    • 设置用快捷键进行快速预览,当我们需要快速预览网页时,需要进行如下配置。
      ①.菜单Sublime Text → Preferences → Key Bindings(点击),则打开了Defult(OSX).sublime-keymap — User文件。
      ②.复制下面的代码,粘贴到Defult(OSX).sublime-keymap — User的中括号中,并保存。(如图3_4)

      { "keys": ["control+1"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "/Applications/Safari.app"} },
      { "keys": ["control+2"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "/Applications/Firefox.app"} },
      { "keys": ["control+3"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "/Applications/Google Chrome.app"} },
      { "keys": ["command+1"], "command": "side_bar_open_in_browser", "args": { "paths": [], "type": "testing", "browser": "safari"}  },
      { "keys": ["command+2"], "command": "side_bar_open_in_browser", "args": { "paths": [], "type": "testing", "browser": "firefox"}  },
      { "keys": ["command+3"], "command": "side_bar_open_in_browser", "args": { "paths": [], "type": "testing", "browser": "chrome"}  },

      *control+1/2/3分别对应Safari,Firefox,Chrome浏览器,并只打开文件,其中 "application"对应的必须是应用的的路径。

      *command+1/2/3,同样也是分别对应Safari,Firefox,Chrome浏览器,但是是浏览器预览。

      图_3_4

原文地址:http://whosmall.com/?post=370

http://blog.csdn.net/littlesmallless/article/details/69488655

http://www.cnblogs.com/liuchaoH/p/6370008.html

转载于:https://www.cnblogs.com/ljt-14/p/7729061.html

关于Sublime text3 配置及插件整理相关推荐

  1. Sublime Text3配置Lua运行环境

    Sublime Text3配置Lua运行环境 前言 要问现在哪个编译器最能扛得住潮流,要数Sublime Text3了,由于它的轻量,插件丰富,美观,造就了一大批粉丝(本菜鸡也是哦) 在以前的工作中使 ...

  2. python安装插件报错原因_Sublime Text3 python自动补全问题——Sublime Text3安装Anaconda插件...

    学习python的时候 在编辑器的选择上会有很多选择,我最终还是选择了sublime text3. 相对于其他编辑器,sublime text有以下特性: 插件多,类似GoSublime,Emmet信 ...

  3. Sublime Text3 配置LaTex编辑器

    Sublime Text3 配置LaTex编辑器 所用到的工具: Sublime Text3 https://www.sublimetext.com/ package control https:// ...

  4. sublime text3 使用SVN插件

    Simon在项目中经常使用SVN,每次都要切换提交,很麻烦,有了这个SVN插件就很方便了,使用快捷方式提交,更新. 安装: Ctrl + Shift + P 调用出Sublime Text的包管理工具 ...

  5. 【Python】Mac下Sublime Text3配置Python3开发环境

    我采用的第二种方案 1 [Python]Mac下Sublime Text3配置Python3开发环境 https://blog.csdn.net/qq_33304418/article/details ...

  6. Sublime Text3 JSON格式化插件JsFromat

     Sublime Text3 JSON格式化插件JsFromat,需完成以下步骤: 1.在Sublime Text3菜单栏里点击Preferences: 2.然后点击Browse Packages; ...

  7. sublime text3安装emmet插件

    sublime text3安装emmet插件 很多人输入html:5然后按住Tab键并没有生成完整结构,这是因为没有安装emmet插件 sublime text3安装包(来自官网) 链接:https: ...

  8. sublime text3安装python插件和flake8_Sublime Text环境配置(Python、Latex、Markdown)及常见问题汇总...

    目录 安装 基本设置 万包之祖 Package Control Python 环境配置 Markdown环境配置 Sublime问题汇总 macOS+Latex环境配置 安装 从官方网站地址下载安装即 ...

  9. sublime text3安装以及插件配置教程

    http://blog.csdn.net/feizaosyuacm/article/details/54729891 本文是安装的Sublime Text3是portable version(可移动版 ...

最新文章

  1. 线上学python哪家好-广州学Python学校哪家好
  2. SVN中各种符号箭头含义
  3. centos7 pe系统安装_老毛桃WinPE以ISO镜像模式安装CentOS7
  4. ExtJs window(一)使用API以及window常用属性和方法
  5. java in action,java 7 in action
  6. EXTRONICS推出IRFID500便携式UHF RFID读写器
  7. html报错页面,多页面配置生成的html报错
  8. andriod搭建自己的轮询框架
  9. 一个简单的登录注册页面html代码
  10. js pdf文件 如何调用打印机打印_js直接打印pdf文件内容
  11. 从零开始学习Java设计模式 | 设计模式入门篇:教程导读
  12. 隐藏百度地图logo
  13. Python爬取煎蛋网多页的图片
  14. linux下中文输入法的安装(解决菜单栏输入法图标消失问题)
  15. 安装 Windows Server 2003 IIS6.0 详解(图)
  16. 1.jQuery入门
  17. PMM 监控原理以及部署
  18. 环境变量的作用,为什么要设置环境变量
  19. Hipo-iPod 处理对象
  20. echarts自定义柱状图柱体形状

热门文章

  1. 【开发技术】2万字详细介绍Docker 和 web项目的部署监控,docker部署,拉取kafana,prometheus镜像监控
  2. ACL 2021 | 基于词依存信息类型映射记忆神经网络的关系抽取
  3. uniapp兼容iPhoneX头部状态栏(刘海屏)和底部小横条
  4. 中兴ZXQ10排队机出现问题了...
  5. call和calling的用法_call和called的区别和用法
  6. mysql获取后两位_Mysql 截取保留小数点后两位内容
  7. python gui如何输入图片_python tkinter GUI绘制,以及点击更新显示图片代码
  8. 日语输入法键盘假名对应表
  9. 关于Git 和Github的学习
  10. centos(11)-ps进程管理