Sublime Text3一些安裝和使用技巧

時間 2019-11-21

標籤 sublime text3 text 一些安裝使用技巧欄目 HTML 简体版

原文原文鏈接

　　ST3是一款很好的編輯軟件,他不單單是能編輯前端代碼,包括JS,PHP,HTML,CSS等,還能編輯JAVA,C++等經常使用後代編輯語言.由於本人寫前端,本篇文章只介紹ST3的一些前端的技巧.javascript

　　對於ST3的前端功能,同類的還有ATOM,HBuilder,WEBSTROM等,多樣選擇,總有一款是適合你的.廢話很少說,本篇文章主要是關於windows上的前端配置,.css

1.ST3的安裝html

　　1.官網便可下載安裝:http://www.sublimetext.com/3,下載系統對應版本便可,激活碼可在網上查找,須要跟下載的版本相同的激活碼前端

　　2. 安裝時，注意勾選Add to explorer context menu，這樣Sublime Text能夠被添加到右鍵中，在右鍵單擊文件時，能夠直接使用Sublime Text打開java

2.插件安裝node

　　2.1 使用Package Control來進行插件的安裝,卸載,查看jquery

　　使用 [Ctrl + `] (或View > Show Console menu) 打開Sublime Text控制檯，將下面的代碼粘貼到控制檯裏:git

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; 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)

　　因爲版本的變化,上面的代碼可能改變,能夠到官網查看:https://packagecontrol.io/installationgithub

　　若是在Perferences->package settings中看到package control這一項，則代表安裝成功.chrome

　　2.2 Package Control的使用

　　1.按下Ctrl+Shift+P調出命令面板.

　　2.輸入install,調出install package,輸入須要安裝的插件名,回車,便可安裝插件

　　3.輸入list,調出list package,可查看已經安裝的插件

　　4.輸入remove,調出remove package,可刪除已安裝插件

　　2.3 Package Control的安裝路徑

　　如果從官網上下載ST3安裝到非系統盤(C盤),插件並不是安裝在ST3當前盤,須要到以下盤(windows系統):

　　C:\Users\Administrator\AppData\Roaming\Sublime Text 3,能夠看到有2個文件夾： Installed Packages 和 Packages

　　只有單一文件（插件名.sublime-package）的插件,被放在了Installed Packages目錄中,包含有多個文件的安裝包插件,被放在了Packages 目錄中

　　如果直接從PC安裝的插件,會自動放到當前的兩個目錄,如果手動下載的插件,可根據須要放到對應目錄中

3.快捷鍵與配置

　　3.1 系統默認快捷鍵

　　可查看http://www.cnblogs.com/zhcncn/p/4113589.html

　　3.2 自定義快捷鍵

　　Preferences->Key Bindings-User,可查看http://blog.csdn.net/ablipan/article/details/17138045

4.插件安裝

　　1.EMMET

　　一款可用來加速編寫html代碼的插件:TAB

　　如ul>li*3,TAB以後可快速生成有3個li元素的ul元素,具體用法可自行體會.

　　2.BracketHighlighter

　　高亮顯示匹配的括號、引號和標籤

　　如果嫌棄系統的匹配不夠醒目,可參考http://www.tuicool.com/articles/EV3eEzA

　　3.Alignment

　　等號對齊:CTRL+ALT+A.在windows系統上可能與其餘快捷鍵有衝突,須要自定義快捷鍵

　　4.HTML5

　　快速編寫html模版

　　5.AutoCompleteJS

　　自動提示JS代碼

　　6.Can I Use

　　一款檢測html和css在各大瀏覽器是否兼容的插件:可直接右鍵選中

　　7.ColorPicker

　　一款取色器:CTRL+ALT+C,如果沒法調出取色器,多是快捷鍵被佔用,可自定義快捷鍵Preferences→Key Bindings-User-{ "keys": ["ctrl+alt+c"], "command": "color_pick"}

　　8.DocBlocker

　　對方法等進行註釋

　　9.FileDiffs

　　查找文檔不一樣

　　10.ConvertToUTF8

　　轉換utf-8格式

　　11.Pretty JSON

　　對JSON字符串進格式化:CTRL+ALT+J

　　12.JSFormat

　　JS代碼格式化:CTRL+ALT+F

　　13.JQuery

　　對JQ的支持

　　14.IMESupport

　　ST3對中文輸入法的支持有個小bug，就是在輸入中文時，輸入法沒辦法顯示在ST3的窗口之上，只能在ST3窗口以外顯示，也就是「輸入框不跟隨」

　　15.Ctranslator tool

　　一款中英文翻譯插件,須要先安裝翻譯軟件:CTRL+ATL+H

　　16.SideBarEnhancements

　　側邊欄增強軟件:CTRL+K,CTRL+B

　　可配置打開方式,使html文件直接經過快捷鍵以瀏覽器打開,以下:

　　File->Open Folder,注意這裏是打開文件夾,在打開的文件夾上右鍵Open With->Edit Applications,在打開的文件中以下配置:

　　application的值是瀏覽器客戶端地址

[
    {"id": "side-bar-files-open-with",
        "children":
        [
            //application firefox
            {
                "caption": "firefox",
                "id": "side-bar-files-open-with-firefox",

                "command": "side_bar_files_open_with",
                "args": {
                            "paths": [],
                            "application": "D:\\Program Files\\Mozilla Firefox\\firefox.exe",
                            "extensions":".*" //any file with extension
                        }
            },
            {"caption":"-"},
            {
                "caption": "chrome",
                "id": "side-bar-files-open-with-chrome",

                "command": "side_bar_files_open_with",
                "args": {
                            "paths": [],
                            "application": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
                            "extensions":".*" //any file with extension
                        }
            }
        ]
    }
]

　　接下來須要設置打開不一樣瀏覽器的快捷鍵preferences->Key Bindings-User

[
     { "keys": ["ctrl+shift+c"], "command": "copy_path" },
     { "keys": ["alt+f12"], "command": "open_in_browser" },
     { "keys": ["f12"], "command": "side_bar_files_open_with",
             "args": {
                "paths": [],
                "application": "E:\\Program Files\\Mozilla Firefox\\firefox.exe",
                "extensions":".*" //any file with extension
            } },
    { "keys": ["f1"], "command": "side_bar_files_open_with",
            "args": {
                "paths": [],
                "application": "E:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
                "extensions":".*" //any file with extension
            }
     }
]

　　能夠直接按f1在chrome中打開當前html,也能夠按照本身喜愛配置.

　　17.HTML-CSS-JS Prettify

　　一款對html,css,js格式化的插件,快捷鍵是ctrl+shift+h.須要安裝nodejs,只須要在本插件的配置中載入nodejs的路徑,如F:\Nodejs\node.exe

　　18.Auto-save

　　一款自動保存修改文件的插件,快捷鍵是ctrl+shift+s.安裝插件後默認是關閉的,可用快捷鍵進行切換狀態,對於多文件替換比較方便.

　　19.DeleteBlankLines

　　刪除空白行,選中須要刪除的文本,快捷鍵ctrl+alt+backspace

　　20.Trailing Spaces

　　用紅色顯示文本中多餘的空格,若想刪除這些空格:edit-Traling Spaces-Delete

　　21.AutoFileName

　　快速列出你想引用的文件夾裏面全部文件的名字

　　22.SublimeCodeIntel

　　js代碼智能提示

5.SublimeLiinter,SublimeLinter-Jshint,SublimeLinter-CSSlint

　　專門用來檢測JS語法的插件,要和Nodejs配合使用.

　　5.1 首先是nodejs的安裝,可經過官網上下載對應的版本:https://nodejs.org/en/

　　5.2 打開nodejs的cmd窗口,可從開始->全部程序->Node.js->Node.js command prompt,在命令行中輸入

　　　　npm install -g jshint 回車,等待插件的安裝完成.安裝完以後輸入jshint -v,如果能顯示版本號,則安裝成功.一樣的方法按章csslint,輸入

　　　　npm install -g csslint 回車

　　5.3 如果能顯示版本號,則可跳過5.3,5.4,5.5,5.6.如果沒法顯示jshint或csslint版本號,則須要檢查這兩個插件安裝的目錄是否在系統盤中:C:\Users\Administrator\AppData\Roaming\npm\node_modules.在安裝完成jshint以後可看到完成信息中有安裝插件的地址,我在這是介紹的改變全局的存放模塊來使安裝的插件生效,須要改變的兩個文件夾分別:

　　node_global和node_cache

　　5.4 在打開的nodejs的控制檯中輸入

　　npm config set prefix "node_global的地址"

　　npm config set prefix "node_cache的地址"

　　5.5 因爲改變了node_modules的默認安裝目錄,須要從新配置環境變量

　　編輯PATH:F:\SoftWare\nodejs\node_modules\npm;F:\SoftWare\nodejs\node_global

　　添加NODE_PATH:F:\SoftWare\nodejs\node_global\node_modules

　　5.6 配置完成後再次輸入jshint -v,顯示版本號則配置成功

　　5.7 安裝好nodejs中的插件後可配置SublimeLinter的配置文件:Preferences->Package Settings->SublimeLinter->Settings - User

{
    "sublimelinter": "save-only",
    "sublimelinter_popup_errors_on_save": true,
    "sublimelinter_executable_map": {
        "javascript": "D:/Program Files/nodejs/node.exe",
        "css": "D:/Program Files/nodejs/node.exe"
    },
    "jshint_options": {
        "strict": false,
        "quotmark": "single", //只能使用單引號
        "noarg": true,
        "noempty": true, //不容許使用空語句塊{}
        "eqeqeq": true, //!==和===檢查
        "undef": true,
        "curly": true, //值爲true時，不能省略循環和條件語句後的大括號
        "forin": true, //for in hasOwnPropery檢查
        "devel": true,
        "jquery": true,
        "browser": true,
        "wsh": true,
        "evil": true,
        "unused": "vars", //形參和變量未使用檢查
        "latedef": true, //先定義變量，後使用
        "globals": {
            "grunt": true,
            "module": true,
            "window": true,
            "jQuery": true,
            "$": true,
            "global": true,
            "document": true,
            "console": true,
            "setTimeout": true,
            "setInterval": true
        }
    },
    "csslint_options": {
        "adjoining-classes": false,
        "box-sizing": false,
        "box-model": false,
        "compatible-vendor-prefixes": false,
        "floats": false,
        "font-sizes": false,
        "gradients": false,
        "important": false,
        "known-properties": false,
        "outline-none": false,
        "qualified-headings": false,
        "regex-selectors": false,
        "shorthand": false,
        "text-indent": false,
        "unique-headings": false,
        "universal-selector": false,
        "unqualified-attributes": false,
　　　　 "display-property-grouping": true,
    　　"duplicate-background-images": "warning",
    　　"duplicate-properties": true,
   　　 "empty-rules": true,
    　　"errors": true,
   　　 "fallback-colors": "warning",
   　　 "font-faces": "warning",
   　　 "ids": "warning",
   　　 "import": "warning",
   　　 "overqualified-elements": "warning",
  　　  "rules-count": "warning",
  　　  "star-property-hack": "warning",
  　　  "underscore-property-hack": "warning",
  　　  "vendor-prefix": true,
   　　 "zero-units": "warning"
    }
}