標簽： 前端工具
其他常用的插件
- All autocomplete： 根據已打開文件的關鍵字來補全
- AutoFileName： 自動補全文件名
- BracketHighLighter： 突出顯出括號
- DocBlockr: 寫文檔注釋必備
- EditorConfig： 編輯器環境統一配置文件
- Emmet： 編寫HTML CSS的神器，需要學它的語法
- Gist ：與自己的gist庫連接，需要權限
- SidebarEnhancement： 側邊欄增強
- SyncedSidebar： 根據文件自動打開左邊目錄樹
- todopreview: 查看所有TODO注釋
SublimeLinter-contrib-eslint
eslint是語法檢查的工具，需要用到npm，安裝過程如下:
1.首先全局安裝eslint，后面那個是支持es6
npm i -g eslint babel-eslint eslint-plugin-react
2.然后sublime3安裝插件(貌似只有st3支持)
package install進入安裝界面,安裝SublimeLinter-contrib-eslint
如果沒有sublimeLinter還要安裝它SublimeLinter。
3.sublime安裝babel
打開一個js文件設置view->syntax->open all with extension as->babel->javascript
4.設置SublimeLinter路徑
Preference->Package Setting->SublimeLinter->User Setting
...
"paths": {
"linux": [],
"osx": [],
"windows": ["C:\\Users\\Administrator\\AppData\\Roaming\\npm"]
},
...
tips: 參看這個
5.設置.eslintrc
項目根目錄上新建文件.eslintrc,它是長這個樣子的
module.exports = {
"parser": "babel-eslint",
"env": {
"browser": true,
"es6": true,
"mocha": true,
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaFeatures": {
"ecmaVersion": 6,
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"indent": [
"error",
"tab"
]
}
}
詳細設置可以參考官方
或者這篇文章 eslint配置參數介紹
這篇文章更詳細
現在應該能夠用了，不能用的話可以先用命令行試下eslint file看看有沒有報錯。
Floobits
結對編程的工具，可以實時同步兩臺機器的代碼，支持sublime text, atom等編輯器。可以免費使用。
floobits官網
安裝：很簡單的，看官網，不多說了。
使用：以sublime為例，兩臺機注冊兩個號，然后一臺share workspace創建倉庫，另一臺join workspace加入倉庫，代碼權限可以上官網搞，之后就可以兩臺機一起敲代碼了，挺好玩的。
注意： 每次打開編輯器都要join workspace登錄倉庫來進行實時同步。
Emmet LiveStyle
前端頁面編寫的福音啊！！！
樣式實時預覽工具，不刷新頁面，實時更新頁面樣式，支持瀏覽器與編輯器的雙向綁定，也就是說瀏覽器上的修改也會寫到編輯器上。同時也支持遠程調試。一個字，神器！目前有chrome和sublime的插件。
使用超級簡單，下載安裝就可以用了。
