sublime的使用和配置插件（存档）

-
转载来自http://www.520bu.com/index.php/archives/29/ 作者: 

一、下载

二、 主要快捷键列表

Ctrl+L 选择整行（按住-继续选择下行）
Ctrl+KK 从光标处删除至行尾
Ctrl+Shift+K 删除整行
Ctrl+Shift+D 复制光标所在整行，插入在该行之前
Ctrl+J 合并行（已选择需要合并的多行时）
Ctrl+KU 改为大写
Ctrl+KL 改为小写
Ctrl+D 选词 （按住-继续选择下个相同的字符串）
Ctrl+M 光标移动至括号内开始或结束的位置
Ctrl+Shift+M 选择括号内的内容（按住-继续选择父括号）
Ctrl+/ 注释整行（如已选择内容，同“Ctrl+Shift+/”效果）
Ctrl+Shift+/ 注释已选择内容
Ctrl+Z 撤销
Ctrl+Y 恢复撤销
Ctrl+M 光标跳至对应的括号
Alt+. 闭合当前标签
Ctrl+Shift+A 选择光标位置父标签对儿
Ctrl+Shift+[ 折叠代码
Ctrl+Shift+] 展开代码
Ctrl+KT 折叠属性
Ctrl+K0 展开所有
Ctrl+U 软撤销
Ctrl+T 词互换
Tab 缩进 自动完成
Shift+Tab 去除缩进
Ctrl+Shift+↑ 与上行互换
Ctrl+Shift+↓ 与下行互换
Ctrl+K Backspace 从光标处删除至行首
Ctrl+Enter 光标后插入行
Ctrl+Shift+Enter 光标前插入行
Ctrl+F2 设置书签
F2 下一个书签
Shift+F2 上一个书签

三、安装Package Control

