sublime使用

最新推荐文章于 2022-04-18 17:27:38 发布

之喜郎

最新推荐文章于 2022-04-18 17:27:38 发布

阅读量260

点赞数 1

分类专栏： config 文章标签： sublime 编辑器-插件

本文链接：https://blog.csdn.net/iyanghui/article/details/53332731

版权

config 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

工欲善其事，必先利其器。作为一个前端开发者，没有一个适合自己的且可以自己私人定制的编辑器怎么行呢？！！！

一 .安装Package Control

sublime已经安装好了,但是要想进一步的配置，必须先得安装Package Control，Package Control插件本身是一个为了方便管理插件的插件。下面介绍两种基本的方法安装它：
通过sublime自带的console安装：这种方法比较简单高效。使用Ctrl+`快捷键或者通过View->Show Console菜单打开命令行，根据自己版本的不同，粘贴如下代码：

*sublime text2*

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())

*sublime text3*

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')

手动下载安装：
1.Package Control 主文件下载
下载地址：https://github.com/wbond/sublime_package_control，解压之后将文件名重命名为package control。
2.点击Preferences->Broswer Packages，打开一个文件夹，复制刚才的“package control”文件到该目录下面。
3.重启，打开sublime text 3编辑器，出现preferences->Package Settings和package control选项，就说明安装package control成功了。

二、插件安装

快捷键 Ctrl+Shift+P（菜单 – Tools – Command Paletter），输入 install 选中Install Package并回车，输入或选择你需要的插件回车就安装了（注意左下角的小文字变化，会提示安装成功）。

推荐一下小编用的插件(依据个人实际情况、喜好)

-Emment： 前身是大名鼎鼎的Zen coding，它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度
- SublimeCodeIntel： 一个全功能的 Sublime Text 代码自动补全引擎
- **All Autocomplete： **Sublime Text 默认的 Autocomplete 功能只考虑当前的文件，而这插件会搜索所有打开的文件来寻找匹配的提示词。算是增强版吧
- AutoFileName： 可以帮你补全文件路径，对于小编这种记性不好，文件路径看几遍才能打出来的，这插件简直就是福音
- BracketHighlighter： 配置文件的高亮设置，让你的代码有不同的颜色区分该插件提供配对标签，或大括号或字符引号的配对高亮显示
- ColorPicker： 可以用这插件拾取你需要的颜色
- Autoprefixer： 这个插件主要应用css的浏览器兼容书写，自动分析你的css文件，解析出新的css文件，可以配置你要兼容的浏览器，不过这个插件要在之前安装nodejs
- Color Highlighter： 是一个显示选中颜色代码的视觉颜色的插件,支持所有CSS颜色格式，如Hex,RGB,HSL,HSV,同时包括颜色关键词,如“red““green”,等等
- Less： 支持less语法，同样的还有sass插件
- jsFormat： 格式化js代码，小编用的很少，目前也仅只是用它格式化压缩后的代码
- view in browser: 配置快捷键打开的话，用的是电脑默认浏览器，不过也可以使用默认快捷键，

    CTRL + ALT + F - Firefox
    CTRL + ALT + C - Chrome
    CTRL + ALT + I - Internet Explorer
    CTRL + ALT + S - Safari

NodeJs: 直接在sublime里调试运行js代码能不爽吗？！
TerMinal： 构建前端工程，再也不用嫌页面切来切去浪费时间了，侧边栏项目根目录，右键打开即可cmder(这里小编不得不安利一个性感神器cmder，强烈建议用它代替cmd！！！)
Side Bar： 增强侧边栏
Material Theme： 个人目前发现的最适合的主题

Preferences -> Setting-User

{
    "Theme": "Material-Theme.sublime-theme",
    "caret_extra_width": 3,
    "caret_style": "solid",
    "class": "sidebar_tree",
    "color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme",
    "dark_content": false,
    "default_encoding": "UTF-8",
    "font_face": "Consolas",
    "font_size": 14,
    "ignored_packages":
    [
    ],
    "tab_size": 4,
    "translate_tabs_to_spaces": true,
    "update_check": false,
    "word_wrap": true,
    "wrap_width": 90
}

sidebar配置
先安装PackageResourceViewer插件，接着快捷键 Ctrl+Shift+P ，打开 Command Palette 输入 PackageResourceViewer: Open Resource 回车，打开包列表选择 Theme - Default，再选择 Default.sublimt-theme 搜索 sidebar，小编配置如下：

   {
        "class": "sidebar_heading",
        "parents":
        [
            { "class": "tree_row", "attributes": ["selected"] }
        ],
        "shadow_color": [0, 0, 256]
    },
    {
        "class": "sidebar_label",
        "font.face": "Consolas Italic",
        "font.size" : 16,
        "color": [170, 170, 170],
        "font.bold": false,
        "font.italic": false
        // , "shadow_color": [250, 250, 250], "shadow_offset": [0, 0]
    },
    {
        "class": "sidebar_label",
        "font.size" : 18,
        "parents": [{"class": "tree_row", "attributes": ["hover"]}],
        // "color": [130, 156, 256]
         "color": [150, 210, 256]
        // , "shadow_color": [60, 60, 60], "shadow_offset": [0, 1]
    },    
    {
        "class": "sidebar_label",
        "font.size" : 16,
        "parents": [{"class": "tree_row", "attributes": ["selected"]}],
        "color": [230, 230, 230]
        // , "shadow_color": [60, 60, 60], "shadow_offset": [0, 1]
    },

    {
        "class": "sidebar_label",
        "font.size" : 16,
        "parents": [{"class": "tree_row", "attributes": ["expandable"]}],
        "settings": ["bold_folder_labels"],
        "font.bold": true
    },

    {
        "class": "sidebar_label",
        "font.size" : 16,
        "attributes": ["transient"],
        "font.italic": true
    },