zoukankan      html  css  js  c++  java
  • Sublime Text各种插件使用方法

    有快捷键冲突的时候可以修改快捷键,建议修改插件快捷键而不是Sublime Text的快捷键,我的有冲突的一律将插件快捷键设置成:Ctrl+Alt+A(B...)

    Package Control

    通俗易懂地说,这个是你在完成安装SublimeText后必须安装的东西。你问为什么?因为有了这个特殊的“插件包”,你可以很容易地安装、升级、删除,甚至非常方便地查看您已经安装在SublimeText中的包或插件的列表。它通过菜单和对应的行为使这些过程变得非常容易和有组织。

    Emmet(快捷键为Ctrl+E,习惯用Tab)

    概括地说,Emmet(译者注:前身就是以前大名鼎鼎的Zen Coding,这个如果你没听说和使用过,就悲哀了)是一个可以让你更快更高效地编写HTML和CSS,节省你大量时间的插件。怎么使用?你只需按约定的缩写形式书写而不用写整个代码,然后按“扩展”键,这些缩写就会自动扩展为对应的代码内容。 比如,你只需要输入 ((h4>a[rel=external])+p>img[width=500 height=320])*12 ,然后它会被扩展转换成12个列表项和紧随其后的图像。然后你就可以在此基础上再填写内容,就这么简单。

    生成一个html空模版文件

    html:xt->Tab

    Emmet插件

    生成多个元素,例如20个div:

    div*20->Tab

    Emmet插件1

    生成子元素,例:div->ul->li->a->img 写法

    div>ul>li>a>img->Tab

    Emmet插件3

    生成同级别元素,例:div->ul+div 写法

    div>ul+div->Tab

    Emmet插件4

    生成向上层元素,例:div->ul->上一层添加一个ul 写法

    div>ul^ul->Tab

    Emmet插件5

    生成带序号的元素

    h$*6->Tab

    生成带id或class元素,id写法#id名->Tab ,class写法 .class名->Tab

    Emmet插件6

    Alignment

    这个插件让你能对齐你的代码,包括 PHP、CSS 和 Javascript。代码看起来更简洁和可读,便于编辑。默认是Ctrl+Alt+A,哇,齐了。

    Sublime-HTMLPrettify

    Ctrl + Shift + H,可格式化HTML,CSS,JS,XML等,相当于功能是JsFormat,CssCond,sublimetext_indentxml的结合,功能强大,个人把他设置为了Ctrl + Shift + F,同时需要下载node.js,将node.js的路径配置进去就行了,但是对JSON的格式化不是那么令人满意,所以还是加了JsFormat这个插件

    JsFormat

    Ctrl+Alt+F  格式化js代码

    WebInspector 

    在 JavaScript调试方面,这是一个令人惊讶的工具,Sublime上的完整的代码检查工具。
    功能:使用绝对路径储存在用户设置中的项目断点,控制台,分步和断点调试器,栈追踪。这些都能够很棒的工作!而且Mozilla还提供了一个插件Fireplay让你连接到Firefox 开发工具和最简单的调试器JSHint

    CSSComb

    这是用来给CSS属性进行排序的格式化插件。如果你想保持的代码干净整洁,并且希望按一定的顺序排列(是不是有点强迫症了?),那么这个插件是一种有效解决的方案。特别是当你和其他有自己代码编写风格的开发者一同协作的时候。

    使用方法:Ctrl + Shift + C

    sublimetext_indentxml

    对XML进行格式化,Ctrl + K + F

    AllAutocomplete

    Sublime Text 默认的 Autocomplete 功能只考虑当前的文件,而 AllAutocomplete 插件会搜索所有打开的文件来寻找匹配的提示词,无需重启即可生效。

    BracketHighlighter

    用于匹配括号,引号和html标签。对于很长的代码很有用。安装好之后,不需要设置插件会自动生效。好极了!打开和折叠代码的某一部分就应该是这个样子的。

    SideBarEnhancements

    这个插件可以给SublimeText的边栏菜单带来扩充的功能,包括:在当前工程文件夹中新建文件,移动文件或文件夹,产生文件或文件夹的副本,在新窗口或浏览器中打开,刷新等。这只是概括地说,安装后探索它更多的功能吧。

    修改  Side Bar.sublime-menu文件可以去除不需要的功能,我的最后修改成这样,效果和代码如下:

    [
        {
            "caption": "-",
            "id": "side-bar-start-separator"
        },
    
        {
            "command": "prompt_add_folder",
            "caption": "Add Folder to Project…",
            "mnemonic": "d"
        },
        
        {
            "caption": "-",
            "id": "side-bar-new-separator"
        },
    
        {
            "caption": "Open In Browser",
            "id": "side-bar-open",
            "command": "side_bar_open",
            "args": {
                "paths": []
            }
        },
    
        {
            "caption": "Open the Folder",
            "id": "side-bar-reveal",
            "command": "side_bar_reveal",
            "args": {
                "paths": []
            }
        },
    
        {
            "caption": "-",
            "id": "side-bar-edit-open-separator"
        },
    
        {
            "caption": "-",
            "id": "side-bar-find-separator"
        },
        {
            "caption": "Copy Name",
            "id": "side-bar-clip-copy-name",
            "command": "side_bar_copy_name",
            "args": {
                "paths": []
            }
        },
    
        {
            "caption": "Copy Path (Windows)",
            "id": "side-bar-clip-copy-path-windows",
            "command": "side_bar_copy_path_absolute_from_project_encoded_windows",
            "args": {
                "paths": []
            }
        },
        {
            "caption": "Copy Dir Path",
            "id": "side-bar-clip-copy-dir-path",
            "command": "side_bar_copy_dir_path",
            "args": {
                "paths": []
            }
        },
        {
            "caption": "Copy Path",
            "id": "side-bar-clip-copy-path",
            "command": "side_bar_copy_path",
            "args": {
            "paths": []
            }
        },
        {
            "caption": "Copy Folder Path",
            "id": "side-bar-clip-copy-project-directories",
            "command": "side_bar_copy_project_directories",
            "args": {
            "paths": []
            }
        },
    
        {
            "caption": "-",
            "id": "side-bar-clip-separator"
        },
    
        {
            "caption": "Rename…",
            "id": "side-bar-rename",
            "command": "side_bar_rename",
            "args": {
                "paths": []
            }
        },
        
        {
            "caption": "-",
            "id": "side-bar-duplicate-separator"
        },
    
        {
            "caption": "Duplicate…",
            "id": "side-bar-duplicate",
            "command": "side_bar_duplicate",
            "args": {
                "paths": []
            }
        },
        
        {
            "caption": "-",
            "id": "side-bar-rename-move-separator"
        },
    
        {
            "caption": "Empty",
            "id": "side-bar-empty",
            "command": "side_bar_empty",
            "args": {
                "paths": []
            }
        },
        {
            "caption": "-",
            "id": "side-bar-delete-separator"
        },
    
        {
            "caption": "Refresh",
            "id": "side-bar-refresh",
            "command": "refresh_folder_list"
        },
        {
            "caption": "-",
            "id": "side-bar-refresh-separator"
        },
    ]

    Git

    Sublime Test Git插件下载地址

    虽然名字看上去并不友好,但作为开发者的你肯定一眼就能明白它是干什么的。这个插件会将Git整合进你的SublimeText,使的你可以在SublimeText中运行Git命令,包括添加,提交文件,查看日志,文件注解以及其它Git功能。

    GitGutter或者Modific

    这是一个小巧有用的插件,它会告诉你自上次git commit以来已经改变的行。一个指示器显示在行号的旁边。

    DeleteBlankLines

    删除全部空行:

    注意:
    如果行中带有tab或空格字符则不会被删除,只删除只含有 或 的空行
    在Windows操作系统中:
    Ctrl+Alt+Backspace -- 删除所有空行
    Ctrl+Alt+Shift+Backspace -- 删除多余空行
     
    在OSX操作系统中:
    Ctrl+Alt+Delete -- 删除所有空行
    Ctrl+Alt+Shift+Delete -- 删除多余空行
     
    在Linux操作系统中:
    Ctrl+Alt+Backspace -- 删除所有空行
    Ctrl+Alt+Shift+Backspace -- 删除多余空行

    EditorConfig

    EditorConfig帮助开发者在不同的编辑器,IDE之间定义和维护统一的编程风格。EditorConfig工程包含一个文件,定义了编程风格,文本编辑器插件集合,让编辑器可以读取该文件并依照它来定义风格。例如.editorconfig文件:

    对比查找两个文档的不同Sublimerge Pro

    打开Sublime Text后,接着按 Ctrl+Shift+P,并输入  Install Package ,安装完成之后选择 Compare to View

    Colorpicker

    如果你经常要查看或设置颜色值,这个插件可以很方便地调用你本机的调色板应用。(译者扩充:)这是一个双向的功能,你既可以在调色板中选择一个颜色,然后按“确定”按钮把该值填写到 SublimeText 中活动文档的当前位置,也可以在活动文档中选择一个颜色的值,按此插件的快捷键就会在显示的调色板中定位到该值所对应的颜色。

    使用方法: Ctrl + Shift + C

    DocBlockr

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

    Floobits

    SublimeText, Vim, Emacs, IntelliJ IDEA极佳的扩展工具,它使得开发者可以在从不同的编辑器合作编写代码。

    AutoFileName

    自动补全文件路径-非常方便。没有废话。

    PlainTasks

    杰出的待办事项表!所有的任务都保持在文件中,所以可以很方便的把任务和项目绑定在一起。可以创建项目,贴标签,设置日期。有竞争力的用户界面和快捷键。

    SublimeREPL

    这可能是对程序员最有用的插件。SublimeREPL 允许你在 Sublime Texxt 中运行各种语言(NodeJS , Python,Ruby, Scala 和 Haskell 等等)。

    MarkdownEditing

    可能是Markdonw最好的插件了:语法高亮,缩略词,自动补全,配色方案。你也可以尝试使用MarkdownPreview作为替代解决方案。

    MarkdownPreview

    SublimeText不仅仅是能够查看和编辑 Markdown 文件,但它会视它们为格式很糟糕的纯文本。这个插件通过适当的颜色高亮和其它功能来更好地完成这些任务。

    CodeIntel

    Sublime CodeIntel是我最喜欢的插件,它提供了很多IDE提供的功能,例如代码自动补齐,快速跳转到变量定义,在状态栏显示函数快捷信息等。

    它支持的语言有:PHP, Python, RHTML, JavaScript, Smarty, Mason, Node.js, XBL, Tcl, HTML, HTML5, TemplateToolkit, XUL, Django, Perl, Ruby, Python3.

    虽然有时候有点小问题,但真的能节省很多时间。强烈推荐安装。

    Terminal

    这个插件可以让你在Sublime中直接使用终端打开你的项目文件夹,并支持使用快捷键。默认是Ctrl+Alt+T  调出控制台,快捷键跟Sublime Text冲突,需要修改快捷键,我的修改为Ctrl+Alt+T

    Prefixr

    由于CSS3和HTML5的W3C规范都尚未统一,各大浏览器对标准的支持还是有差异的。所以在编写CSS3代码还需要针对不同的浏览器写一堆的CSS3代码前缀。Prefixr插件能将CSS3代码自动生成跨浏览器CSS代码。

    JSLint

    JSLint是一个Javascript代码质量检测工具。它可以告诉你代码的什么地方需要改进。虽然你也可以在网上检测,但这个插件能让你不打开浏览器,直接在Sublime里面检测。

    使用方法:按下Shift + Command + P(Mac)或是Ctrl + Shift + P(Windows)调出命令面板,找到JSLint: Run JSLint,按下Enter,JSLint会输出结果到状态栏。

    Linter

    这个插件最近才为SublimeText3重建和发布。新版本显然带来了很多新的有所不同的功能,而不是简单地把所有的Linter 放在一个包中,开发者允许用户在升级时选择并安装自己经常使用的Linter。很明显,这可以节省磁盘空间。“更多的定制”,这对用户是很友好的。

    CanIUse

    如果您想检查浏览器是否支持你包括在你的代码中的CSS和HTML元素,那么这是你需要的插件。所有您需要做的就是选择有疑问的元素,插件将为你做其余的事情。

    FTPSync

    默认情况下SublimeText不具备FTP的功能,如果你正在寻找能在您的SublimeText应用程序中使用的免费和易用的FTP工具,你可以考虑FTPSync。这是一个非常简单的FTP同步工具,它可以控制上传目标的多重命名。让我们知道您的想法。

    SASS Build

    SASS Build 是一个编写CSS的预处理器。这个特别的插件将帮助你妥善构建包括压缩选项在内的SASS文件。一旦你安装了这个插件,你可以很容易地通过按Ctrl+ B(MAC系统是 Command +B)来启动它。

    PackageResourceViewer

    通过这个特殊的插件,会给你查看和编辑SublimeText附带的不同的包带来很多方便。您也可以提取任何给定的包。这一行动将其复制到用户文件夹,以便您可以安全地对其进行编辑。

    Trmmer

    你知道当你编写代码时,由于错误或别的某些原因,会产生一些不必要的空格。需要注意的是多余的空格有时也会造成错误。这个插件会自动删除这些不必要的空格。

    FileDiffs

    这个插件允许你看到SublimeText中两个不同文件的差异。你可以比较的对象可以是从剪贴板中复制的数据,或工程中的文件,当前打开的文件等。

    • Sublime SFTP
    • CTags – 让Sublime Text支持CTags.
    • ActualVim – Vim in Sublime – 两个最爱的编辑器合二为一.
    • SublimeLinter – 行内语法检测插件,支持: C/C++, Java, Python, PHP, JS, HTML, CSS, etc.
    • FixMyJSJsfmt and JsFormat – JS/JSON代码风格格式化.
    • AStyleFormatter – C/C++/C#/Java 代码风格格式化.
    • SVG-Snippets – 一套 SVG 代码片段.
    • Inc-Dec-Value – 增加或减少数字, 日期, 十六进制彩色值等等。
    • Trailing Spaces – 高亮空白结尾并快速删除它们
    • Placeholders – 带有文本,图片,列表,表格等的占位用代码片段
    • ApplySyntax – 快速语法检测
    • StylToken – 允许以不同的颜色高亮特定的一段文本 (类似和notepad++ 的Style token功能).
    • EasyMotion – 快速跳转到任何当前激活视图而已看到区域的字符
    • ZenTabs 和Advanced?New?File – 改进默认tab样式和文件创建.
    • EncodingHelper – 猜测文本的编码方式,在状态栏显示,从不同的编码形式转换到UTF-8
    • Gist – 同步GitHub Gist和Sublime (ST2).
    • Clipboard History (ST2) – 为的剪切板保存历史记录

     

  • 相关阅读:
    [转]django自定义表单提交
    [django/mysql] 使用distinct在mysql中查询多条不重复记录值的解决办法
    [Django]下拉表单与模型查询
    [Django]模型提高部分--聚合(group by)和条件表达式+数据库函数
    [Django]模型学习记录篇--基础
    [Django]数据批量导入
    怎么让自己的本地php网站让别人访问到
    HTML Marquee跑马灯
    marquee标签详解
    apache的虚拟域名rewrite配置以及.htaccess的使用。
  • 原文地址:https://www.cnblogs.com/tufujie/p/5060768.html
Copyright © 2011-2022 走看看