MoonlightL

Sublime Text 3 设置

发表于 2018-03-24   |  分类于 前端   |  阅读数:   |  评论数:

一、修改插件安装目录

为了有效和安全管理插件，在 Sublime Text 的安装目录中创建 Data 目录（之后插件就放在该目录中）。

重启 Sublime Text 后 Preferences-> Browse Package 打开的目录就指向 Data。

二、注册

主界面 Help-> Enter license，弹出窗口输入如下内容：

  1. —– BEGIN LICENSE —–

  2. TwitterInc

  3. 200 User License

  4. EA7E-890007

  5. 1D77F72E 390CDD93 4DCBA022 FAF60790

  6. 61AA12C0 A37081C5 D0316412 4584D136

  7. 94D7F7D4 95BC8C1C 527DA828 560BB037

  8. D1EDDD8C AE7B379F 50C9D69D B35179EF

  9. 2FE898C4 8E4277A8 555CE714 E1FB0E43

  10. D5D52613 C3D12E98 BC49967F 7652EED2

  11. 9D2D2E61 67610860 6D338B72 5CF95C69

  12. E36B85CC 84991F19 7575D828 470A92AB

  13. —— END LICENSE ——

确认就可注册（破解内容有时效性，如果破解失败自行百度查询另一组破解）。

三、快捷键

  1. Ctrl+Shift+P：打开命令面板

  2. Ctrl+P：搜索项目中的文件

  3. Ctrl+G：跳转到第几行

  4. Ctrl+W：关闭当前打开文件

  5. Ctrl+Shift+W：关闭所有打开文件

  6. Ctrl+Shift+V：粘贴并格式化

  7. Ctrl+D：选择单词，重复可增加选择下一个相同的单词

  8. Ctrl+L：选择行，重复可依次增加选择下一行

  9. Ctrl+Shift+L：选择多行

  10. Ctrl+Shift+Enter：在当前行前插入新行

  11. Ctrl+X：删除当前行

  12. Ctrl+M：跳转到对应括号

  13. Ctrl+U：软撤销，撤销光标位置

  14. Ctrl+J：合并多行成一行

  15. Ctrl+F：查找内容

  16. Ctrl+Shift+F：全项目查找并替换

  17. Ctrl+H：替换

  18. Ctrl+R：前往 method

  19. Ctrl+N：新建窗口

  20. Ctrl+K+B：开关侧栏

  21. Ctrl+Shift+M：选中当前括号内容，重复可选着括号本身

  22. Ctrl+F2：设置/删除标记

  23. Ctrl+/：注释当前行

  24. Ctrl+Shift+/：当前位置插入注释

  25. Ctrl+Alt+/：块注释，并Focus到首行，写注释说明用的

  26. Ctrl+Shift+A：选择当前标签前后，修改标签用的

  27. F11：全屏

  28. Shift+F11：全屏免打扰模式，只编辑当前文件

  29. Alt+F3：选择所有相同的词

  30. Alt+.：闭合标签

  31. Alt+Shift+数字：分屏显示

  32. Alt+数字：切换打开第N个文件

  33. Ctrl+Shift+上下：替换行

四、安装 Package Control

Package Control 插件是一个方便 Sublime text 管理插件的插件。

方式一：

