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