Sublime Text3--安装使用教程资料整理

Sublime Text快捷键:

 
  • Ctrl + ←/→进行逐词移动,相应的,Ctrl + Shift + ←/→进行逐词选择。
 
  • Ctrl+Shift+P:打开命令面板
  • Ctrl+P:搜索项目中的文件
  • Ctrl+G:跳转到第几行
  • Ctrl+W:关闭当前打开文件
  • Ctrl+Shift+W:关闭所有打开文件
  • Ctrl+Shift+V:粘贴并格式化
  • Ctrl+D:选择单词,重复可增加选择下一个相同的单词
  • Ctrl+L:选择行,重复可依次增加选择下一行
  • Ctrl+Shift+L:选择多行
  • Ctrl+Shift+Enter:在当前行前插入新行
  • Ctrl+X:删除当前行
  • Ctrl+M:跳转到对应括号
  • Ctrl+U:软撤销,撤销光标位置
  • Ctrl+J:选择标签内容
  • Ctrl+F:查找内容
  • Ctrl+Shift+F:查找并替换
  • Ctrl+H:替换
  • Ctrl+R:前往 method
  • Ctrl+N:新建窗口
  • Ctrl+K+B:开关侧栏
  • Ctrl+Shift+M:选中当前括号内容,重复可选着括号本身
  • Ctrl+F2:设置/删除标记
  • Ctrl+/:注释当前行
  • Ctrl+Shift+/:当前位置插入注释
  • Ctrl+Alt+/:块注释,并Focus到首行,写注释说明用的
  • Ctrl+Shift+A:选择当前标签前后,修改标签用的
  • F11:全屏
  • Shift+F11:全屏免打扰模式,只编辑当前文件
  • Alt+F3:选择所有相同的词
  • Alt+.:闭合标签
  • Alt+Shift+数字:分屏显示
  • Alt+数字:切换打开第N个文件
  • Shift+右键拖动:光标多不,用来更改或插入列内容
  • 鼠标的前进后退键可切换Tab文件
  • 按Ctrl,依次点击或选取,可需要编辑的多个位置
  • Ctrl + ↑/↓移动当前显示区域,Ctrl + Shift + ↑/↓移动当前行。
  • ctrl+[/]缩行
  • ctrl+tab转换窗口;

看下这三篇文章,入门应该不成问题,


1.使用go to anything的快捷键:ctrl+p

2.ctrl+p:搜索@符号,可以快速跳转各个选择器或者函数之间;输入#可进入当前页面各部分元素内。
3.shift+ctrl+p,召唤命令行,搜索html/css/js可以快速进入相关默认语          法alt模式中
在这里边输入key bindings可以查看sublime text中的快捷键
reident lines可以调整首行缩进。
4.ctrl+H,搜索替换的功能,及find&replace
5.ctrl+D也可以完成上述的操作,ctrl+k跳过
    多行游标操作,后边鼠标闪动
     alt+F3,全选
    shift+鼠标右键,竖直向下拖动,也能产生多行游标。
