hk
  • 671

能让你开发效率翻倍的 sublime 插件配置

sublime-setting

工欲善其事必先利其器(配置sublime前端开发环境)

下载:

直接到官网下载安装sublime
官网直达

安装插件

新版的sublime已经默认安装了package control,我们可以通过package control 安装适合自己的插件。如果没有安装package control,直接按command + shift + p 唤出命令列表,(windows用户把command键改为crtl键)输入install,点击install package control,耐心等待安装好package control会有弹框提示。

以下三步为安装插件的方法:

  • 在sublime界面中,mac用户使用command + shift + p 唤出package control 命令列表,windows用户使用crtl + shift + p,为了方便本文中所有提到command键都是指windows中的crtl键。

  • 在输入框中输入install,点击列表中的第一项(Package control:install package),点击后列表会消失然后等待片刻,等sublime去加载完列表,会又弹出列表。

  • 等插件列表加载出来后,输入想要安装的插件,会加载相应的插件,点击就会自动下载安装了,然后重复以上3步下载其它插件。

  • 如果安装了一个插件,但是配置文件修改错了并且无法恢复,可以删除这个插件然后重新安装。删除的步骤:command + shift + p => 输入remove => 点击列表中要卸载的插件,稍等即可

常用插件和使用方法

1. Emmet

在package control 中输入emmet,选中第一个Emmet,Emmet前身是大名鼎鼎的Zen Coding,主要使用到它的两大功能:

  • 自定义代码片段

    在窗口顶栏中找到 perferences -> Package Settings -> Emmet -> setting-user
    在文件中可以配置自定义模板,比如:

    {
        "snippets": {
            "html": {
                    "snippets": {
                    "hkhtml": "<!DOCTYPE html>\n<html>\n\n<head>\n    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />\n    <title>todo-title</title>\n    <!-- 使用chrome和最新版ie渲染 -->\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\" />\n    <!-- SEO页面关键词 -->\n    <meta name=\"keywords\" content=\"todo-content\" />\n    <!-- SEO页面描述 -->\n    <meta name=\"description\" content=\"todo-des\" />\n    <!-- 作者 -->\n    <meta name=\"author\" content=\"hekui\" />\n    <!-- 图标 -->\n    <link rel=\"shortcut icon\" type=\"image/ico\" href=\"/todo.ico\" />\n     <!-- 移动端 -->\n     <!--     <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no\" /> -->\n\n    <!-- 引入js-cdn,修改vue可引入其它库(cdn地址类式) -->\n    <script src=\"https://unpkg.com/vue\"></script>\n    <!-- 样式重置 -->\n    <link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.bootcss.com/meyer-reset/2.0/reset.min.css\">\n</head>\n<body>\n</body>\n</html>"
                    },
                "abbreviations": {
    
    
                }
            }
        }
    }

    以上配置了hkhtml这个代码块,只要在sublime中输入hkhtml然后按tab键,就会自动生成后面的代码,效果如下:

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>todo-title</title>
        <!-- 使用chrome和最新版ie渲染 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <!-- SEO页面关键词 -->
        <meta name="keywords" content="todo-content" />
        <!-- SEO页面描述 -->
        <meta name="description" content="todo-des" />
        <!-- 作者 -->
        <meta name="author" content="hekui" />
        <!-- 图标 -->
        <link rel="shortcut icon" type="image/ico" href="/todo.ico" />
         <!-- 移动端 -->
         <!--     <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> -->
    
        <!-- 引入js-cdn,修改vue可引入其它库(cdn地址类式) -->
        <script src="https://unpkg.com/vue"></script>
        <!-- 样式重置 -->
        <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/meyer-reset/2.0/reset.min.css">
    </head>
    <body>
    </body>
    
    </html>

    你可以把经常使用的代码设置成代码块,然后用快捷键来代替,这对于平时写个小demo或者写个练手项目还是很方便的,我会维护一个全面的常用代码块,需要请关注本文github地址

  • 除了可以自定义代码片段,emmet还自带了代码片段功能,Emmet提供了很多快捷生成代码的规则,个人觉得只需要记住最常用的几个就够了,例如:

    div>(header>ul>li*2>a)+footer>p 会生成代码 =>>

    <div>
        <header>
            <ul>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </header>
        <footer>
            <p></p>
        </footer>
    </div>
    

    上面例子中,> 表示父子关系,+ 表示兄弟关系 ,()表示优先级,* 表示标签有几个

    有比如:
    div#header.wide>p.class1.class2 会生成代码 =>>

        <div id = "header" class = "wide">
            <p class = "class1 class2"></p>
        </div>

    上面例子中,在标签后面加上#表示id值,加上.表示class值,多个class和id可以混写在一起

    最后,如果你安装Emmet不成功,可能是没有翻墙,请戳 -> 一枝红杏 vpn

2. SideBarEnhancements

SideBarEnhancements 插件大大增强了侧边栏的功能,比如可以移动文件、重命名文件、删除文件、备份文件、在磁盘中打开文件目录、双栏编辑文件、在浏览器中预览文件等,功能很简单只需要一个个尝试下就好了,是一个好用而简单的插件。

其中在浏览器中打开的功能,可以代替view in browser这个插件,你可以指定它打开网页的浏览器,这样就不会担心360浏览器等浏览器捣乱了。(就算默认浏览器是360,只要你在sublime中指定了浏览器,会用指定的浏览器打开)。

指定浏览器配置如下:

perferences -> Package Settings -> Side Bar -> setting-user

