Sublime的使用以及常见问题的解决

Sublime的使用以及常见问题的解决

1. Sublime安装

第一步，安装软件，下一步即可
第二步，安装插件
    1.  Ctrl+`打开sublime Text控制台
    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.  重启后，Perferences->中看到package control这一项，则安装成功。

2. Sublime基本概念

标签，Tab
编辑区，Editing Area
侧栏，Side Bar
缩略图，Minimap
命令板，Command Palette 重点，可以脱离鼠标
控制台，Console，快捷键Ctrl+`,可以直接对sublime进行配置
状态栏，Status Bar 显示当前行号，当前语言和Tab格式等信息

3. Sublime 配置

Preferences -> Settings - User
{
    "color_scheme"        : "Packages/Color Scheme - Default/Monokai.tmTheme",    // theme
    "draw_minimap_border" : true,                                                 // 右侧缩略图边框
    "font_face"           : "YaHei Consolas Hybrid",                              // 字体设置
    "font_size"           : 13,                                                   // 字体大小
    "highlight_line"      : true,                                                 // 当前行标亮
    "ignored_packages"    : ["Toggle Css Format"],                                // 开启vim模式
    "save_on_focus_lost"  : true,                                                 // 失去焦点后保存
    "auto_complete"       : false,                                                // 失去焦点后保存
    "word_wrap"           : false,                                                // 强制不换行
    "word_separators"     : "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?",                 // 双击选中中划线
    "update_check"        : false                                                 // 关闭自动更新
}

4. 快捷键

Ctrl + Enter           切换下一行
Ctrl + Shift + Enter   上面增删一行
Ctrl + 方向键           逐词移动
Ctrl + Shift + 方向键   上下行切换
Ctrl  + D               选择内容，可以快速增删
Ctrl + K                删除后面所有
Ctrl + G                跳转到指定行
Ctrl + Shift + N        新建创口
Ctrl + S                保存
Alt + Shift + 数字      分屏
Ctrl + 数字             跳转屏幕

5. 插件安装

Ctrl + Shift + p 输入install package
输入插件名称，即可安装

1.  Emmet               编码快捷键，前端必备
2.  JSFormat            功能：Javascript的代码格式化插件  快捷键，Ctrl + Alt + F
3.  Less                LESS高亮插件
4.  Alignment           = 号对齐，默认快捷键，Ctrl + Alt + A（和QQ等冲突）
5.  Bracket Highlighter 功能：代码匹配
6.  jQuery              功能：jQ函数提示
7.  ColorPicker         功能：调色板，快捷键Windows: ctrl+shift+c、、、、、
8.  ConvertToUTF8       功能：文件转码成utf-8
9.  AutoFileName        功能：快捷输入文件名使用
                            输入”/”即可看到相对于本项目文件夹的其他文件
10. Nodejs              功能：node代码提示
11. CSS3
12. HTML5
13. Ctags               函数跳转    快捷键 alt+点击函数名称
14. Sublime CodeIntel   =代码自动提示
15. SideBarEnhancements 侧边栏增强插件
16. SublimeServer       功能：使sublime成为静态WEB服务器
    查看，工具=>SublimeServer=>Settings修改配置
    点击Start SublimeServer启动服务器
    .html右击，选择View in SublimeSever通过服务器打开浏览器
17. html-css-js prettifiy js html css 格式化插件 快捷键 快捷键：ctrl+shift+h

6. 插件删除

Sublime Text”->“Prefenrences”->“Package Control”
remove package选择对应的插件即可

7. 浏览器快捷键设置

Preferences=>key Bindinds
F1，Firefox
F2，Chrome
F3，IE
F4，Safari
将以下代码复制粘贴即可
[
        //firefox
    {
        "keys": ["f1"],
        "command": "side_bar_files_open_with",
        "args": {
            "paths": [],
            "application": "D:\\firefox\\firefox.exe",
            "extensions": ".*"
        }
    },
    //chorme
    {
        "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": ".*"
        }
    },
    //safari
    {
        "keys": ["f4"],
        "command": "side_bar_files_open_with",
        "args": {
            "paths": [],
            "application": "C:\\Program Files (x86)\\Safari\\Safari.exe",
            "extensions": ".*"
        }
    }
]

8. 定制快捷键-和浏览器设置一样

Prefenrences => key Bindings
{ "keys": ["ctrl+m"], "command": "duplicate_line" } // Ctrl+m 将当前行复制到下一行

9. 创建新的代码片段及快捷键

工具=>新建代码片段
工具=>插件开发=>新建代码片段
<snippet>
    <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <!-- <tabTrigger>hello</tabTrigger> -->
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

Hello, ${1:this} is a ${2:snippet}.
代表新的代码片段,将自己的代码块覆盖前面的代码即可

<!-- <tabTrigger>hello</tabTrigger> -->
新代码片段的快捷键,取消注释,hello就是快键键

测试代码,以下代码 按 cl就是出现console.log()的提示,赶快试试吧^_^
<snippet>
    <content><![CDATA[
console.log();
    ]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>cl</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

建议保存在一个新的文件夹内，比如snippet

9.!+tab 失效问题

在菜单栏选择Preferences–>PackageSettings–>Emmet–>KeyBindings–>User，将以下信息粘贴进去即可。
[{“keys”: [“tab”], “args”: {“action”: “expand_abbreviation”}, “command”: “run_emmet_action”, “context”: [{“key”: “emmet_action_enabled.expand_abbreviation”}]}]

如果有需要下载已配置好的sublime，https://download.csdn.net/download/jianyan34/10637796

---

以上是个人在学习中，暂时总结的一些笔记。
如有错误，请多请教。