常用插件,Sublime的强大远不止如此

作者: mgm娱乐网址  发布:2020-03-02

作为一个WEB前端工作者,是否思考过这个问题:对于代码的编写效率是否有比较大的进步,也许对于大部分人来说都有一个瓶颈,如何突破它,如何提高工作效率,需要我们自己深入研究了。

作者:mqliutie
原文地址:http://segmentfault.com/a/1190000002748032

  • 面向对象:用过Dreamweaver的热血小白

  • 针对问题:能在DW上写出简单的静态页面,感觉自己叼叼的,请问接下来要怎么进阶

  • 主要内容如下:

    • 闲话新手进阶学习
    • Sublime的下载安装
    • Sublime的常用快捷键
    • Sublime的常用插件与配置
    • Sublime的缺少PyV8
  • 字数:1600

编写 HTML、CSS 代码始终占据了很大的工作比例,特别是手动编写 HTML 代码,效率特别低下,因为需要敲打各种“尖括号”、闭合标签等,时间一长感觉枯燥无比,脑壳发胀啊。工作之余无意中在某个交流群里发现有人提到过一个插件:Emmet;然后研究了下,发现它其实就是Zen Coding升级版了,只不过换了个“马甲”而已,接下来就详细介绍下Emmet。

美高梅app 1


Emmet目前支持的编辑器:

常用插件 :

闲话新手进阶学习

首先,恭喜你已经能够做出静态页面。如果现在让你用记事本,你还能不能轻松地实现之前做过的那些页面?
小心建议你接下来的进阶,不是学更多新东西,而是夯实你的基础。那么要夯实什么基础?如你所见,如果没了代码提示,你的编程并不会顺利,你会忘了很多再基础不过的东西。
基础的东西,怎么强调都不过分。类库框架会变,只会用别人的轮子,你只能被动追赶。


DreamweaverSublime Text 2Sublime Text 3 TextMate 1.xEclipse/AptanaCoda 1.6 and 2.xEspressoChocolat (可以通过 “Install Mixin” 对话框安装)Komodo Edit/IDE Notepad++PSPad

  1. SideBarEnhancements
  2. HTML-CSS-JS Prettify
  3. BracketHighlighter
  4. SublimeCodeIntel
  5. Emmet
  6. CTags
  7. Markdown Editing 和 Markdown Preview

Sublime的下载安装

下载Sublime3,如果有问题就搜别的试试,注意32位还是64位,建议直接上ST3,插件异步加载,装太多也不怕启动慢。

CodeMirror2/3Brackets

SideBarEnhancements

Sublime Text有一个缺点,当你想使用浏览器浏览你的html页面的时候,你需要在你的文件上点击鼠标右键,选择Open In Browser才可以浏览器浏览,而这是用默认浏览器浏览,如果想用第二个浏览器都没办法。所以,可以通过SideBarEnhancements美高梅app ,这个插件来更方便的浏览。

第一步:安装

通过Package Control->Install Package搜索sidebarenhancements安装。

mgm娱乐网址 ,第二步:配置 ( 一 )

右键某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就是 SafariF2FirefoxF4Chrome.

Sublime的常用快捷键

  • Ctrl + Shift + P : 打开命令框,执行各种命令用的
  • 在命令框中输入ss+语言,可以快速切换语法高亮,如"ssphp"
  • Ctrl + P : 快速查找文件,输入你要查找的文件名或路径,快速模糊查询,如“p/s/h/c/”能找出实际的"public/static/home/css/"下面的所有文件
  • Ctrl + P :先输入@,可以在Css文件中快速查找类名id名标签名
  • Ctrl + F : 快速搜索当前文本下的内容
  • Ctrl + D :选中某个单词后,按住Ctrl,然后点击D,就能快速选中下一个同名的单词
  • Ctrl + K :跳过某个单词,然后按D继续查找
  • Ctrl + 鼠标左键 : 在点击的地方产生新的游标,用来产生多行游标
  • Ctrl + Enter :在本行下面新建空行,相当于按了End再按回车,不能更爽
  • Ctrl + Shift + Enter : 在本行上面新建空行
  • Ctrl + /: 对每一,快速注释或取消注释
  • Ctrl + Shift + / :对一整,快速注释或取消注释

安装Emmet:

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文件。

Sublime的常用插件与配置

在用户配置文件里添加即可,Preferences->用户设置,然后粘贴相应的语句即可:

  • "word_wrap" : true,:开启自动换行,如果你希望代码不会超出页面视野,不用拉动水平滚动条才能看
  • "save_on_focus_lost": true,:当前页面失去焦点后会自动保存,也就是你切换到其他标签或者别的软件后,刚才做的修改就会自动保存了
{
    "color_scheme": "Packages/Colorsublime - Themes/Darkside_light_selection.tmTheme",
    "font_size": 13,
    "ignored_packages":
    [
        "Vintage"
    ],
    "save_on_focus_lost": true,
    "word_wrap": true
}

要想装插件,首先得装一个用来下载安装插件的插件,它就是Package Controller,这个比较特殊,我们单独做下介绍。

  • 使用Ctrl+`快捷键或者通过View->Show Console菜单打开命令行,粘贴如下代码:
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())
  • 回车等待安装,看看左下角,应该有个小东西再左右游动。等它停了,如果顺利的话,此时就可以在Preferences菜单下看到Package Settings和Package Control两个菜单了。

  • 顺便贴下Sublime Text2 的代码:

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')
  • 以上方法也有可能失败,还通过以下步骤手动安装Package Control:

    1. 点击Preferences > Browse Packages菜单

    2. 进入打开的目录的上层目录,然后再进入Installed Packages/目录

    3. 下载
      Package Control.sublime-package
      并复制到Installed Packages/目录

    4. 重启Sublime Text。

完成Package Controll的安装后就可以开始装你想要的插件了。使用默认快捷键Ctrl+Shift+P唤出命令框,输入PCI就有了,也就是package controll install的缩写,接着就可以输入相关插件的名称搜索,选中即可开始下载安装,这里仅推荐两个,其他的还得你自己发掘

  • Emmet : 前端编码神器。
    Emmet 生成 HTML 的语法
  • HTML/CSS/JS Prettify:格式化代码,你想看看别人网站的源码?每次打开都是一大坨?它可以帮你快速格式化成方便阅读的代码。依赖NODE.JS,这个权当抛砖引玉,感兴趣可以看看。
  • 别的东西,看你需要了,以上两个对新手来说够用了。
    • 全栈开发必备的10款Sublime Text 插件
    • sublime text 3 插件推荐

我目前使用的是Dreamweaver CS6和Sublime text3,看大家习惯了。我就讲讲如何在Dreamweaver CS6中使用emmet。

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是设置颜色,英文介绍没看懂怎么替换颜色。

Sublime的缺少PyV8

  • ### emmet的tab功能不完全,比如,不能实现div.test#test$*6

    • 通过package control安装Emmet插件,而后提示安装PyV8,问题就出现在这里。
    • 下载对应的压缩包解压,
    • 修改文件夹名字为“PyV8",然后拷贝到安装目录下Sublime Text 3Installed Packages 文件夹下即可

我是小心,以上只是针对小白所做的推荐和介绍,Sublime的强大远不止如此,如果哪里讲的不对还请大佬斧正。

本文由mgm娱乐网址发布于mgm娱乐网址,转载请注明出处:常用插件,Sublime的强大远不止如此

关键词: