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"];
         }
     """