{
    "default_browser": "chrome" //one of this list: firefox, aurora, chrome, canary, chromium, opera, safari
}

3. HTML-CSS-JS Prettify

HTML-CSS-JS Prettify 是一款格式化代码的工具,安装好后,只需要command + shift + h 快捷键就可以格式化代码,或者 右键 -> HTML-CSS-JS Prettify -> prettify code 也可以格式化代码。

prettify的安装需要依赖node.js,你需要安装node.js,如果还没有安装请戳 => node.js官网

如果你已经安装了node.js 但是还是提示缺失node.js,或者提示路径不对, 你需要在prettify中配置node.js的路径.

perferences -> Package Settings -> HTML-CSS-JS Prettify -> set node path 把文件中的node.js路径设置成正确的就ok了,顺便提一句,只要把format_on_save 设置为 true,在每次保存文件的时候,它就会自动格式化代码了。

4. Doc​Blockr

DocBlockr 可以跟js方法加上注释,虽然是不需要跟每个js方法加上注释的,但是在一些重要的、难懂的方法上加上注释是很必要的。

安装好DocBlockr 在js方法前输入/**然后按下tab键就会生成注释的格式,如果你需要在注释里加上作者和日期等信息,就需要去配置下。下面配置加上了作者和日期。

perferences -> Package Settings -> DocBlockr -> setting-user

 {
    "jsdocs_extra_tags": [
        "@Author hekui",
        "@DateTime {{date}}",
    ],
    "jsdocs_function_description": true
}

5. SublimeLinter

SublimeLinter 是一个语法检查器插件,安装它以后就可以很容易就提示出一些低级错误

要想SublimeLinter 生效,你还得安装对应的语法检查器,SublimeLinter-csslint和SublimeLinter-jshint,安装方法和安装普通sublime插件一样,它们分别检查js代码和css代码

安装完这两个插件,还需要通过npm安装对应的eslint 和 csslint,最后才能生效。

在命令行输入npm install -g csslint 安装csslint,输入npm install -g jshint 安装jshint,到最后这个css和js语法检查插件就装好了。如果你需要配置sublimelinter只需要右键=>sublimelinter就可以设置了,当然如果你想通过配置文件更详细的配置也是可以的。

6. LiveReload

修改过代码后,网页会自动刷新,这是会让很多人都心动的功能,而LiveReload就实现了这个功能。

首先得安装LiveReload插件,正常通过package control安装就可以了,然后配置一下

Preference>Package Settings>LiveReload>Settings User

{
   "enabled_plugins": [
       "SimpleReloadPlugin",
       "SimpleRefresh"
   ]
}

最后在浏览器中安装LiveReload插件,我一般使用的是chrome,所以直接在chrome商店中直接下载安装就好了,安装好后在右上角插件列表中右键LiveReload点击管理扩展程序,进入liveReload设置界面,把允许访问文件网址勾选上就ok了。

然后在浏览器中打开需要实时刷新的网页,在右上角把liveReload这个插件点击一下,图标会变成实心的就ok了。

最后一步,是需要打开sublime中liveReload服务(前面步骤只是安装了,并没有打开服务),command + shift + p => 输入liveReload然后选择LiveReload:Enable/disable plug-ins => 输入simple 选择 Enable - simple Reload,到这里网页实时刷新的功能就实现了。

以后需要自动刷新网页的时候,就只需要3部,首先在浏览器中打开网页然后在右上角点击liveReload插件打开浏览端liveReload功能,然后在sublime中打开liveReload服务(sublime在第一次打开的时候需要重新打开liveReload服务,如果没关闭过不需要重新打开liveReload服务)。

当然,访问chrome应用商店需要翻墙,请戳 -> 一枝红杏 vpn

7. SublimeTmpl

通过SublimeTmpl可以新建一个文件的时候自定义模板,安装好后在file栏目中会有new file (SublimeTmpl)这一项,选择要新建的文件就可以新建自定义模板的文件。

通过配置这个文件可以修改new file(sublimeTpl)的子目录列表:
Preference>Package Settings> SublimeTmpl>menu default

你写的模板文件需要存放在/Packages/SublimeTmpl/templates这个目录下,如果你配置的vue文件,文件名应该为vue.tmpl,文件内容就是新建vue文件的默认模板。

8. FileDiffs

fileDiffs 提供了对比文件对比功能,通过package control安装后,通过diff with previous 和前一个文件对比,diff with clipboard 就是和剪切板代码对比,对比后会生成一个对比之后的文件,这在拷贝代码和学习代码的时候非常有用。

9. AutoFileName

AutoFileName 提供了文件路径提示功能,比如你要选择images文件夹下的一个图片,输入images/后会提示出图片列表给你选择,安装方法还是通过package control安装。在输入文件路径的时候会自动提示。

10. ColorPicker

ColorPicker提供了颜色面板选择的功能,写个demo啥的还是很方便的,通过package control 安装即可。commond + shift + c 会唤出调色面板

总结

一共凑了十个插件,应该来说都是通用的并且可以大大提高生产效率的插件,当然你还可以安装一些个性化的插件,比如你以vue作为技术栈就可能需要安装vue相关的插件,用sass写模块化css就需要安装sass bulid插件。

如果是在过去,我肯定不会花这么大精力来装sublime插件和写对应的博客,在写完后还是感觉有蛮大的帮助的。

每天进步一点点,愿学前端能改变你我以后的生活。

阅读 6.9k更新于 2017-11-21
推荐阅读

让自己进步的同时,也让别人进步,这是一件快乐的事!

36 人关注
11 篇文章
专栏主页
目录