atom 前端開發(fā)插件推薦

1、配置鏡像

在國內(nèi)下載atom插件,因為連接的是亞馬遜的服務(wù)器,所以速度非常慢,有時還會超時,好在國內(nèi)淘寶做了個鏡像,方便國內(nèi)的朋友們下載,所以在powershell或者terminal中使用以下命令配置鏡像(apm是Atom的包管理器,類似于npm)

  apm config set registry https://registry.npm.taobao.org

在設(shè)置了鏡像之后,就可以在atom中下載插件,或者使用apm install {{ package-name }}來安裝插件

2、插件列表

1、代碼輔助類

1 Emmet

使用Emmet語法快速編寫HTML。

2 eslint

eslint atom插件,用于檢索javascript代碼,可以自定義配置,根據(jù)自己的風(fēng)格或者團(tuán)隊風(fēng)格來檢索代碼(需要下載Atom-linter依賴)。

3 docblockr

一鍵生成注釋模板,使寫注釋更高效。


docblockr
docblockr
4 autocomplete-paths

在寫路徑的時候的自動補(bǔ)全。


autocomplete-path
autocomplete-path
5 goto-definition

直接跳轉(zhuǎn)到函數(shù)(變量)的定義處,支持Hyperclick即Ctrl/Command + 鼠標(biāo)左鍵直接跳轉(zhuǎn),不過需要根據(jù)文檔自行設(shè)置。

goto-definition
goto-definition

6 atom-beautify

支持多種語言的格式化代碼插件,可以自定義設(shè)置,很好用。


atom-beautify
7 double-tag

在修改Html標(biāo)簽的時候,可以同步修改標(biāo)簽的開始和結(jié)束部分,使Html的修改更高效。


double-tag
double-tag

2、Git功能

1 git-plus

使用atom命令行來進(jìn)行基本的Git操作(例如Commit,Pull,Push等)。


git-plus
git-plus
2 git-log

在Atom中查看Git提交記錄。


git-log
git-log

3、開發(fā)輔助(項目管理和小工具)

1 project-manager

項目管理,存儲當(dāng)前項目,快速進(jìn)入指定項目。


project-manager
project-manager
2 open-in-browser

使用快捷鍵,自動在系統(tǒng)默認(rèn)瀏覽器中打開當(dāng)前Html文件。

3 atom-clock

在atom界面的右下角顯示當(dāng)前時間(時間格式可自定義),防止各位寫代碼寫得廢寢忘食。


atom-clock

4、美化

1 file-icons

文件前面顯示圖標(biāo),增加辨識度的同時使界面更好看。


file-icons
2 主題推薦

主題每個人審美不同,筆者用的主題是atom-material-ui,使用的代碼顏色主題是atom-material-syntax,筆者覺得挺好看的,這也是筆者放棄VScode轉(zhuǎn)投Atom的原因,一個高顏值的編輯器在寫代碼的時候可以讓人心情舒暢。

atom-material-ui 加上 atom-material-syntax
atom-material-ui 加上 atom-material-syntax

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容