zoukankan      html  css  js  c++  java
  • sulime的必备插件

    常用插件 :

    SideBarEnhancements
    HTML-CSS-JS Prettify
    BracketHighlighter
    SublimeCodeIntel
    Emmet
    CTags
    Markdown Editing 和 Markdown Preview
    SideBarEnhancements
    Sublime Text有一个缺点,当你想使用浏览器浏览你的html页面的时候,你需要在你的文件上点击鼠标右键,选择Open In Browser才可以浏览器浏览,而这是用默认浏览器浏览,如果想用第二个浏览器都没办法. 所以,可以通过SideBarEnhancements这个插件来更方便的浏览

    第一步 : 安装
    通过Package Control->Install Package搜索sidebarenhancements安装

    第二步 : 配置 ( 一 )
    右键某html,js,css等文件,找到Open With 然后点击Edit Applications
    将里面内容设置为:

    [
    {"id": "side-bar-files-open-with",
    "children":
    [

            {
                "caption": "Firefox",
                "id": "side-bar-files-open-with-chrome",
    
                "command": "side_bar_files_open_with",
                "args": {
                            "paths": [],
                            "application": "/Applications/Firefox.app", 
                            //火狐浏览器的路径 Windows中,后缀为.exe
                            "extensions":".*", 
                            "args":[]
                        },
                "open_automatically" : false 
            },
    
            {
                "caption": "Chrome",
                "id": "side-bar-files-open-with-chrome",
    
                "command": "side_bar_files_open_with",
                "args": {
                            "paths": [],
                            "application": "/Applications/Chrome.app",
                            //Chrome浏览器的路径 Windows中,后缀为.exe
                            "extensions":".*", 
                            "args":[]
                        },
                "open_automatically" : false
            },
            
            //如果想再添加浏览器,复制下面这个对象,改相应的路径就可以了.
            {
                "caption": "Safari",
                "id": "side-bar-files-open-with-chrome",
    
                "command": "side_bar_files_open_with",
                "args": {
                            "paths": [],
                            "application": "/Applications/Safari.app",
                            //Safari浏览器的路径 Windows中,后缀为.exe
                            "extensions":".*", 
                            "args":[]
                        },
                "open_automatically" : false 
            }
        
            
        ]
    }
    

    ]
    第三步 : 配置 ( 二 )
    打开Preferences 里面的 Key Bindings - User把内容修改为:

    //keys 对应的值就是按键,比如按F2就会用Firefox打开这个页面
    [
    { "keys": ["f2"], "command": "side_bar_files_open_with",
    "args": {
    "paths": [],
    "application": "/Applications/Firefox.app",
    //对应上面的Firefox路径
    "extensions":".*"
    }
    },

    { "keys": ["f1"], "command": "side_bar_files_open_with",
            "args": {
                "paths": [],
                "application": "/Applications/Safari.app",
                //对应上面的Safari路径
                "extensions":".*" 
            } 
    },
    
    //如果有新添加的浏览器,只需要把下面这个对象复制一份,路径与新添加的对应就可以了.
    { "keys": ["f4"], "command": "side_bar_files_open_with",
            "args": {
                "paths": [],
                "application": "/Applications/Chrome.app",
                //对应上面的Chrome路径
                "extensions":".*" 
            } 
    }
    

    ]
    现在,F1就是 Safari,F2是Firefox,F4是 Chrome

    HTML-CSS-JS Prettify
    第一步 : 安装
    通过Package Control->Install Package搜索HTML-CSS-JS Prettify安装

    第二步 : 使用
    选中格式化代码,然后在按Cmd+Shift+H (如果是Windows系统按 Ctrl+Shift+H,这两个快捷键是默认的).
    但是,这时候如果报错sh: node: command not found,说明node没有安装,那么就需要安装node. 安装好后,Linux和Mac不需要做什么更改,而Windows用户则需要配置一下node_path.
    首先,在菜单栏里点击Preferences点击第一个Browse Packages,然后进入HTML-CSS-JS Prettify文件夹,找到HTMLPrettify.sublime-settings文件,用Sublime Text打开进行更改windows对应的值,就是安装的node的路径
    第三步 : 配置 ( 快捷键 )
    如果对快捷键不满意,可以自己设置 . 打开Preferences 里面的 Key Bindings - User,添加内容:{ "keys": ["alt+q"], "command": "htmlprettify" },当然快捷键你可以自己更改.
    第四步 : 配置 ( 代码整理样式 )
    如果对代码对其效果不满意,可以选择Preferences里的Package Settings找到HTML/CSS/JS Prettify里的Set Prettify Preferences .里面是一些规则的设置. 这个文件就是github(详细设置可到github中看)中提到的.jsbeautifyrc文件
    BracketHighlighter
    这个插件功能是匹配括号,在行号前面可以看到匹配括号的位置.

    第一步 : 安装
    通过Package Control->Install Package搜索BracketHighlighter安装

    第二步 : 配置
    将preferences-->package settings-->Bracket highlighter-->Bracket settings-Default内容复制到Bracket settings-User中,因为default里面的内容是不可更改的,即使能更改,一旦插件更新,更改就会消失,所以尽量在User中设置.按Command+F(或者ctrl+F)搜索color,找到下所示

    "default": {
    "icon": "dot", //行号前面的匹配图标
    "color": "brackethighlighter.default",
    "style": "solid"//样式,可以使solid, outline, underline, hightlight和none.(solid和highlight是一样的)
    },

        "unmatched": {
            "icon": "question",
            "style": "outline"
        },
        "curly": { //花括号
            "icon": "curly_bracket"
            // "color": "brackethighlighter.curly",
            //"style" : "underline"
            //这里面可以单独设置自己的样式,下面的一样
        },
        "round": { //圆括号
            "icon": "round_bracket"
        },
        "square": { 方括号
            "icon": "square_bracket"
        },
        ....//下面还有一些其他符号
    

    color是设置颜色,英文介绍没看懂怎么替换颜色

    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.

    它还有一个功能,就是跳转到函数定义的地方

    怪事 :
    这个插件真的是非常怪,第一次安装的时候如果不进行第二步的配置就没有代码提示,于是进行第二步配置,但是配置后函数跳转功能没有.紧接着我remove package然后重新安装,还是不能跳转,我将"Setting User"中的所有内容删除,函数跳转功能有了.然后紧接着我又将Default的内容全部复制到User中.函数跳转功能还有,代码提示功能也有.紧接着我又按照第二步修改过后,函数跳转功能还有,代码提示功能也有.弄不懂了- -+,反正现在能用就行
    可能是我人品差吧,,,同学安装后什么也没做,什么功能都有 . 而我折腾半天

    第一步 : 安装
    通过Package Control->Install Package搜索SublimeCodeIntel安装.
    (安装过程中非常慢,慢慢等着吧,我挂了VPN快了不少)

    第二步 : 配置
    选择Preferences->Package Settings->SublimeCodeIntel->Setting Default,将其内容全部复制到Setting User中 . 按Command+F(或者ctrl+F)搜索codeintel_selected_catalogs,将其内容改为如下:

    "codeintel_selected_catalogs": [
    "HTML5", "HTML", "JavaScript"
    ],
    第三步 : 使用
    按d会提示div tag 选择这个div tag 就会出现 :

    但输入div.class或者div#id,按下Tab会出现下面效果 :
    这个功能2其实Emmet也有,但是Emmet没有功能1的代码提示

    Emmet
    Emmet (前身为大名鼎鼎的Zen Coding)是一个能大幅度提高前端开发效率的一个工具:

    第一步 : 安装
    通过Package Control->Install Package搜索Emmet安装.

    第二步 : 使用
    快速设置class属性和id属性,在SublimeCodeIntel插件功能2就可以了,但是下面的功能SublimeCodeIntel却没有:

    输入ul>li*5,按下Tab,会有如下结果 :

    更多使用方法可以 百度,Google 搜索这个插件怎么用,也可以去官方文档查看.

    第三步 : 配置
    Emmet还有一个功能,选取相同词,可以一次更改多个词,在mac中默认快捷键是Canmand+D(我记得是,要不然我也不会改键).

    我习惯Cammand+D(Ctrl+d)是删除当前行,所以在Preferences->Key Bindings - User添加下面这两行:

    { "keys": ["command+shift+d"], "command":"find_under_expand" },
    { "keys": ["command+d"], "command":"run_macro_file", "args": {"file":"Packages/Default/Delete Line.sublime-macro"} }
    // 修改过后,command+shift+d就是选取相同的词,command+d删除当前行
    CTags
    这个插件的功能就是跳转到函数定义的地方去.SublimeCodeIntel也有这个功能,因为当时安装 SublimeCodeIntel是跳转有问题,所以找到了它(感觉它不如SublimeCodeIntel)

    第一步 : 安装插件
    Package Control->Install Package搜索CTags安装

    第二步 : 安装ctags
    要想ctags插件可以使用,先要在相应的项目目录生成.tags文件,而生成这个文件,就需要在系统中安装ctags.
    Windows安装:
    下载ctags.exe . 通过 Preference -> Package Settings -> Ctags -> Settings Default 中的内容拷贝到 Setting User中,将 "command": "" 中的 "" 填入Ctags.exe的 路径位置
    Linux安装 :
    终端中依次输入下列语句:
    sudo apt-get install exuberant-ctags
    sudo yum install ctags
    //依赖yum管理工具,需要先安装.注意安装事项
    Mac安装 :
    如果有有MacPorts就用第一个命令,如果有Homebrew就用第二个命令
    port install ctags //需要安装MacPorts
    brew install ctags //需要安装Homebrew
    如果两个都没有,我推荐使用Homebrew,因为命令安装,不麻烦,终端输入下列命令 :
    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    // 安装时碰到一句话Press ENTER to continue or any other key to abort,按Enter键继续(我记得我碰到的是Return,所以以为是删除键).输入密码安装完毕.
    brew install ctags //ctags安装完毕
    第三步 : 配置
    将下列代码复制到Preferences->Package Settings->CTags->Setting User中保存 :

    {
    "command": "/usr/local/bin/ctags",
    "autocomplete": true
    }
    第四步 : 使用
    终端进入项目根目录,运行:

    ctags -R -f .tags
    在Sublime Text中的项目根目录点击鼠标右键会出现CTags : Rebuild Tags,点击后就会出现.tags文件和.tags_sorted_by_file文件.

    现在找到一个调用函数的地方,选中函数名,鼠标右键选择Navigate to Defination,就会直接跳到函数声明的地方.

    问题 :
    Ctags问题

    Markdown Editing 和 Markdown Preview
    当在 Sublime Text 中编写 markdown 文件时,直接按浏览器浏览全是乱码,而且还没有将 markdown 文件解析成相应的 HTML. 这两个插件的功能就是可以用浏览器浏览 Sublime Text 中编写的 markdown文件 .

    第一步 : 安装插件
    Package Control->Install Package搜索Markdown Editing和Markdown Preview安装.

    第二步 : 配置
    打开 Preferences->Package Settings->Markdown Preview->Setting User 将下面这句话粘贴进去

    全选复制放进笔记{
    "browser" : "/Applications/Chrome.app"
    // "浏览markdown的浏览器的路径"
    }
    打开Preferences->Key Binding User,添加下面一句话

    { "keys": ["f6"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"} },
    keys的值是以上面浏览器预览markdown文件.

    第三步 : 使用
    新建一个 index.md ,编写 markdown 格式的内容 写完以后按F6(我自己设置的时F6)就会看到Chrome中显示的时解析后的样子.
    2015年05月09日发布

    不积跬步,无以至千里,不积小流,无以成江海! 实践则生,空谈则死!
  • 相关阅读:
    SQL Server 中的事务与事务隔离级别以及如何理解脏读, 未提交读,不可重复读和幻读产生的过程和原因
    微软BI 之SSIS 系列
    微软BI 之SSIS 系列
    微软BI 之SSIS 系列
    微软BI 之SSIS 系列
    微软BI 之SSIS 系列
    微软BI 之SSAS 系列
    微软BI 之SSRS 系列
    微软BI 之SSRS 系列
    配置 SQL Server Email 发送以及 Job 的 Notification通知功能
  • 原文地址:https://www.cnblogs.com/renboqie/p/5565605.html
Copyright © 2011-2022 走看看