• Sublime Text 3 插件整理


      Sublime Text作为一个尽为人知的代码编辑器,其优点不用赘述。界面整洁美观、文本功能强大,且运行速度极快,非常适合编写代码,写文章做笔记。Sublime Text还支持Mac、Windows和Linux各大平台,方便用户使用。种类繁多、功能强大的插件更给Sublime Text 3锦上添花。下载Package Control后就可以迅速的开启插件之路。

      这里是我的sublime text 3插件列表,总结一下方便自己在其他环境中直接配置。

    1. SideBarEnhancements
      SideBarEnhancements是一款很实用的右键菜单增强插件,有以diff形式显示未保存的修改、在文件管理器中显示该文件、复制文件路径、在侧边栏中定位该文件等功能,也有基础的诸如新建文件/目录,编辑,打开/运行,显示,在选择中/上级目录/项目中查找,剪切,复制,粘贴,重命名,删除,刷新等常见功能。

        配置快捷键
        点击工具栏的Preferences -> Package Settings -> Side Bar -> Key Bindings-User,在打开的配置文件中按如下格式配置即可。

     1 [
     2     // 使用快捷键F12直接在chrome中打开文件
     3     {
     4         "keys": ["f12"],
     5         "command": "side_bar_files_open_with",
     6         "args": {
     7             "paths": [],
     8             "application": "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe",
     9             "extensions": ".*"
    10         }
    11     }
    12 ]

        打开其他软件
        sublime text可以直接预览图片等格式的文件,不过有了这个插件,就可以直接在Side Bar中启用Photoshop等工具了。
        使用方法:
          在Side Bar中的一个文件上右键,有个Open With选项,进入Edit Applications就可以配置文件了。
          如下为我配置的Photoshop,主要修改的就是将application中的值改为电脑中软件的路径;
          保存之后就可以在Open With中选择Photoshop,就可以让其打开图片类型的文件了。

     1 //Photoshop
     2 {
     3   "caption": "Photoshop",
     4   "id": "side-bar-files-open-with-photoshop",
     5 
     6   "command": "side_bar_files_open_with",
     7   "args": {
     8     "paths": [],
     9     "application": "C:\Program Files\Adobe\Adobe Photoshop CC 2014\Photoshop.exe", // OSX
    10     "extensions": "psd|png|jpg|jpeg", //any file with these extensions
    11     "args": []
    12   },
    13   "open_automatically": false // will close the view/tab and launch the application
    14 },

    2. Bracket​Highlighter
      Bracket​Highlighter是一个括号、引号、标签高亮插件,支持[]、()、{}、""、''和<tag></tag>等,比Sublime Text自带的高亮要明显得多。
      使用方法:安装即生效
      

    3. Compare Side-By-Side
      Compare Side-By-Side插件是一个简单的并排比较工具。
      使用方法:
      在待比较的Tab上右键选择Compare with...,然后选择另一个打开的比较对象即可,Sublime会自动弹出新的窗口显示两个文件。

    4. DocBlockr
      DocBlockr是一个用于生成注释的插件,可以使你很方便地对代码建立文档。
      它会解析函数,变量,和参数,根据它们自动生成文档范式,你的工作就是去填充对应的说明。

      使用方式:
        /*  回车创建一个代码块注释
        /**  回车在自动查找函数中的形参等等
      

    5. JS Format
      一个JS代码格式化插件。
      使用方法:Ctrl+Alt+F

    6. Trimmer
      你知道当你编写代码时,由于错误或别的某些原因,会产生一些不必要的空格。需要注意的是多余的空格有时也会造成错误。
      这个插件会自动删除这些不必要的空格。
      使用方法:
        默认情况下的快捷键是Ctrl+Alt+S,用于清除每行末尾的空格。
        或者输入Ctrl+Shift+P调出命令面板,输入Trimmer,即可显示所有操作。
        

    7. Emmet
      Emmet(前身是Zen Coding)是一个前端开发不可缺少的插件,它让编写HTML和CSS代码变得简单,节省大量时间。
      Emmet可使开发者用缩写形式书写代码,再用“扩展”功能自动将代码扩展至完整样式。
      早在2009年,Zen Coding作为具有革命性的HTML和CSS代码编辑插件一经问世,直到现在帮助了无数的开发者,减少他们的时间,使得编写代码变得简便有趣。现在,Emmet已经超越了Zen Coding到达了更高层次,普适性的功能将给更多的开发者带来便利。
      基本用法:输入简写形式,然后按 Tab 键。
      详细用法见官方文档

    8. All Autocomplete
      Sublime Text 默认的 Autocomplete 功能只考虑当前的文件,而 All Autocomplete 插件会搜索所有打开的文件来寻找匹配的提示词。

    9. SublimeCodeIntel
      SublimeCodeIntel作为一个代码提示和补全插件,支持JavaScript、Mason、XBL、XUL、RHTML、SCSS、Python、HTML、Ruby、Python3、XML、Sass、XSLT、Django、HTML5、Perl、CSS、Twig、Less、Smarty、Node.js、Tcl、TemplateToolkit和PHP等所有语言,是SublimeText自带代码提示功能基础上一个更好的扩展,自带代码提示功能只可提示系统代码,而SublimeCodeIntel则可以提示用户自定义代码。SublimeCodeIntel支持跳转到变量、函数定义的功能,另外还有自动补全的功能,十分方便。

    10. SublimeLinter
      SublimeLinter是少数几个能在sublime text 3工作的代码检查插件,SublimeLinter支持JavaScript、CSS、HTML、Java、PHP、Python、Ruby等十多种开发语言,但前提是需要配置相应语言的环境,要检查JavaScript代码需要安装node.js,检查PHP代码需要安装PHP并配置环境等。SublimeLinter可以及时提示编写代码中存在的不规范和错误的写法,并培养我们良好的编码习惯和风格。

      使用ESLint做代码检查:
      安装插件SublimeLinter-contrib-eslint,更多细节见ESLint的使用

    11. CSS Format
      CSS Format是Sublime Text的CSS格式化插件,可以将CSS / SASS / SCSS / LESS代码转换为扩展,压缩或压缩格式。CSS格式只是格式化程序,不支持语法检查和自动更正功能

      基本用法:
      选择代码或将光标置于文档中,然后按以下方式之一执行命令:
        右键菜单:CSS Format。
        编辑菜单:编辑 > CSS Format。
        命令面板:打开命令面板:Ctrl+Shift+P或Cmd+Shift+P,然后选择Format CSS:XXX。

      我的配置项:

    1 {
    2   "indentation": "  ",
    3   "expand_block_break": "
    ",
    4   "format_on_save": false,
    5   "format_on_save_action": "expand",
    6   "format_on_save_filter": "\.(css|sass|scss|less)$"
    7 }

    12. TortoiseSVN
      在sublime里面安装svn的插件,就可以在sublime的操作界面里面进行相关svn操作,这样就不用再回到文件系统中,进行相关svn的操作。

      快捷键:
        Alt+C  提交文件
        Alt+U  更新文件
        Alt+R  恢复文件

    13. Terminal
      这个插件可以让你在Sublime中直接使用终端打开你的项目文件夹,并支持使用快捷键。

      快捷键:
        Ctrl+Shift+T  打开文件所在文件夹
        Ctrl+Shift+Alt+T  打开文件所在项目的根目录文件夹

      配置终端路径:
        默认调用系统自带的PowerShell,也可改为Cmder。

    {
      "terminal": "C:\Program Files\cmder\Cmder.exe",
      "parameters": ["/START", "%CWD%"]
    }

    13. CSSComb
      CSScomb是CSS的编码风格格式化程序,您可以轻松地编写自己的配置,使您的样式表美观和一致。
      前提是需要安装Node.js。

      自定义配置:
        可以在CSScomb的官网,设置根据自己的需求构建配置,如下为我所用的配置;
        之后将其放入安装目录的.csscomb.json文件中,覆盖默认设置即可;
        或者在sublime text中打开Preferences -> Package Settings -> CSScomb,参考Settings-Default设置自己的Settings-User。

     1 {
     2   "always-semicolon": true,
     3   "color-case": "lower",
     4   "block-indent": "  ",
     5   "color-shorthand": true,
     6   "element-case": "lower",
     7   "leading-zero": false,
     8   "quotes": "double",
     9   "space-before-colon": "",
    10   "space-after-colon": " ",
    11   "space-before-combinator": " ",
    12   "space-after-combinator": " ",
    13   "space-between-declarations": "
    ",
    14   "space-before-opening-brace": " ",
    15   "space-after-opening-brace": "
    ",
    16   "space-after-selector-delimiter": "
    ",
    17   "space-before-selector-delimiter": "",
    18   "space-before-closing-brace": "
    ",
    19   "strip-spaces": true,
    20   "tab-size": true,
    21   "unitless-zero": true,
    22   "vendor-prefix-align": true
    23 }

      使用方法:
        1.快捷键:Ctrl+Shift+C
        2.鼠标右键:Run CSScomb
        3.Ctrl+Shift+P调出命令面板,输入Run CSScomb

      注意:
        官方文档将css属相按照  定位 展示 大小 样式进行排序,但这样的排列性能并不是最好的。
        更好的顺序应该是:显示属性 自身属性 文本属性 其他修饰属性
        虽然可以在配置文件中修改,不过,好麻烦。。

    14. 主题Theme

      默认主题用的久了,也审美疲劳了。就想着换一个,此次更换的是。

      1. Predawn

      直接从 package control 中下载,以下为主题配置项。

     1 {
     2   "theme": "predawn-DEV.sublime-theme",
     3   // Panel Options
     4   "predawn_findreplace_small": false,
     5   "predawn_quick_panel_small": false,
     6 
     7   // Sidebar Options
     8   "predawn_sidebar_arrows": true,
     9   "predawn_sidebar_large": false,
    10   "predawn_sidebar_medium": false,
    11   "predawn_sidebar_narrow": false,
    12   "predawn_sidebar_small": false,
    13   "predawn_sidebar_xlarge": false,
    14   "predawn_sidebar_xsmall": false,
    15 
    16   // Tabs Options
    17   "predawn_tabs_active_underline": false,
    18   "predawn_tabs_large": false,
    19   "predawn_tabs_medium": true,
    20   "predawn_tabs_small": false
    21 }

      当然代码颜色还是习惯了的好,采用的是Monokai Extended。

    "color_scheme": "Packages/User/SublimeLinter/Monokai Extended Bright (SL).tmTheme",

      效果如下:

      

       2. Seti_UI

      我的配置项如下,更多配置

     1 {
     2   "theme": "Seti.sublime-theme",
     3   "Seti_ClosedFolder_anim": true,
     4   "Seti_accent_teal": true,
     5   "Seti_alt_tree_row": true,
     6   "Seti_bold_heading": true,
     7   "Seti_bold_slctdfile_labels": true,
     8   "Seti_bold_slctdtab_labels": true,
     9   "Seti_no_scroll_icons": true,
    10   "Seti_panel_nrml": true,
    11   "Seti_sb_tree_tiny": true,
    12   "Seti_show_group_arrows": true,
    13   "Seti_sidebar_font_size_12": true,
    14   "Seti_tabs_big": true,
    15   "Seti_teal_map": true,
    16   "Seti_teal_scrollbar": true,
    17   "Seti_teal_statusbar": true,
    18   "Seti_teal_tab": true,
    19   "Seti_teal_tabclose": true,
    20   "Seti_top_heading_anim": true,
    21   "Seti_use_system_title_bar": true,
    22 }

      效果如下:

      

  • 相关阅读:
    电源跳闸或突然断电后Kafka启动失败问题
    Failure to find org.glassfish:javax.el:pom:3.0.1b06SNAPSHOT
    Idea中的maven工程运行Scala报Command execution failed
    Scala(一)入门
    HBase2.0.5
    GridView之CommandField的妙用——点击提示删除
    SharePoint 2010在新窗口打开文档库中的文件
    SharePoint 2010 使用后台代码向SP.UI.ModalDialog.showModalDialog传值
    SharePoint 2010 使用代码创建视图查询条件
    Sharepoint 2010 禁止用户在文档库的第一级(根)目录上传文件
  • 原文地址:https://www.cnblogs.com/huliang56/p/6260774.html
Copyright © 2020-2023  润新知