主界面 Ctrl+` 下边框弹出输入框，复制粘贴如下内容：

  1. import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

并回车。

方式二：

Ctrl + Shift + P 弹出输入框输入 install package control 回车即可安装。

Package Control 安装好之后，只需要 Ctrl + Shift + P 弹出输入框选择 install package 就可以输入插件名称下载插件了。

五、常用插件

5.1 Emmet

功能：用于提高 html/css 的编码速度。

调用方式：tab 键。

效果图：

5.2 HTML-CSS-JS Prettify

功能：格式化 HTML 、CSS、JS 及 Json 代码。需要注意的是，必须先安装 Node.js 和设置 Node.js 路径。

调用方式：右键 –> HTML/CSS/JS Prettify –> Prettify Code。

效果图：

5.3 AutoFileName

功能：用于补全文件名称。

调用方式：输入文件路径会自动提示。

5.4 DocBlockr

功能：提供代码块注释功能。

调用方式：输入 /** 后按 Enter 或者 Tab。

效果图：

5.5 Bracket Highlighter

功能：高亮显示标签。

调用方式：将光标放入开始/结束标签，会高亮显示对应的标签。

5.6 IMESupport

功能：解决中文输入框不跟随的问题。

5.7 SideBarEnhancements

功能：提供侧边栏功能，同时可自定义浏览器预览的快捷键。

调用方式：需要设置快捷键。

设置浏览器预览快捷键方式：

preferences -> package setting -> side bar -> Key Building-User，输入如下内容：

  1. [

  2.     {

  3.     "keys": ["ctrl+shift+c"], "command": "copy_path"

  4. 

  5.     },

  6.     //chrome

  7.     {

  8.         "keys": ["f2"],

  9.         "command": "side_bar_files_open_with",

  10.         "args":

  11.         {

  12.             "paths": [],

  13.             "application": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",

  14.             "extensions": ".*"

  15.         }

  16.     },

  17.     //firefox

  18.     {

  19.         "keys": ["f3"],

  20.         "command": "side_bar_files_open_with",

  21.         "args":

  22.         {

  23.             "paths": [],

  24.             "application": "H:\\Common\\Mozilla Firefox\\firefox.exe",

  25.             "extensions": ".*" //匹配任何文件类型

  26.         }

  27.     }

  28. ]

只需要修改浏览器路径，保存后，在对应的 html 文件中按住相应的快捷键就可以打开浏览器查看内容了。

5.8 AllAutocomplete

功能：搜索所有打开的文件来寻找匹配的提示词。

调用方式：输入部分文字会自动提示。

5.9 Terminal

功能：在当前目录下打开 Terminal 窗口。

调用方式：Ctrl + Shift + T 。

5.10 autoprefixer

功能：给 CSS 添加私有前缀。

调用方式：Ctrl + Shift + P，选择 autoprefixer 后，编写 css 保存文件即可。需要安装 Node.js。

额外设置：默认情况下，该插件只对 Chrome 进行兼容，为了兼容其他浏览器需要修改配置 Preferences -> Package Settings -> Autoprefixer，弹出窗口修改 "browsers" 为如下内容：

  1. "browsers":["defaults","last 2 version", "> 0.1%", "> 5% in US", "ie 6-8","Firefox < 20"]

效果图：

5.11 ConvertToUTF8

功能：文件编码转成 utf-8。

调用方式：保存文件即可。

5.12 sublimeTmpl

功能：提供文件模板。

调用方式：需要设置快捷键。

设置快捷键，preferences -> package setting -> side bar -> Key Building-User，输入如下内容：

  1. [

  2.     {

  3.     "keys": ["ctrl+shift+c"], "command": "copy_path"

  4. 

  5.     },

  6.      //创建模板

  7.     {

  8.         "keys": ["ctrl+1"],

  9.         "caption": "Tmpl: Create html",

  10.         "command": "sublime_tmpl",

  11.         "args":

  12.         {

  13.             "type": "html"

  14.         }

  15.     },

  16.     {

  17.         "keys": ["ctrl+2"],

  18.         "caption": "Tmpl: Create javascript",

  19.         "command": "sublime_tmpl",

  20.         "args":

  21.         {

  22.             "type": "js"

  23.         }

  24.     },

  25.     {

  26.         "keys": ["ctrl+3"],

  27.         "caption": "Tmpl: Create css",

  28.         "command": "sublime_tmpl",

  29.         "args":

  30.         {

  31.             "type": "css"

  32.         }

  33.     }

  34. ]

保存后，只需要按下对应的快捷键就可以创建相应类型的文件。

效果图：

5.13 LiveReload

功能：自动刷新浏览器。

安装：

1）给 chrome 浏览器安装 LiveReload 插件（翻墙下载）。

2）通过下文提供的链接下载 Sublime 插件，里边有个名为 ST3-LiveReload-master.zip 压缩包，将其解压改名为 LiveReload，复制到 Sublime 的 Packages 目录下（Preference -> Browse Packages...）。

3）启动插件，Preference->Package Settings->LiveReload->Settings User

  1. {

  2.     "enabled_plugins": [

  3.         "SimpleReloadPlugin",

  4.         "SimpleRefresh"

  5.     ]

  6. }

调用方式：通过 chrome 打开 html 文件后，点击 chrome 的 LiveReload 插件的图标变成实心后，只要修改 html 文件内容保存即可自动刷新浏览器。

效果图：

六、资源下载

Sublime Text 工具及离线插件

  • 本文作者: MoonlightL
  • 本文链接: https://www.extlight.com/2018/03/24/Sublime-Text-3-设置/
  • 版权声明: 本博客所有文章除特别声明外均为原创，采用CC BY-NC-SA 4.0 许可协议。转载请在文章开头明显位置注明原文链接和作者等相关信息，明确指出修改（如有），并通过 E-mail 等方式告知，谢谢合作！
分享