這里配置個適合我自己的sublime text3配置,以作備忘。
(注:內容為網上找的拼湊加個人實踐而成,如有雷同,那就雷同吧~)
1、Emmet
強大的代碼提示功能,安裝無需配置就可以使用。
2、Git
支持sublime text3上的git操作 ,方便管理代碼版本。
3、Sass & Sass Build
高亮顯示sass代碼,提高可讀性。
- 按Ctrl+B編譯,博主用空的sass可以編譯成功,當前目錄會出現 [name].css 和 [name].css.map(沒啥作用,記錄生成css的信息)文件。
- 有寫樣式的sass編譯報錯:Error: Invalid charset directive '@charset': expected string.(不清楚聲明為什么報錯,並且不寫聲明語句后也是報錯的)
- 並且編譯后生成文件路徑不知道怎么設置,我是用webpack2搭建的項目環境所以也沒有去找解決方案,在此留下這個坑,日后 再解決。
github源碼上有一句這個:(估計是改sass或者ruby源碼以改變生成文件路徑)
If you want to change the default folder of your generated CSS files into another one, you can edit the build:
Example: Save your CSS files into a css
folder: "cmd": ["sass", "--update", "$file:${file_path}/../css/${file_base_name}.css"],
另外,就是windows7下解決中文亂碼的問題:
- 找到ruby的安裝目錄,里面也有sass模塊,如路徑: C:/Ruby/lib/ruby/gems/1.9.1/gems/sass-3.3.14/lib/sass
- 在這個文件里面engine.rb,添加一行代碼Encoding.default_external = Encoding.find(‘utf-8’) 放在所有的require XXXX 之后即可.
4、cssrem
一個CSS的px值轉rem值的Sublime Text 3自動完成插件
- 克隆項目 https://github.com/hyb628/cssrem.git
- 進入packages目錄:Preferences > Browse Packages…
- 復制下載的cssrem目錄到剛才的packges目錄里。
- 重啟Sublime Text。
參數配置:Sublime Text -> Preferences -> Package Settings -> cssrem
- px_to_rem - px轉rem的單位比例,默認為40。
- max_rem_fraction_length - px轉rem的小數部分的最大長度。默認為6。
- available_file_types - 啟用此插件的文件類型。默認為:[".css", ".less", ".sass"]。
- 我在配置文件 cssrem.sublime-settings里修改了單位比例為100
- 具體的比例參數還是看個人平時切圖怎么設置參數為准。
5、AutoFileName
自動補全文件路徑。
6、SublimeLinter
語法檢測工具, 可以檢測到所寫代碼的語法錯誤,並高亮顯示錯誤。
7、DocBlokr
DocBlokr 幫助你創造你的代碼注釋,通過解析功能,參數,變量,並且自動添加基本項目, 只要在文檔中輸入/**然后按一下tab, 就會根據代碼自動生成注釋。
8、Alignment
代碼對齊插件,進行智能對齊。
9、Node.js
用於搭建node.js開發環境。
安裝之后打開 Preferences > Browse Packages…進入Nodejs文件夾里面:
- 打開Nodejs.sublime-build文件,將代碼 "encoding": "cp1252" 改為 "encoding": "utf8" 保存文件;
- 再打開文件“Nodejs.sublime-settings”,將代碼 "node_command": false改為 "node_command": "C:\\Program Files\\nodejs\\node.exe" ,將代碼 "npm_command": false 改為 "npm_command": "C:\\Program Files\\nodejs\\npm.cmd" ,保存文件
- 本人node.js安裝目錄為:C:\\Program Files\\nodejs
10、sftp
用於連接ftp服務器修改線上文件
11、側邊欄樣式修改
- Ctrl+Shift+P > install package > "theme-Afterglow"。
- 安裝完成后,修改preferences > setting,具體配置如下:
{ "color_inactive_tabs": true, "color_scheme": "Packages/User/SublimeLinter/Monokai (SL).tmTheme", "enable_highlight": true, "enable_mathjax": true, "font_size": 12, "ignored_packages": [ "Vintage" ], "line_padding_bottom": 1, "line_padding_top": 1, "tabs_small": true, "theme": "Afterglow.sublime-theme", "update_check": false }
效果如圖:
12、雞和馬一枚,3126版本:
—– BEGIN LICENSE —– Michael Barnes Single User License EA7E-821385 8A353C41 872A0D5C DF9B2950 AFF6F667 C458EA6D 8EA3C286 98D1D650 131A97AB AA919AEC EF20E143 B361B1E7 4C8B7F04 B085E65E 2F5F5360 8489D422 FB8FC1AA 93F6323C FD7F7544 3F39C318 D95E6480 FCCC7561 8A4A1741 68FA4223 ADCEDE07 200C25BE DBBC4855 C4CFB774 C5EC138C 0FEC1CEF D9DCECEC D3A5DAD1 01316C36 —— END LICENSE ——