主內容區域
3-2 Atom 程式編輯工具
常用套件
- cht-menu 中文化選單
- emmet 快速建立 html 語法
emmet 基本教學
html:5 [TAB鍵] 可以產生網頁版面
! [TAB鍵] 可以產生網頁版面
table>tr*3>td*5 [TAB鍵] 可以產生三行五欄的表格
Ctrl+Shit+0 可以選取對映的整段
- color-picker 選色,出現 HTML 顏色編碼 rgb()
預設鍵 Ctrl+Alt + c
- atom-live-server 方便修改內容時,即時更新網頁畫面
ctrl-alt-l launch live server on port 3000.
ctrl-alt-q stop live server.
ctrl-alt-3 launch live server on port 3000.
ctrl-alt-4 launch live server on port 4000.
ctrl-alt-5 launch live server on port 5000.
ctrl-alt-8 launch live server on port 8000.
ctrl-alt-9 launch live server on port 9000.
- github git 同步到 github 工具 (內建)
- platformio-ide-terminal 終端機 Ctrl + `
- Atom Python Run
atom-python-run
可修改 F5 command ,使用 python3
python3 {file}
- Autocomplete Python
python 輔助單詞
程式碼 snippets
- jquery-snippets
視窗右下方先確認是否為 javascript
ajax [TAB鍵] 就可以出現範本
- atom-bootstrap3 (可查看偏好設定中說明)
icon
<span class="glyphicon glyphicon-"></span>
form-group
<div class="form-group">
<label for=""></label>
<input type="text" class="form-control" id="" placeholder="">
<p class="help-block">Help text here.</p>
</div>
自訂自己的 snippets (snippets.cson)
'.source.php':
'xoopsDB_select':
'prefix': 'xoopsDB_sel'
'body': """
global $xoopsDB;
$sql = " SELECT * FROM ".$xoopsDB->prefix("$1")." order by $2 ";
$result = $xoopsDB->query($sql) or die($sql."<br>".$xoopsDB->error());
while ($row = $xoopsDB->fetchArray($result)) {
$data[$row["subject_id"]] = $row["subject_name"];
}
"""
3-1 Visual Studio Code