標(biāo)簽: 前端工具
其他常用的插件
- All autocomplete: 根據(jù)已打開文件的關(guān)鍵字來補(bǔ)全
- AutoFileName: 自動補(bǔ)全文件名
- BracketHighLighter: 突出顯出括號
- DocBlockr: 寫文檔注釋必備
- EditorConfig: 編輯器環(huán)境統(tǒng)一配置文件
- Emmet: 編寫HTML CSS的神器壳坪,需要學(xué)它的語法
- Gist :與自己的gist庫連接,需要權(quán)限
- SidebarEnhancement: 側(cè)邊欄增強(qiáng)
- SyncedSidebar: 根據(jù)文件自動打開左邊目錄樹
- todopreview: 查看所有TODO注釋
SublimeLinter-contrib-eslint
eslint是語法檢查的工具悔醋,需要用到npm,安裝過程如下:
1.首先全局安裝eslint绪氛,后面那個是支持es6
npm i -g eslint babel-eslint eslint-plugin-react
2.然后sublime3安裝插件(貌似只有st3支持)
package install
進(jìn)入安裝界面,安裝SublimeLinter-contrib-eslint
如果沒有sublimeLinter還要安裝它SublimeLinter
懂傀。
3.sublime安裝babel
打開一個js文件設(shè)置view->syntax->open all with extension as->babel->javascript
4.設(shè)置SublimeLinter路徑
Preference->Package Setting->SublimeLinter->User Setting
...
"paths": {
"linux": [],
"osx": [],
"windows": ["C:\\Users\\Administrator\\AppData\\Roaming\\npm"]
},
...
tips: 參看這個
5.設(shè)置.eslintrc
項(xiàng)目根目錄上新建文件.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"
]
}
}
詳細(xì)設(shè)置可以參考官方
或者這篇文章 eslint配置參數(shù)介紹
這篇文章更詳細(xì)
現(xiàn)在應(yīng)該能夠用了流强,不能用的話可以先用命令行試下eslint file
看看有沒有報(bào)錯。
Floobits
結(jié)對編程的工具激捏,可以實(shí)時同步兩臺機(jī)器的代碼设塔,支持sublime text, atom等編輯器≡毒耍可以免費(fèi)使用闰蛔。
floobits官網(wǎng)
安裝:很簡單的,看官網(wǎng)图柏,不多說了序六。
使用:以sublime為例,兩臺機(jī)注冊兩個號蚤吹,然后一臺share workspace
創(chuàng)建倉庫例诀,另一臺join workspace
加入倉庫随抠,代碼權(quán)限可以上官網(wǎng)搞,之后就可以兩臺機(jī)一起敲代碼了繁涂,挺好玩的拱她。
注意: 每次打開編輯器都要join workspace
登錄倉庫來進(jìn)行實(shí)時同步。
Emmet LiveStyle
前端頁面編寫的福音叭幼铩1印!矿酵!
樣式實(shí)時預(yù)覽工具唬复,不刷新頁面,實(shí)時更新頁面樣式全肮,支持瀏覽器與編輯器的雙向綁定敞咧,也就是說瀏覽器上的修改也會寫到編輯器上。同時也支持遠(yuǎn)程調(diào)試辜腺。一個字休建,神器!目前有chrome和sublime的插件哪自。
使用超級簡單丰包,下載安裝就可以用了。