Shift + ←/→或Ctrl + D选中关键字,然后F3跳到其下一个出现位置,Shift + F3跳到其上一个出现位置,此外还可以用Alt + F3选中其出现的所有位置(之后可以进行多重编辑,也就是快速替换)。
6.ctrl+N新建一个空文件
7.ctrl+shift+D复制一行到下一行
8.alt+.自动给出结束标签
9.trl + Enter在当前行下面新增一行然后跳至该行;Ctrl + Shift + Enter在当前行上面增加一行并跳至该行。
10.ctrl+}/]对选中的区域集体缩进
11.ctrl+shift+v粘贴时会保持缩进。
12.召唤出命令行,输入set syntax javascript,也可以输入ssjs
13.ctrl+j合并为同一行;
14.呼出控制台,ctrl+`,输入sublime.log_commands(True),确认,接着,在命令行输入刚刚redient lines,然后控制台会输出相关命令的名字和参数,下面是我自己在key bings-user的设置:
{ "keys": ["shift+tab"], "command": "reindent" ,"args":{"single_line": false}},
15.使用上面介绍的快速文件切换功能,可以很轻易地打开/切换到自己想要编辑的文档了,但如果这个文件的代码很长很长,想要轻松跳到要编辑的地方又有什么好方法呢? Sublime Text 2 早就帮你想好了,同样是按下前面所说的 Ctrl+P(Win) 或 Shift+Command+P(Mac),这次试试先输入一个 @ 号看看?嗯,好样的!这列表马上帮你罗列出这文件里全部的 Function 了!同样使用模糊匹配,快速输入几个关键字,马上就能定位到那个Function去了!!!在需要不停在多个Function之间跳转的时候这个功能尤显实用~妈妈再也不用担心我找函数找到蛋疼了!当你编辑的是HTML时,这货给你罗列的则是HTML的各个ID元素,相信搞前端的同学们都鸡冻了吧。较有意思的是,对于Markdown,Ctrl + R会列出其大纲,非常实用。

1.ConvertToUTF8解决中文乱码的问题
2.安装advancednewfile插件,ctrl+alt+n新建文件并自动保存
3.nettus fetch维护更新我们的类库
4.先安装的sublimelinter,接着安装了sublimelinter-jshint,然后再用node.js控制台,npm install -g jshint安装jshint
5. Alignment 

Alignment 是一个代码格式化插件,它可以使多行代码中的等号对齐,也可以调整多行代码为一个缩进级别,默认快捷键是 现在通过选中文本并按 Ctrl + alt + A 就可以进行对齐操作了。

别安装html snippets,会有重复的<出现  zconding
sidebarenhancement配置,可以指定浏览的浏览器

SideBarEnhancements 侧边栏增强

SideBarEnhancements本是增强侧边栏的插件,这里将教大家如何用来做sublime text 3浏览器预览插件,并可自定义浏览器预览的快捷键。

 

安装此插件,点击工具栏的preferences > package setting > side bar > Key Building-User,键入以下代码,这里设置按Ctrl+Shift+C复制文件路径,按F1~F5分别在firefox,chrome,IE,safari,opera浏览器预览效果,当然你也可以自己定义喜欢的快捷键,最后注意代码中的浏览器路径要以自己电脑里的文件路径为准。

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
[
       /*{ "keys": ["alt+f12"],
            "command": "side_bar_open_in_browser",
            "args":{"paths":[], "type":"production", "browser":""}
        },*/
          { "keys": ["ctrl+shift+c"], "command": "copy_path" },
          //chrome
    { "keys": ["f1"], "command": "side_bar_files_open_with",
            "args": {
                "paths": [],
                "application": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
                "extensions":".*"
            }
     },
    //firefox
    { "keys": ["f2"], "command": "side_bar_files_open_with",
             "args": {
                "paths": [],
                "application": "E:\\软件\\Firefox\\firefox.exe",
                "extensions":".*" //匹配任何文件类型
            }
    },
 
    //ie
     { "keys": ["f3"], "command": "side_bar_files_open_with",
             "args": {
                "paths": [],
                "application": "C:\\Program Files\\Internet Explorer\\iexplore.exe",
                "extensions":".*"
            }
    },
 
    ]
 

将文件编码从GBK转黄成UTF8,快捷键Ctrl+Shift+C

8.status bar time

9.Sublime Text 2 在界面上比较有特色的是支持多种布局和代码地图,也提供了 F11 和 Shift+F11 进入全屏免打扰模式,文字难描述,看下图吧。

 

10.bracket highlighter

BracketHighlighter 高亮显示匹配的括号、引号和标签

 

11.JSformat 你也可以使用这个插件的热键“CTRL+ALT+F”进行整理

JsFormat javascript格式化有时从网上扒了人家的js代码来学习学习,打开发现被压缩了,这时就可以用JsFormat插件格式化js代码,恢复未压缩时候的排版,挺给力的。按快捷键Ctrl+Alt+F即可格式化当前的js文件了。

12.Color Highlighter

  这个插件我等了很久了,我最早用Sublime Text写CSS时候就在想“这堆颜色码谁知道是什么颜色”… Color Highlighter这个插件会检测CSS文件中的颜色码,不论是Hex码或者RGB码都能很好的显示。Color Highlighter能够设置成用背景色或者边框提示颜色,我一般在Settings里做这样的设置: 

1
language-http" { "ha_style": "filled", "icons": false }
 

http://docs.emmet.io/cheat-sheet/
link
<link rel="stylesheet" href="" />
link:css
<link rel="stylesheet" href="style.css" />
  
style
<style></style>
script
<script></script>
script:src
<script src=""></script>
img
<img src="" alt="" />


  主题:
1.Flatland 
2.Spacegray
3.cobalt2
4.Nexus
5.solarized(默认中)
 
    "color_scheme": "Packages/Theme - Flatland/Flatland Dark.tmTheme",
    "theme": "Flatland Dark.sublime-theme",
 

F12 key conflict

On Sublime Text 3 F12 key is bound to "goto_definition" command by default. This package was conflicting with that key, this no longers happens. You need to manually add the keys now: Go to Preferences -> Package Settings -> Side Bar -> Key Bindings - User and add any of the following:

[
        { "keys": ["f12"],
            "command": "side_bar_open_in_browser" ,
            "args":{"paths":[], "type":"testing", "browser":""}
        },
        { "keys": ["alt+f12"],
            "command": "side_bar_open_in_browser",
            "args":{"paths":[], "type":"production", "browser":""}
        },
        {
            "keys": ["ctrl+t"],
            "command": "side_bar_new_file2"
        },
        {
            "keys": ["f2"],
            "command": "side_bar_rename"
        },
    ]

 

我个人使用的是Nexus主题和Flatland Dark配色,配置如下:

12
"theme": "Nexus.sublime-theme",
"color_scheme": "Packages/Theme - Flatland/Flatland Dark.tmTheme",
  1. 添加以下代码激活 Soda Light 主题:

{
  "theme": "Soda Light.sublime-theme"
}

references > Settings – Users
{
 "caret_style": "phase",
 "color_scheme": "Packages/User/SublimeLinter/cobalt2 (SL).tmTheme",
 "draw_white_space": "all",
 "ensure_newline_at_eof_on_save": true,
 "font_size": 13,
 "highlight_line": true,
 "highlight_modified_tabs": true,
 "ignored_packages":
 [
 ],
 "open_files_in_new_window": false,
 "rulers":
 [
  80,
  100
 ],
 "tab_size": 2,
  "theme": "Cobalt2.sublime-theme",
 "translate_tabs_to_spaces": true,
 "trim_trailing_white_space_on_save": true
}
 
我快捷键的设置:
[
       /*{ "keys": ["alt+f12"],
            "command": "side_bar_open_in_browser",
            "args":{"paths":[], "type":"production", "browser":""}
            },*/
            { "keys": ["ctrl+shift+c"], "command": "copy_path" },
          //chrome
          { "keys": ["f1"], "command": "side_bar_files_open_with",
          "args": {
            "paths": [],
            "application": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
            "extensions":".*"
          }
          },
    //firefox
    { "keys": ["f2"], "command": "side_bar_files_open_with",
    "args": {
      "paths": [],
      "application": "E:\\软件\\Firefox\\firefox.exe",
                "extensions":".*" //匹配任何文件类型
              }
              },
 
    //ie
    { "keys": ["f3"], "command": "side_bar_files_open_with",
    "args": {
      "paths": [],
      "application": "C:\\Program Files\\Internet Explorer\\iexplore.exe",
      "extensions":".*"
    }
    },
    { "keys": ["shift+tab"], "command": "reindent" ,"args":{"single_line": false}},
 
    ]
便携款:
这次安装,先不要着急打开Sublime Text。为了以后安装方便,决定不再使用系统默认的Packages安装路径C:\Users\Administrator\AppData\Roaming\Data,在Sublime Text2的安装目录下新建文件夹/Data,该文件夹创建完成后再打开Sublime Text程序,我们发现,Packages被安装在了当前创建的文件夹下(我的路径是D:\Program Files\Sublime Text 2\Data)。稍后把其他必备插件装全了,我们备份一下Sublime Text 2文件夹,这样以后走到哪都可以无须一步步重新安装,快速部署我们的Sublime Text环境。
Data 文件夹(注意大小写)
posted @ 2015-03-27 09:02  Michael翔  阅读(536)  评论(0编辑  收藏  举报