JustYeh的前端博客

sublime text备忘录

2017-06-24

IDE

Sublime Text是一款支持代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插件扩展机制,非常值得推荐,下文总结了我使用sublime时经常需要解决的问题,用以备忘。

eclipse快捷键

我早前写过java,所以对eclipse的快捷键比较熟悉,Preferences -> Key bindings - User,将下面的代码写入即可:

[  
 { "keys": ["shift+enter"], "command": "run_macro_file", "args": {"file": "Packages/Default/Add Line.sublime-macro"} },  
 { "keys": ["alt+up"], "command": "swap_line_up" },  
 { "keys": ["alt+down"], "command": "swap_line_down" },  
 { "keys": ["ctrl+alt+j"], "command": "join_lines" },  
 { "keys": ["ctrl+alt+down"], "command": "duplicate_line" },  
 { "keys": ["shift+ctrl+r"], "command": "show_overlay", "args": {"overlay": "goto", "show_files": true} },  
 { "keys": ["ctrl+shift+s"], "command": "save_all" },  
 { "keys": ["ctrl+l"], "command": "show_overlay", "args": {"overlay": "goto", "text": ":"} },  
 { "keys": ["shift+ctrl+f4"], "command": "close_all" },  
 { "keys": ["shift+ctrl+y"], "command": "lower_case" },  
 { "keys": ["shift+ctrl+x"], "command": "upper_case" },  
 { "keys": ["ctrl+d"], "command": "run_macro_file", "args": {"file": "Packages/Default/Delete Line.sublime-macro"} }  
]  

添加到右键菜单

将下面代码,复制到SublimeText3的安装目录,然后重命名为:sublime_addright.reg,然后双击即可。

注意:

  1. 下面的目录仅是一个示例,请将目录替换为你的安装目录。
  2. 如果你的右键菜单显示乱码,请将 sublime_addright.reg 保存为ANSI编码,再依次执行sublime_delright.regsublime_addright.reg脚本文件即可。
Windows Registry Editor Version 5.00
[HKEY_CLASSES_ROOT\*\shell\SublimeText3]
@="用 SublimeText3 打开"
"Icon"="D:\\program\\Sublime Text 3\\sublime_text.exe,0"

[HKEY_CLASSES_ROOT\*\shell\SublimeText3\command]
@="D:\\program\\Sublime Text 3\\sublime_text.exe %1"

[HKEY_CLASSES_ROOT\Directory\shell\SublimeText3]
@="用 SublimeText3 打开"
"Icon"="D:\\program\\Sublime Text 3\\sublime_text.exe,0"

[HKEY_CLASSES_ROOT\Directory\shell\SublimeText3\command]
@="D:\\program\\Sublime Text 3\\sublime_text.exe %1"

下面的是删除右键菜单的代码,复制到SublimeText3的安装目录,然后重命名为:sublime_delright.reg,双击运行就可以了。

Windows Registry Editor Version 5.00
[-HKEY_CLASSES_ROOT\*\shell\SublimeText3]
[-HKEY_CLASSES_ROOT\Directory\shell\SublimeText3]

插件

Emmet

以前的zenCoding,是一种快速的html、css编写方式,默认用tab键。

ChineseLocalizations

汉化插件,支持简体中文、繁体中文、日本語。

ColorPicker

一个颜色选择器插件,快捷键Ctrl / Cmd + Shift + C

Bracket Highlighter

用于匹配括号,引号和html标,对于长代码很有用。

Better Completion

地址:https://github.com/Pleasurazy/Sublime-Better-Completion

支持Javascript、JQuery、Twitter Bootstrap框架、HTML5标签属性提示的插件,是少数支持sublime text 3的后缀提示的插件,HTML5标签提示sublime text 3自带,不过JQuery提示还是很有用处的,也可设置要提示的语言。

安装后将下面的代码粘贴到Package Setting>Sublime Better Completion Setting User内,可以自定义选择:false为不启用,true为启用(默认全部为false)。

{  
  // --------------------  
  // sublime-better-completions-Package (sbc package)  
  // --------------------  
  // API files is contains the *keyword* such as `html`, `jquery`, `myglossary` with lowercase as filename `sbc-api-${filename}.sublime-settings` place in `/packages/User/` (your own) or `/packages/${this-package}/sublime-completions/` (package build-in).  
  // After you enable, disable or added new your own completions, you might need restart your Sublime Text Editor.  
  //  
  // Your own setting file `sbc-setting.sublime-settings` need to place in `/packages/User/` and contains all your api setting property that you want to enable.  
  //  
  // --------------------  
  // APIs Setup  
  // --------------------  
  // `true` means enable it.  
  // `false` means disable it.  
  "completion_active_list": {  
    // build-in completions  
    "css-properties": true,  
    "gruntjs-plugins": true,  
    "html": false,  
    "lodash": true,  
    "javascript": true,  
    "jquery": true,  
    "jquery-sq": true, // Single Quote  
    "php": true,  
    "phpci": true,  
    "sql": true,  
    "twitter-bootstrap": true,  
    "twitter-bootstrap-less-variables": true,  
    "twitter-bootstrap3": true,  
    "underscorejs": true,  
    "react": true,  

    // Your own completions?  
    // ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-angularjs.sublime-settings  
    "my-angularjs": true,  

    // ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-glossary.sublime-settings  
    "my-glossary": true,  

    // ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-html.sublime-settings  
    "my-html": true,  

    // ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-javascript.sublime-settings  
    "my-javascript": false  
  }  
}  

AutoFileName

快速列出你想引用的文件夹里面所有文件的名字,比如想引用test/img/1.png。只需要输入/img,该插件就会自动提示/img下面的所有文件名。

HTML-CSS-JS Prettify

代码格式化插件,需要node支持,所以安装后可能需要设置一下node的目录,默认快捷键ctrl + shift + h

SideBarEnhancements

本是增强侧边栏的插件,这里将教大家如何用来做sublime text 3浏览器预览插件,并可自定义浏览器预览的快捷键,安装此插件,点击工具栏的preferences > package setting > side bar > Key Building-User,粘贴下面的代码。按F1~F2分别在firefox,chrome浏览器预览效果,当然你也可以自己定义喜欢的快捷键,最后注意代码中的浏览器路径要以自己电脑里的文件路径为准。

[   
    //firefox  
    { "keys": ["f1"], "command": "side_bar_files_open_with",  
             "args": {  
                "paths": [],  
                "application": "C:\\Browser\\Mozilla Firefox\\firefox.exe",  
                "extensions":".*" //匹配任何文件类型  
            }  
    },  
    //chrome  
    { "keys": ["f2"], "command": "side_bar_files_open_with",  
            "args": {  
                "paths": [],  
                "application": "C:\\Users\\yeh\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe",  
                "extensions":".*"  
            }  
     }
]  

Vue Syntax Highlight

支持Vue(*.vue)高亮;

Markdown Editing

用于Markdown的编辑。

Markdown Preview

输入Shift + Ctrl + P,输入Markdown Preview,支持在预览和保存。