阅读 162

sublime3安装及插件安装实测

作为一名前端,编辑器是必不可少一个工具,虽然最近微软良心作品: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下载插件。

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

关注下面的标签,发现更多相似文章
评论