sublime3安装及插件安装实测

大道小路
784 阅读6分钟

作为一名前端，编辑器是必不可少一个工具，虽然最近微软良心作品：vsCode，以其安装简单、免费、安装插件方便等优点而迅速占据各大前端大牛的内心，但是对于前几年已经习惯了Sublime的我们来说，日常仍是不自觉的喜欢用Sublime来编写代码，以下就结合实际来总结Sublime的安装方法以及部分插件的安装：

  1. 点开sublime的官网（www.sublimetext.com/3）根据各自的电脑来下载对应的安装包,一般的话都是选择 windows的64 系统，下载后解压缩就OK

  1. 安装的话不会遇到什么问题，但是Sublime强大的地方就是它的插件，但是package control 安装不了，一般都是ctrl+`，这个时候一般会出现以下错误：

  1. 这个时候有以下几种方法可供选择：
  • CTRL+` (ese按键下)，打开sublime命令输入框，将下述代码粘贴到命令行中，直接Enter执行：
import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
  • Enter执行后静等安装，安装完成后重新启动sublime，‘ctrl+shift+p’ 打开package，输入 install package 执行后不会报错就是成功了，再输入想要的插件进行安装即可，安装后同样的重新启动sublime，至此，常用的安装package control插件方法就是这了
  • 若提示安装错误，这时候我们需要进行手动安装，具体操作如下：进入页面，点击红框内的插件，下载到桌面（比较方便找到），附上下载地址：packagecontrol.io/installatio…

  • 下载完成后，打开sublime text 3 的安装包，找到sublime text => Packages 文件夹，将我们上图中下载好的package control插件复制到这个文件中，再重新运行sublime，同样的‘ctrl+shift+p’ 打开package，输入 install package 执行，再输入你想要安装的插件Enter运行就OK了。

  1. 插件安装

    • EditorConfig
    • JSFormat
    • CSScomb

  2. 插件配置

    • EditorConfig
    # editorconfig.org
