• Sublime Text 快捷键 插件配置


    一、前言之前

    从设计到前端,有过一段时间是懵懵懂懂的状态,缺乏对整个职业更加深入的了解。后来混迹于各个前端大牛的博客,在各个QQ群里聆听各路大神的经验之谈,坚定了前端之路的信心。一直收藏各类精华的帖子和网址,分门别类;关注很多知名网站和各路大神的博客,时刻感觉到要了解的东西太多,要学习的东西太多。越是深入,越是觉得自己欠缺的东西很多,却总是静不下心,手头上的东西也看不进去,这状态不行,得改变,静心看书,将高程和语言精粹多看几遍,多练习,试着写笔记,不求进步神速,只求一步一个脚印,养成良好习惯,一点一点积累,向大牛靠拢。

    二、前言

    说到前端开发,有个合适的工具很重要,工欲善其事必先利其器。editplus、notepad++都是不错的工具,体积轻巧,启动迅速,但是插件功能太少;dw太大。sublime text将是一个不错的选择,将各类的插件配置完毕后,你会发现原来编辑器也可以如此的性感妖娆,不少前端er纷纷抛弃用了数年的“伙伴”,投入了她的怀抱。ST2不是免费的,但可以永久免费使用,只是在保存的时候,偶尔会弹出要你购买注册的对话框。官网地址:http://www.sublimetext.com/2

    三、界面功能

    这是安装了插件后的界面,黑色大气美观,代码高亮功能非常性感,写js的时候,感觉最为深刻。

     

    三、设置

    界面上各种功能区域就不一一详细介绍了,下面介绍重点的DIY和快捷键

    第一个是用户设置,第二个用户快捷方式设置,不要在default中设置,免得更新后丢失。

    {
        "detect_slow_plugins": false,
        "font_size": 13,
        "highlight_line": true,
        "ignored_packages": "Vintage",
        "line_padding_bottom": 1,
        "line_padding_top": 1,
        "margin": 4,
        "tab_size": 2,
        "update_check": false,
        "word_wrap": true
    }

    将配置代码复制进去,具体的数值可以根据需要修改

    打开第二个文件,里面设置各种自定义的快捷方式

    各类强大的快捷方式:

    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 上一个书签

    四、插件安装

    这是st最为强大的地方--各类强大的插件。ST2是支持插件扩展的,首先,我们需要安装Package Contro,ctrl+`调出命令行工具,输入import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

    回车即可。

    点击Preferences→Package Control(或是ctrl+shift+p),显示以下弹窗:

    n Disable Package :禁用插件

    n enable Package :启用插件

    n Install Package :安装插件

    n List Package :查看已安装插件列表

    n Remove Package :移除插件

    n Upgrade Package :升级插件

    鼠标移动,直接点击List Package也可以

    选择安装插件后,一般过几秒就会弹出安装插件对话框,输入插件名称,下面的列表会自动匹配

    点击即可,它会自动安装。有的时候安装不上,是万恶的河蟹大婶。可以从github上将插件下载解压放在安装报目录下

    五、插件介绍

    插件功能非常多,挑选几个很常用的介绍

    ps:如果按照过程中提示pyV8报错之类的,要预先安装,如果按照不上,参考第四点

    1、Tag插件:可以为web开发者提供html和css标签,很方便快捷,对于web前端设计者非常实用。


    2、Alignment:主要用于代码对齐,据说最新版已经自动集成了这个插件

    3、BracketHighlighter:代码高亮,非常实用

    4、converToUTF8: 转utf8

    5、ZenCoding(emmet 、emmet css snippets):前端必备,快速开发HTML/CSS

    一个空白的html页面,在其中输入html:xt然后按下Tab键盘,页面自动生成html标头

    输入  .left#header_left>ul>li*4>a[target="_blank"]{测试$}然后按Tab键,然后生成html代码

    这个功能非常酷,大大提高了速度,附上几篇教程1教程2

    6、jquery语法提示插件提示,非常棒

    7、jsformat:格式化js代码,这个插件很有用,我们有时在网上看到某些效果,想查看是怎么实现的,但是代码被压缩过,很难阅读,不用怕,用ST2打开,右键即可,也可以设置快捷键

    压缩后,压缩前的对比

    8、autoprefixr:CSS3私有前缀自动补全插件

    9、sidebarEnhancements:侧边栏,这个功能很棒

    sidebar的颜色修改 :打开 安装目录PackagesTheme - Default/Default.sublime-theme文件,所有操作都在该文件里面进行。
    边栏背景色修改成了

     1 {
     2 "class": "sidebar_tree",
     3 "row_padding": [8, 3],
     4 "indent": 12,
     5 "indent_offset": 17,
     6 "indent_top_level": false,
     7 "layer0.tint": [30, 30, 30],
     8 "layer0.opacity": 1.0,
     9 "dark_content": false
    10 },

    名文字颜色改成了

    1 {
    2 "class": "sidebar_label",
    3 "color": [150, 150, 150],
    4 "font.bold": false
    5 // , "shadow_color": [250, 250, 250], "shadow_offset": [0, 0]
    6 },

     分割线颜色改成了

    1 {
    2 "class": "sidebar_container",
    3 "layer0.tint": [10, 10, 10],
    4 "layer0.opacity": 1.0,
    5 "layer0.draw_center": false,
    6 "layer0.inner_margin": [0, 0, 1, 0],
    7 "content_margin": [0, 0, 1, 0]
    8 },

    10、HTML-CSS-JS Prettify:可以将CSS格式化成一行,也可以将一行格式化成多行。

    插件下载地址:https://gist.github.com/2863474 下载解压缩之后,将compact_expand_css_command.py放到*Sublime Text 2PackagesUser
    然后,重启一下st2,选择Preferences>Key Bindings - User
    加入以下代码:
    { "keys": ["ctrl+shift+]"], "command": "compact_expand_css", "args": { "action": "expand" } },
    { "keys": ["ctrl+shift+["], "command": "compact_expand_css", "args": { "action": "compact" } }
    保存,搞定。打开一个css文件试试,非常酷的体验

    
    

    六、后记

    sublime text 还有其他的常用插件,功能强大。各种人性化的细节设计,全面的功能和扩展机制,使用后定会喜欢上它 

    HTML-CSS-JS Prettify:格式化

    ChineseLocalization:汉化

    javascript-snippets:js片段

     

  • 相关阅读:
    Windows中目录及文件路径太长无法删除的解决方法
    html5--移动端视频video的android兼容,去除播放控件、全屏等
    npm scripts 使用指南
    如何在 React Native 中写一个自定义模块
    流媒体测试笔记记录之————解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了
    React.js 小书
    React.js 应用 UI 框架
    npm配置文件
    Linux 普通进程 后台进程 守护进程
    Linux下passwd和shadow文件内容详解
  • 原文地址:https://www.cnblogs.com/xbcq/p/3664285.html
Copyright © 2020-2023  润新知