安裝Sublime
官網(wǎng):http://www.sublimetext.com
安裝Sublime Text Build 3143 x64 Setup.exe到D:\Sublime Text 3目錄
勾選Add to explorer context menu浦夷,在右鍵單擊文件時就可以直接使用Sublime Text打開
Finish后在開始菜單找到快捷方式啟動
打開左側(cè)文件列表視圖:View->Side Bar->Show Open Files
導(dǎo)入文件夾:File->Open Folder->選擇某項目文件夾,并在此文件夾下拷入images圖片資源倡勇,列表視圖有顯示
新打開的文件夾合并到一個窗口帝火,不要新開窗口:不要點(diǎn)File->Open Folder呛谜,而是Project->Add Folder to Project
將文件夾從左側(cè)列表移除:右鍵文件夾->Remove Folder from Project溶诞,不要選Delete Folder凌箕,它會把文件夾從硬盤上刪掉
Sublime->View->Layout中Single是單獨(dú)編輯一個頁面拧篮,Columns:2可分兩欄編輯,每個新頁面是一個選項卡牵舱,雙擊空白處可新建一個文件
Preferences->Color Scheme可更換主題
快捷鍵
放大字號:Ctrl+=
縮小字號:Ctrl+-
刪除當(dāng)前行:Ctrl+Shift+K
復(fù)制當(dāng)前行:Ctrl+Shift+D
上/下移當(dāng)前行:Ctrl+Shift+↑/↓
Ctrl+D 選中光標(biāo)所占的文本他托,繼續(xù)操作則會選中下一個相同的文本
Ctrl+Shift+L 先選中多行,再按下快捷鍵仆葡,會在每行行尾插入光標(biāo)赏参,即可同時編輯這些行
Ctrl+→ 向右單位性地移動光標(biāo)
表達(dá)式:ul>(li>a)*5
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
按住Ctrl鍵,鼠標(biāo)在多行連續(xù)點(diǎn)擊沿盅,可多行編輯
創(chuàng)建Html文件:右鍵項目文件夾或點(diǎn)File菜單->New File->主視圖光標(biāo)處輸入文件名test.html把篓,保存在項目文件夾下,清空文件名開始編碼
xhtml版本文檔創(chuàng)建方法: html:xt + tab
H5版本文檔創(chuàng)建方法: html:5 + tab 或 ! + tab
安裝Package Control組件
按Ctrl+`調(diào)出sublime text的console
粘貼以下代碼到底部命令行并回車:
import urllib.request,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler()));open(os.path.join(ipp,pf),'wb').write(urllib.request.urlopen('http://sublime.wbond.net/'+pf.replace('; ','%20')).read())
重啟Sublime Text腰涧,在Perferences->package settings中看到package control韧掩,則表示安裝成功
sublime配置python環(huán)境變量
1、點(diǎn)擊 tools–>build system –>new build system
2窖铡、復(fù)制以下內(nèi)容:
{
"cmd": ["python", "-u", "$file"],
"path":"C:/Program Files (x86)/Python36-32",
"file_regex": "^[ ]File "(...?)", line ([0-9]*)",
"selector": "source.python",
"encoding":"cp936"
}
3疗锐、保存為Python.sublime-package坊谁,保存路徑C:\Users\Administrator\AppData\Roaming\Sublime Text 3\Packages\User
4、寫一行python代碼:print("hello"); 并保存為文件test.py滑臊,Ctrl+B運(yùn)行一下口芍,在Console窗口查看運(yùn)行結(jié)果,若無效則重啟sublime
安裝SublimeREPL插件:允許你在編輯界面直接運(yùn)行 Python 解釋器
1雇卷、調(diào)用ctrl+shift+p鬓椭,輸入:install Package 選擇sublimerepl并安裝
2、修改編譯環(huán)境
preference>Browse Packages 在打開的窗口中進(jìn)入SublimeREPL\config\Python
修改Main.sublime-menu文件关划,把其中所有"cmd":所在的那一行的”python” 改成python3
3小染、修改快捷鍵
Preferences-->Key Bindings User
[
//Open interactive Python REPL window
{ "keys": ["ctrl+a"],
"caption": "SublimeREPL: Python",
"command": "run_existing_window_command", "args":
{
"id": "repl_python",
"file": "config/Python/Main.sublime-menu"
}
},
// Executes a selection of text in REPL
{ "keys": ["ctrl+z"],
"command": "repl_transfer_current", "args":
{
"scope": "selection"
}
},
{
"keys": ["ctrl+r"],//這是自己設(shè)的快捷鍵
"command": "run_existing_window_command",
"args":
{
"id": "repl_python_run",
"file": "config/Python/Main.sublime-menu"
}
}
]
安裝anaconda
https://www.anaconda.com/download/#windows
選擇python3.6版本安裝,安裝在自己知道的文件夾就可以
安裝Emmet插件
按Ctrl+Shift+P調(diào)出命令板
輸入install
然后選擇install Package
然后輸入emmet
找到 Emmet贮折,點(diǎn)擊就可以自動完成安裝
文件路徑提示功能:安裝AutoFileName插件
點(diǎn)開菜單“preferences”——“package control”
下拉框中選擇“install package”
等待幾秒中裤翩,在彈出的新下拉框中,輸入“autofilename”调榄,下拉框會自動更新列表踊赠。點(diǎn)擊列表項“autofilename”進(jìn)行安裝
點(diǎn)擊菜單“preferences”——“package setting”,可以看到“autofilename”插件已經(jīng)安裝到編輯器中
安裝IMESupport插件
讓中文輸入法跟隨光標(biāo)振峻,安裝完畢后臼疫,重啟Sublime就可以了
安裝Node.js
node.js的中文網(wǎng)站:https://nodejs.org/zh-cn/
安裝 autoprefixer 插件(需要Node.js支持,實際工作中不需要使用該插件扣孟,而是使用自動化工具gulp)
執(zhí)行 preferences——key Bindings——Users
設(shè)置快捷鍵 { "keys": ["ctrl+alt+x"], "command": "autoprefixer" }
通過此工具可以按照最新的前綴使用情況給樣式自動加前綴
安裝cssrem插件
cssrem插件可以動態(tài)地將px尺寸換算成rem尺寸
下載本項目烫堤,比如:git clone https://github.com/flashlizi/cssrem 進(jìn)入packages目錄:Sublime Text -> Preferences -> Browse Packages... 復(fù)制下載的cssrem目錄(壓縮包要重命名為cssrem)到剛才的packges目錄里。 重啟Sublime Text凤价。
配置參數(shù) 參數(shù)配置文件:Sublime Text -> Preferences -> Package Settings -> cssrem -> Settings Default寫入下面代碼
{
"px_to_rem": 40,
"max_rem_fraction_length": 6,
"available_file_types": [".css", ".less", ".sass", ".html"]
}
上面配置含義:
px_to_rem - px轉(zhuǎn)rem的單位比例鸽斟,默認(rèn)為40。
max_rem_fraction_length - px轉(zhuǎn)rem的小數(shù)部分的最大長度利诺。默認(rèn)為6富蓄。
available_file_types - 啟用此插件的文件類型。默認(rèn)為:[".css", ".less", ".sass"]
安裝View In Browser插件
Install Package->View In Browser插件
設(shè)置快捷鍵
菜單欄Preferences->Key Bindings慢逾,打開Default (Windows).sublime-keymap——User文件文件立倍,輸入
[ {"keys": ["ctrl+alt+f"], "command": "open_in_browser"},……]
設(shè)置多個瀏覽器預(yù)覽
安裝SideBarEnhancements插件,安裝好以后點(diǎn)擊工具欄的 preferences > package setting > side bar > Key Building-User鍵入以下代碼
{ "keys": ["f1"],
"command": "side_bar_files_open_with",
"args": { "paths": [], "application": "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe", "extensions": "." }
},
{ "keys": ["f2"],
"command": "side_bar_files_open_with",
"args": { "paths": [],"application": "C:\Program Files\Mozilla Firefox\firefox.exe","extensions": "." }
},
{ "keys": ["f3"],
"command": "side_bar_files_open_with",
"args": { "paths": [], "application": "C:\Program Files\internet explorer\iexplore.exe", "extensions": ".*" }
}
安裝jQuery插件
這樣寫jQuery代碼時有代碼提示
安裝less插件
作用:讓less代碼高亮
方法:ctrl+shift+p>install Package>輸入less按Enter
gulp的使用
gulp使用步驟: 安裝nodejs -> 全局安裝gulp -> 項目安裝gulp以及gulp插件 -> 配置gulpfile.js -> 運(yùn)行任務(wù)
gulp網(wǎng)站:http://gulpjs.com/
Gulp中文網(wǎng):https://www.gulpjs.com.cn侣滩,點(diǎn)開始使用打開入門指南
- 全局安裝 gulp:
$ npm install --global gulp
實際在cmd這樣就可以:
npm install gulp -g
在項目目錄下創(chuàng)建gulpDevDependencies目錄準(zhǔn)備安裝項目的開發(fā)依賴
- 作為項目的開發(fā)依賴(devDependencies)安裝:
$ npm install --save-dev gulp
實際在cmd這樣就可以:
D:\項目目錄\gulpDevDependencies> npm install gulp
npm install gulp-less
npm install gulp-autoprefixer
npm install gulp-minify-css
npm install gulp-rename
npm install gulp-uglify
以上是常用gulp插件:
壓縮js代碼(gulp-uglify)
less的編譯(gulp-less)
css的壓縮 (gulp-minify-css)
自動添加css3前綴(gulp-autoprefixer)
文件改名字 (gulp-rename)
只能自行下載口注,拷貝可能報錯路徑太深,文件名過長
插件
Color Scheme - Tomorrow NightColor schemes決定了編輯器界面語法高亮的字體顏色君珠。這是一個非城拗荆酷的暗黑系樣式。
Theme - Soda DarkThemes影響 Sublime 界面元素的顏色和風(fēng)格。這個非常適合 Tomorrow Night 的配色方案材部。
SideBarEnhancements這個插件提供了側(cè)邊欄附加的上下文菜單選項毫缆,例如"New file","New Floder"等乐导。這些本應(yīng)當(dāng)默認(rèn)就該有的苦丁,卻沒有。
All AutocompleteSublime 默認(rèn)的自動完成只關(guān)注當(dāng)前文件的單詞兽叮。這個插件擴(kuò)展了其自動完成的單詞列表到所有打開的文件芬骄。
SublimeCodeIntel為部分語言增強(qiáng)自動完成功能猾愿,包括了 Python 鹦聪。這個插件同時也可以讓你跳轉(zhuǎn)到符號定義的地方,通過按住 alt 并點(diǎn)擊符號蒂秘。非常方便泽本。
GitGutter在編輯器的凹槽區(qū),依照 Git 姻僧,增加小圖標(biāo)來標(biāo)識一行是否被插入规丽、修改或刪除。在 GitGutter 的 readme 中有說明如何更改顏色圖標(biāo)來更新你的配色方案文件撇贺。
Pylinter這個插件提供了目前我所見到的最好的pylint編輯器整合赌莺。它自動檢查 .py 文件,無論其何時被保存松嘶,并且會直接在編輯界面顯示 pylint 違規(guī)艘狭。它還有一個快捷方式來禁用局部的 pylint 檢查,通過插入一個 #pylint: 禁用注釋翠订。這個插件對于我確實非常有用巢音。