sublime3安裝及插件安裝實測

做爲一名前端，編輯器是必不可少一個工具，雖然最近微軟良心做品：vsCode，以其安裝簡單、免費、安裝插件方便等優勢而迅速佔據各大前端大牛的心裏，可是對於前幾年已經習慣了Sublime的咱們來講，平常還是不自覺的喜歡用Sublime來編寫代碼，如下就結合實際來總結Sublime的安裝方法以及部分插件的安裝：

1. 點開sublime的官網（www.sublimetext.com/3）根據各自的電腦來下載對應的安裝包,通常的話都是選擇 windows的64 系統，下載後解壓縮就OK

2. 安裝的話不會遇到什麼問題，可是Sublime強大的地方就是它的插件，可是package control 安裝不了，通常都是ctrl+`，這個時候通常會出現如下錯誤：

3. 這個時候有如下幾種方法可供選擇：

• 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了。

4. 插件安裝

   • EditorConfig
   • JSFormat
   • CSScomb

5. 插件配置

   • 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"
                 ]
             ]
         }
     }
     
     複製代碼

6. 在使用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下載插件。

讀者亦可參考如下兩篇文章

• alloyteam.github.io/CodeGuide/#…
• www.cnblogs.com/yangzhuanzh…
• www.cnblogs.com/jellify/p/9…