root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

    • sublime3 自身

      Preferences->Setting-User，增加下面两个配置：

      {
    "translate_tabs_to_spaces": true,
    "word_wrap": true
}

      点击右下角的Spaces->Convert Indentation to Spaces可以将文件中的所有tab转换成空格

    • JSFormat

      Preferences->Package Settings->JSFormat->Setting-User，下载配置文件覆盖

      配置好后格式化的默认快捷键是 ctrl+alt+f

      {
    "indent_size": 4,
    "indent_char": " ",
    "eol": "\n",
    "indent_level": 0,
    "indent_with_tabs": false,
    "preserve_newlines": true,
    "max_preserve_newlines": 10,
    "jslint_happy": false,
    "space_after_anon_function": false,
    "brace_style": "collapse",
    "keep_array_indentation": false,
    "keep_function_indentation": false,
    "space_before_conditional": true,
    "break_chained_methods": false,
    "eval_code": false,
    "unescape_strings": false,
    "wrap_line_length": 0,
    "wrap_attributes": "auto",
    "wrap_attributes_indent_size": 4,
    "end_with_newline": true
}

    • CSScomb

      Preferences->Package Settings->CSScomb->Setting-User，下载配置文件覆盖

      配置好后格式化的默认快捷键是 ctrl+shift+c

      {
    "config": {
        "remove-empty-rulesets": true,
        "always-semicolon": true,
        "color-case": "lower",
        "block-indent": "    ",
        "color-shorthand": true,
        "element-case": "lower",
        "eof-newline": true,
        "leading-zero": false,
        "quotes": "double",
        "sort-order-fallback": "abc",
        "space-before-colon": "",
        "space-after-colon": " ",
        "space-before-combinator": " ",
        "space-after-combinator": " ",
        "space-between-declarations": "\n",
        "space-before-opening-brace": " ",
        "space-after-opening-brace": "\n",
        "space-after-selector-delimiter": "\n",
        "space-before-selector-delimiter": "",
        "space-before-closing-brace": "\n",
        "strip-spaces": true,
        "tab-size": true,
        "unitless-zero": true,
        "vendor-prefix-align": true,
        "sort-order": [
            [
                "display",
                "visibility",
                "float",
                "clear",
                "overflow",
                "overflow-x",
                "overflow-y",
                "clip",
                "zoom"
            ],
            [
                "table-layout",
                "empty-cells",
                "caption-side",
                "border-spacing",
                "border-collapse",
                "list-style",
                "list-style-position",
                "list-style-type",
                "list-style-image"
            ],
            [
                "-webkit-box-orient",
                "-webkit-box-direction",
                "-webkit-box-decoration-break",
                "-webkit-box-pack",
                "-webkit-box-align",
                "-webkit-box-flex"
            ],
            [
                "position",
                "top",
                "right",
                "bottom",
                "left",
                "z-index"
            ],
            [
                "margin",
                "margin-top",
                "margin-right",
                "margin-bottom",
                "margin-left",
                "-webkit-box-sizing",
                "-moz-box-sizing",
                "box-sizing",
                "border",
                "border-width",
                "border-style",
                "border-color",
                "border-top",
                "border-top-width",
                "border-top-style",
                "border-top-color",
                "border-right",
                "border-right-width",
                "border-right-style",
                "border-right-color",
                "border-bottom",
                "border-bottom-width",
                "border-bottom-style",
                "border-bottom-color",
                "border-left",
                "border-left-width",
                "border-left-style",
                "border-left-color",
                "-webkit-border-radius",
                "-moz-border-radius",
                "border-radius",
                "-webkit-border-top-left-radius",
                "-moz-border-radius-topleft",
                "border-top-left-radius",
                "-webkit-border-top-right-radius",
                "-moz-border-radius-topright",
                "border-top-right-radius",
                "-webkit-border-bottom-right-radius",
                "-moz-border-radius-bottomright",
                "border-bottom-right-radius",
                "-webkit-border-bottom-left-radius",
                "-moz-border-radius-bottomleft",
                "border-bottom-left-radius",
                "-webkit-border-image",
                "-moz-border-image",
                "-o-border-image",
                "border-image",
                "-webkit-border-image-source",
                "-moz-border-image-source",
                "-o-border-image-source",
                "border-image-source",
                "-webkit-border-image-slice",
                "-moz-border-image-slice",
                "-o-border-image-slice",
                "border-image-slice",
                "-webkit-border-image-width",
                "-moz-border-image-width",
                "-o-border-image-width",
                "border-image-width",
                "-webkit-border-image-outset",
                "-moz-border-image-outset",
                "-o-border-image-outset",
                "border-image-outset",
                "-webkit-border-image-repeat",
                "-moz-border-image-repeat",
                "-o-border-image-repeat",
                "border-image-repeat",
                "padding",
                "padding-top",
                "padding-right",
                "padding-bottom",
                "padding-left",
                "width",
                "min-width",
                "max-width",
                "height",
                "min-height",
                "max-height"
            ],
            [
                "font",
                "font-family",
                "font-size",
                "font-weight",
                "font-style",
                "font-variant",
                "font-size-adjust",
                "font-stretch",
                "font-effect",
                "font-emphasize",
                "font-emphasize-position",
                "font-emphasize-style",
                "font-smooth",
                "line-height",
                "text-align",
                "-webkit-text-align-last",
                "-moz-text-align-last",
                "-ms-text-align-last",
                "text-align-last",
                "vertical-align",
                "white-space",
                "text-decoration",
                "text-emphasis",
                "text-emphasis-color",
                "text-emphasis-style",
                "text-emphasis-position",
                "text-indent",
                "-ms-text-justify",
                "text-justify",
                "letter-spacing",
                "word-spacing",
                "-ms-writing-mode",
                "text-outline",
                "text-transform",
                "text-wrap",
                "-ms-text-overflow",
                "text-overflow",
                "text-overflow-ellipsis",
                "text-overflow-mode",
                "-ms-word-wrap",
                "word-wrap",
                "-ms-word-break",
                "word-break"
            ],
            [
                "color",
                "background",
                "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
                "background-color",
                "background-image",
                "background-repeat",
                "background-attachment",
                "background-position",
                "-ms-background-position-x",
                "background-position-x",
                "-ms-background-position-y",
                "background-position-y",
                "-webkit-background-clip",
                "-moz-background-clip",
                "background-clip",
                "background-origin",
                "-webkit-background-size",
                "-moz-background-size",
                "-o-background-size",
                "background-size"
            ],
            [
                "outline",
                "outline-width",
                "outline-style",
                "outline-color",
                "outline-offset",
                "opacity",
                "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
                "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
                "-ms-interpolation-mode",
                "-webkit-box-shadow",
                "-moz-box-shadow",
                "box-shadow",
                "filter:progid:DXImageTransform.Microsoft.gradient",
                "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
                "text-shadow"
            ],
            [
                "-webkit-transition",
                "-moz-transition",
                "-ms-transition",
                "-o-transition",
                "transition",
                "-webkit-transition-delay",
                "-moz-transition-delay",
                "-ms-transition-delay",
                "-o-transition-delay",
                "transition-delay",
                "-webkit-transition-timing-function",
                "-moz-transition-timing-function",
                "-ms-transition-timing-function",
                "-o-transition-timing-function",
                "transition-timing-function",
                "-webkit-transition-duration",
                "-moz-transition-duration",
                "-ms-transition-duration",
                "-o-transition-duration",
                "transition-duration",
                "-webkit-transition-property",
                "-moz-transition-property",
                "-ms-transition-property",
                "-o-transition-property",
                "transition-property",
                "-webkit-transform",
                "-moz-transform",
                "-ms-transform",
                "-o-transform",
                "transform",
                "-webkit-transform-origin",
                "-moz-transform-origin",
                "-ms-transform-origin",
                "-o-transform-origin",
                "transform-origin",
                "-webkit-animation",
                "-moz-animation",
                "-ms-animation",
                "-o-animation",
                "animation",
                "-webkit-animation-name",
                "-moz-animation-name",
                "-ms-animation-name",
                "-o-animation-name",
                "animation-name",
                "-webkit-animation-duration",
                "-moz-animation-duration",
                "-ms-animation-duration",
                "-o-animation-duration",
                "animation-duration",
                "-webkit-animation-play-state",
                "-moz-animation-play-state",
                "-ms-animation-play-state",
                "-o-animation-play-state",
                "animation-play-state",
                "-webkit-animation-timing-function",
                "-moz-animation-timing-function",
                "-ms-animation-timing-function",
                "-o-animation-timing-function",
                "animation-timing-function",
                "-webkit-animation-delay",
                "-moz-animation-delay",
                "-ms-animation-delay",
                "-o-animation-delay",
                "animation-delay",
                "-webkit-animation-iteration-count",
                "-moz-animation-iteration-count",
                "-ms-animation-iteration-count",
                "-o-animation-iteration-count",
                "animation-iteration-count",
                "-webkit-animation-direction",
                "-moz-animation-direction",
                "-ms-animation-direction",
                "-o-animation-direction",
                "animation-direction"
            ],
            [
                "content",
                "quotes",
                "counter-reset",
                "counter-increment",
                "resize",
                "cursor",
                "-webkit-user-select",
                "-moz-user-select",
                "-ms-user-select",
                "user-select",
                "nav-index",
                "nav-up",
                "nav-right",
                "nav-down",
                "nav-left",
                "-moz-tab-size",
                "-o-tab-size",
                "tab-size",
                "-webkit-hyphens",
                "-moz-hyphens",
                "hyphens",
                "pointer-events"
            ]
        ]
    }
}

  3. 在使用sublime下载扩展包的过程中，通过ctrl+shift+p打开包管理菜单界面，输入install 选中Install Package并回车，有可能会出现There are no packages available for installation的提示，导致安装插件出现问题

  • 分析原因发现，在利用sublime进行插件下载时，sublime会调用channel_v3.json文件，点击Preferences->Package Setting->Package Control ->Setting Default，可以看到该文件是放置在网络中进行读取的，而由于GFW的原因，导致无法读取该文件（但是竟然可以直接访问？？），这也就是导致插件无法下载的原因

  • 我们在Preferences->Package Setting->Package Control ->Setting User 中，可以进行用户设置，我们可以将文件下载后，进行本地访问。首先访问https://packagecontrol.io/channel_v3.json ，将源代码复制后，新建文件为channel_v3.json（也可以从github中获取源文件），然后在Setting User设置中，添加代码，至此，就可以正常使用install package下载插件。

读者亦可参考以下两篇文章

avatar
文章
阅读
粉丝

友情链接：