简而言之，它是用来管理插件的插件。所以，首次使用前也是需要安装的。
使用Ctrl+`（Esc键下方）快捷键或者通过View->Show Console菜单打开命令行。
将以下代码复制后粘贴到如上图中“<代码粘贴处>”，然后按Enter(回车)，稍等片刻
Sublime Text 3：
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())
Sublime Text 2：
import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')
如果安装成功，就可以在Preferences菜单下看到Package Settings和Package Control两个菜单。
若不能通过以上方式成功安装，可尝试以下方式手动安装
  1. 点击Preferences->Browse Packages...菜单，进入打开的目录的上层目录（即Sublime Text 3目录），再打开Installed;
  2. Packages目录，下载Package Control.sublime-package并复制到如下图中的Installed Packages目录;
  3. Package Control.sublime-package下载地址：https://sublime.wbond.net/Package%20Control.sublime-package
Package Control 主文件下载地址：https://github.com/wbond/sublime_package_control

四、Package Control使用方法/安装插件

下面将以安装Emmet插件为例，同时介绍如何使用Package Control插件
在Sublime Text 3中按下快捷键Ctrl+Shift+P
在出现的文本框中输入Install Package(或直接输入“ip”)选中Install Package并回车
（可能需要等待几秒钟，在此过程中不能进行任何鼠标/键盘操作）
输入或选择你需要的插件再按Enter（回车）就可以安装插件了
在安装过程中，左下角会显示正在安装的提示，静候片刻
若安装成功，相应的，左下角会出现安装成功的提示
若由于网络等原因，您发现无法按照以上介绍的方式成功安装，也不用担心
可通过在GitHub上下载Zip包的方式手动安装，具体方法如下
  1. 下载相应插件的Zip包 然后，在Sublime Text 3中点击菜单Preferences->Browse Packages...
  2. 可以看到，出现了一个文件夹窗口，将下载的Zip包“解压”后复制到该文件夹内即可
卸载的方式和安装差不多，按下快捷键Ctrl+Shift+P，选中remove package选择插件即可。

五、前端常用的插件

  1. Emmet
    Emmet可以用一句指令迅速生成了一大片 HTML 代码。
    如：输入一个感叹号（当然是英文符号），然后摁下 TAB 键，就可以生成一个 HTML5 的标准文档初始结构。
    更多教程：http://www.iteye.com/news/27580
  2. SideBarEnhancements
    安装此插件，点击工具栏的preferences > package setting > side bar > Key Building-User(注意不是settings-User，我就是搞错了弄了半天)，键入以下代码，这里设置按Ctrl+Shift+l复制文件路径，按F1~F5分别在firefox，chrome，IE，safari，opera浏览器预览效果，当然你也可以自己定义喜欢的快捷键，最后注意代码中的浏览器路径要以自己电脑里的文件路径为准。
[
    { "keys": ["ctrl+shift+l"], "command": "copy_path" },
    //firefox
    { "keys": ["f1"], "command": "side_bar_files_open_with",
             "args": {
                "paths": [],
                "application": "C:\\software\\Browser\\Mozilla Firefox\\firefox.exe",
                "extensions":".*" //匹配任何文件类型
            }
    },
    //chrome
    { "keys": ["f2"], "command": "side_bar_files_open_with",
            "args": {
                "paths": [],
                "application": "C:\\Users\\Mr.DenGo\\AppData\\Local\\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:\\software\\Browser\\Safari\\safari.exe",
                "extensions":".*"
            }
     },
     //opera
     { "keys": ["f5"], "command": "side_bar_files_open_with",
             "args": {
                "paths": [],
                "application": "C:\\software\\Browser\\opera\\opera.exe",
                "extensions":".*"
            }
    }
]
由于该插件是sublime3下的插件，如果是sublime2请使用"view in browser"，安装好该插件以后，preference - 按键绑定-用户，在" ] "前输入以下代码：
{ "keys": ["ctrl+shift+enter"], "command": "open_in_browser" }
  1. TrailingSpaces
    有时候在代码结尾打多了几个空格或Tab，一般不会察觉，TrailingSpacer这款插件能高亮显示多余的空格和Tab，并可以一键删除它们，有代码洁癖的朋友应该会喜欢这个插件。
  2. JsFormat
    有时从网上扒了人家的js代码来学习学习，打开发现被压缩了，这时就可以用JsFormat插件格式化js代码。在JS文件中通过鼠标右键->JsFormat或键盘快捷键Ctrl+Alt+F对JS进行格式化
  3. sublimeLinter
    sublimeLinter是少数几个能在sublime text 3工作的代码检查插件，sublimeLinter能检查html、css、javascript、php等众多语言的错误代码并给出提示，前提是需要配置相应语言的环境，要检查js代码需要安装node.js，检查php代码需要安装php并配置环境等，用这个插件能及时帮我们纠正代码的错误，并培养我们良好的编码习惯和风格。
    sublime3安装该插件以后，继续安装SublimeLinter-jshint，然后nodejs安装jshint，就可以使用了。也可以继续安装SublimeLinter-csslint，同时nodejs安装csslint，可以检测css代码。
  4. ColorPicker(请在线安装)
    在编辑CSS样式的时候，要加个自己喜欢颜色或改改颜色啥的，要到PS里去调色？ColorPicker可以让sublime text 3内置一个调色盘，调好颜色，点击OK就会在光标处生成十六进制颜色代码。
    使用方法：
    Linux: ctrl+shift+c
    Windows: ctrl+shift+c
    OS X: cmd+shift+c
    很多插件都使用了快捷键ctrl+shift+c，由于本插件使用频率不高，建议更改快捷键为ctrl+shift+alt+z（主要是方便按）。
    打开Sublime Text --> Preferences --> Browse Packages --> ColorPicker，找到Default (Windows).sublime-keymap（Mac下是Default (OSX).sublime-keymap）文件，用编辑器打开，修改为：
[
    { "keys": ["ctrl+shift+alt+z"], "command": "color_pick" }
]
  1. CSScomb(请在线安装)
    请在线安装，不要使用zip下载的方式安装，后者在使用时会报错，网上的教程是添加PHP路径到环境变量，而前端人员不是每个人都安装了PHP的。使用在线安装安装完成后，使用快捷键ctrl+shift+c，即可将CSS属性排序（只排序不做格式化之类的其他操作），不同类型的css属性之间会有一个空行。（据说需要安装NodeJS环境，本机已经安装了）
  2. Prefixr
    Prefixr用于写CSS时自动添加 -webkit 等私有词缀，安装之后需要打开想要编辑的CSS文件，然后输入想要使用的特性，这里以border-radius为例；例如要给banner这个类加个边界，可以写以下的代码：
.banner {
  border-radius
}
在border-radius的s后面按Tab键；就会自动扩展为：
.banner {
  -webkit-border-radius: ;
  -moz-border-radius: ;
  border-radius: ;
}
同时，Sublime Text会利用多Cursor的特性将光标同时定位在所有的:后面，方便大家同时进行编辑，很cool也很方便对不对～～
  1. Tag(请在线安装)
    这是HTML/XML标签缩进、补全、排版和校验工具，Edit --> Tag可以进行操作
    也可以选中一段Html代码，按Ctrl+Alt+f格式化HTML代码。
  2. SublimeCodeIntel(请在线安装)
    sublime默认的代码提示只能提示系统函数，用户自己创建的函数、类不能提示。如果想要提示自己建立的函数，可以安装sublimecodeintel插件。该插件安装时间较长，请耐心等待。
    sublimecodeintel 安装后需要配置，文件：插件目录/.codeintel/config 中 增加
,
"JavaScript":{
    "javascriptExtraPaths":[]
}
sublime3没有/.codeintel/config，我测试不改配置直接可以用...
  1. Clipboard History
    剪贴板历史记录，显示更多历史复制，Ctrl+Shift+V触发。(sublime3没有找到这个插件)
  2. Theme – Soda(请在线安装)
    完美的编码主题，用过的都说好。
    Preference -> Setting-User的配置文件中输入
"theme": "Soda Light.sublime-theme"
"theme": "Soda Light 3.sublime-theme"
如果想要深色的就输入：
"theme": "Soda Dark.sublime-theme"
"theme": "Soda Dark 3.sublime-theme"

六、其他

sublime3注册码：复制如下三个任意一个正版注册码即可
—– BEGIN LICENSE —–
Andrew Weber
Single User License
EA7E-855605
813A03DD 5E4AD9E6 6C0EEB94 BC99798F
942194A6 02396E98 E62C9979 4BB979FE
91424C9D A45400BF F6747D88 2FB88078
90F5CC94 1CDC92DC 8457107A F151657B
1D22E383 A997F016 42397640 33F41CFC
E1D0AE85 A0BBD039 0E9C8D55 E1B89D5D
5CDB7036 E56DE1C0 EFCC0840 650CD3A6
B98FC99C 8FAC73EE D2B95564 DF450523
—— END LICENSE ——
—– BEGIN LICENSE —–
K-20
Single User License
EA7E-940129
3A099EC1 C0B5C7C5 33EBF0CF BE82FE3B
EAC2164A 4F8EC954 4E87F1E5 7E4E85D6
C5605DE6 DAB003B4 D60CA4D0 77CB1533
3C47F579 FB3E8476 EB3AA9A7 68C43CD9
8C60B563 80FE367D 8CAD14B3 54FB7A9F
4123FFC4 D63312BA 141AF702 F6BBA254
B094B9C0 FAA4B04C 06CC9AFC FD412671
82E3AEE0 0F0FAAA7 8FA773C9 383A9E18
—— END LICENSE ——
—– BEGIN LICENSE —–
J2TeaM
2 User License
EA7E-940282
45CB0D8F 09100037 7D1056EB A1DDC1A2
39C102C5 DF8D0BF0 FC3B1A94 4F2892B4
0AEE61BA 65758D3B 2EED551F A3E3478C
C1C0E04E CA4E4541 1FC1A2C1 3F5FB6DB
CFDA1551 51B05B5D 2D3C8CFE FA8B4285
051750E3 22D1422A 7AE3A8A1 3B4188AC
346372DA 37AA8ABA 6EB30E41 781BC81F
B5CA66E3 A09DBD3A 3FE85BBD 69893DBD
—— END LICENSE ——

Popular posts from this blog

Fancyapps — easily build overlay windows with carousel

-
Image
  I used to play around with these gallery boxes with old versions. Now the Fancybox is the 4th version with more functions, including plugins, events, options. They even provided how to use React easily demo. I remember when I was learning Javascript, the fancy project is building a carousel, it took some time and logical understanding, but it’s a good way to learn the logic JS though. But for now, I will be grasping the eyeball by this fancy Javascript library. Since it’s a fast-developing world, the result should be precise, accurate, and fast, right? Fanyapps includes  Fancybox, Carousel, and Panzoom . Fancybox is a flex gallery container, which is touch and mobile optimized with swipe, drag, and pinch-to-zoom gestures. Carousel is a display place with smooth animations and more functions inside. Panzoom is a customized zooming function. They combined smoothly and more functionally. Official site Playaround the demo here Step1: import the library with npm or using CDN I like CDN fo
Read more

Meet Mantine: A TS-Based Open-Source React Components Library

-
Image
  Photo by  Kelly Sikkema  on  Unsplash Tailwind? Material? Chakra? You must hear a lot about the different kinds of UI choices for your projects. The better the experience and performance, the more popular it will be. Developers keep building awesome UIs for users who can be more productive and have an improved experience. This is so we can save more time to create new generational masterpieces. In this regard, I found the UI named Mantine which was published in 2021 and which keeps releasing new functions for now. Mantine is a React components library focused on providing a great user and developer experience and that comes with native dark theme support. GitHub - mantinedev/mantine: React components library with native dark theme support React components library with native dark theme support - GitHub - mantinedev/mantine: React components library with… github.com In 2021, the number of users kept increasing. bestofjs bestofjs The UI can work with different frameworks such as Next.j
Read more

Meet Tippy.js: The Complete Tooltip Popover Plugin

-
Image
  Tippy . js  is the complete tooltip, popover, dropdown, and menu solution for the web. Can you play around with tooltips like a pro in one step? Yes, with Tippy.js. Tippy . js  is the complete tooltip, popover, dropdown, and menu solution for the web, powered by Popper. It provides the logic and optional styling of elements that “pop out” from the flow of the document and float next to a target element. Official site: Tippy.js - Tooltip, Popover, Dropdown, and Menu Library Tippy.js is the complete tooltip, popover, dropdown, and menu solution for the web, powered by Popper. It provides the… atomiks.github.io Step 1: import npm or CDN # npm npm i tippy.js # Yarn yarn add tippy.js or, <!-- Development --> <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script> <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script> <!-- Production --> <script src="https://unpkg.com/@popperjs/
Read more