web前端开发---弃Hbuilder编辑器到Atom插件推荐，快捷键，快速编辑html 使用
1? ATOM
atom編輯器是Github專門為程序員推出的一個(gè)開源跨平臺(tái)文本編輯器。具有簡(jiǎn)潔和直觀的圖形用戶界面，并有很多有趣的特點(diǎn)：支持CSS，HTML，JavaScript等網(wǎng)頁編程語言。它支持宏，自動(dòng)完成分屏功能，集成了文件管理器。并且是跨平臺(tái)的，支持Linux，window，mac。
?
官網(wǎng)地址：https://atom.io/
文檔介紹：https://atom.io/docs
或者去此處下載https://download.csdn.net/download/qq_30993595/10606731
?
2 安裝ATOM?
Mac
解壓下載的zip安裝包后, 將解壓出的Atom應(yīng)用拖到應(yīng)用目錄下?
或者通過Homebrew Cask安裝
Windows
運(yùn)行安裝包安裝
Linux
如果是基于Debian的發(fā)行版, 執(zhí)行命令:
sudo dpkg -i atom-amd64.deb如果是RedHat, 則執(zhí)行:
rpm -i atom.x86_64.rpm安裝完成后運(yùn)行Atom, 將會(huì)看到這樣的界面, 說明我們已經(jīng)安裝成功了
3 快捷鍵
- 新建界面窗口 Ctrl + Shift + N
- 打開命令模式Ctrl + Shift +P
- 新建文件 Ctrl + N
- 打開文件 Ctrl + O
- 打開文件夾 Ctrl + Shift + O
- 關(guān)閉當(dāng)前編輯文檔 Ctrl + W
- 關(guān)閉編輯器 Ctrl + Shift + W
- 復(fù)制文檔路徑 Ctrl + Shift + C
- 選擇編碼格式 Ctrl + Shift +U
- 語法選擇 Ctrl + Shift + L
- 跳轉(zhuǎn)到某行 Ctrl + G
- 全屏 F11
- 從緩存器搜索 Ctrl + F
- 高級(jí)替換 Ctrl + Shift + F
- 啟用注釋 Ctrl + /
- 文件跳轉(zhuǎn)面板 Ctrl + T
- 選定一行 Ctrl + L
- 復(fù)制光標(biāo)所在行并自動(dòng)換行 Ctrl + Shift + D
- 刪除一行 Ctrl + Shift + K
- 刪除光標(biāo)處至詞尾 Ctrl + Del
- 切換編輯的標(biāo)簽頁 Ctrl + Tab
- 選定光標(biāo)處至文檔首行 就是光標(biāo)處作為分割線,取文檔上部分 Ctrl + Shift + Home
- 選定光標(biāo)處至文檔尾行 就是光標(biāo)處作為分割線,取文檔下部分 Ctrl + Shfit + End
?
?
4? 常用插件安裝
?
當(dāng)你需要修改文字大小或者主題或其他的操作不來時(shí)請(qǐng)用第一個(gè)漢化插件所有的問題迎刃而解
?
①? 怎么安裝插件
步驟一：打開設(shè)置沒有漢化也是在同樣位置?
步驟二：打開安裝（同上）
步驟三：輸入你所需要的插件名稱
?
?
?②本人必用幾個(gè)比較---------叼炸天-----------插件
- 強(qiáng)大的漢化插件，將我們常用的菜單欄目漢化----------------? Simplified Chinese Menu
?
- git 與 GitHub 管理? ? (具體使用方法還未研究出來大方向如此，希望有會(huì)的能告知) ------------------- git-plus?
?
- 敲代碼自帶抖動(dòng) 震感 你懂得------------?Activate Power Mode
?
③ web前端實(shí)在的插件
- 美化代碼HTML，CSS，JavaScript，PHP，Python，Ruby，Java，C，C ++，C＃，Objective-C，CoffeeScript，TypeScript，Coldfusion，SQL等等樣式-------? atom-beautify
- 使用方法：單價(jià)右鍵選擇beautify editor contents 、 或者使用快捷鍵Alte+Ctrl+B
?
- 就是用電腦默認(rèn)瀏覽器預(yù)覽我們編輯的文件--------?? open in Browser
- 使用方法：單機(jī)右鍵選擇Open in Browser、? ? 或者快捷鍵Ctrl+shift+Q
?
- 用atom瀏覽器預(yù)覽，直接在atom開啟一個(gè)窗口查看----------? ? ?Browser-plus
- 使用方法：單機(jī)右鍵選擇或者快捷鍵alt+ctrl+o
?
- 顏色選擇器，寫CSS或者樣式表這個(gè)真的挺有效果的? ----------- color-picker
- 使用方法：可鼠標(biāo)單擊右鍵點(diǎn)擊拾色器
?
- 提高HTML/css編寫速度-------Emmet
- 它使用仿CSS選擇器的語法來生成代碼? 自帶代碼提示
?
④?python 插件
- python代碼運(yùn)行，代碼補(bǔ)全 --------- script
- 使用方法命令模式Ctrl + Shift + P 打開命令面板、輸入script:run 運(yùn)行
⑤ file-icons 插件
這是一個(gè)文件圖標(biāo)插件，用過AndroidStudio或者PyCharm，或者其它編輯器的童靴，應(yīng)該注意到每次新建文件的時(shí)候，在左邊樹形目錄這個(gè)文件名字旁邊會(huì)對(duì)應(yīng)一個(gè)符合文件性質(zhì)的圖標(biāo)，這個(gè)插件就是這個(gè)作用，看上面的截圖也應(yīng)該能看出來
⑥ autocomplete-paths
插件這個(gè)還是很有必要的，作用就是自動(dòng)補(bǔ)齊目錄，如果自己手寫，那你在引用CSS文件或者圖片的時(shí)候，就得慢慢敲文件路徑了，而且還容易出錯(cuò)
⑦ docblockr 插件
這個(gè)插件是為了方便注釋用的，可以輸入/** 然后敲回車，輸入ctrl+/ 也可以注釋
⑧ linter 插件
基本語法檢查插件
⑩ linter-jshint 插件
基于 jshint 的 JavaScript 語法檢查插件
? linter-csslint 插件
同上，css語法檢查插件
? linter-htmlhint 插件
同上，html語法檢查插件
? minimap 插件
用過Sublime或者UItraEdit應(yīng)該都知道，就是顯示在編輯器右邊的縮小版代碼，也可以設(shè)置放在左邊
?
?
?
?5 快速編輯HTML
①輸入id，class，文本等
?
②快速輸入文本內(nèi)容
?
③快速生成標(biāo)簽嵌套
?
④一次生成多個(gè)元素及其注意事項(xiàng)
?
CSS縮寫
①css 簡(jiǎn)寫寬高等屬性
比如你輸入寬度或者高度，可以直接輸入w100或者h(yuǎn)100，按下TAB鍵就可以得到
如果不想要以px做單位，而是以百分比，那就用p代替，w10p或者h(yuǎn)10p
其它屬性也是一樣，比如m10或者p10
還有單位縮寫如下
- p 表示%
- e 表示 em
- x 表示 ex
- 不寫單位表示px
②css 添加字體
輸入@f ，然后Tab鍵，可以快速引用字體
輸入@f+，然后Tab鍵，可以加入更多屬性
③css 通過模糊匹配
有時(shí)候你不太確定你要輸入的縮寫，Emmet可以通過模糊匹配找到你想要的
比如輸入oh，ovh，ov-h等都可以匹配到overflow: hidden;
?
④css 漸變效果簡(jiǎn)寫
想要漸變效果，輸入lg(left,#fff 50%,#000)，表示從左到右 顏色從白到黑漸變
?
更多Emmet快捷使用可在這里查看https://docs.emmet.io/cheat-sheet/
參考https://blog.csdn.net/qq_30993595/article/details/81712120
①②③④⑤⑥⑦⑧
轉(zhuǎn)載于:https://www.cnblogs.com/520Girl/p/10226830.html
總結(jié)
以上是生活随笔為你收集整理的web前端开发---弃Hbuilder编辑器到Atom插件推荐，快捷键，快速编辑html 使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2019春季学期第十一周作业
- 下一篇： 大数据学习——免密登录配置