:::

1. 準備開發工具

一、安裝

  1. 本次研習用 Visual Studio Code 來進行開發  https://code.visualstudio.com/Download
  2. https://nodejs.org/en/
  3. 請下載適合的版本來安裝使用。

二、安裝擴充套件

  1. 以下是建議安裝的套件:
    • AutoFileName : 讓編輯器自動完成圖片或檔案路徑。
    • Auto Rename Tag : 讓成對的標籤自動一起修改。
    • Auto Close Tag : 讓標籤自動閉合的。
    • Bootstrap 4 & Font awesome snippets : 插入 snippets 的工具,插入 Bootstrap 4 或 Font awesome 圖示。
      • 輸入b4fa 即可挑選想用的程式片段
    • stylefmt:美化CSS
    • Preview on Web Server : 將編輯的頁面直接在側邊或預設瀏覽器中預覽
      • Ctrl+Shift+P:在編輯器中開出預覽視窗
      • Ctrl+Shift+L:在預設瀏覽器預覽

三、設定

  1. 點擊左下左齒輪,按下「設定」
  2. 可將左邊系統預設的設定項目,貼到右邊區域中變成自訂項目,並調整設定值,如:
    {
        "workbench.colorTheme": "Monokai",
        // 控制字型大小 (以像素為單位)。
        "editor.fontSize": 18,
        //  - 'bounded' (當檢視區縮至最小並設定 'editor.wordWrapColumn' 時換行).
        "editor.wordWrap": "on",
        // 控制編輯器是否應自動設定貼上的內容格式。格式器必須可供使用,而且格式器應該能夠設定文件中一個範圍的格式。
        "editor.formatOnPaste": true,
        // 使用滑鼠滾輪並按住 Ctrl 時,縮放編輯器的字型
        "editor.mouseWheelZoom": true,
        // 在儲存時設定檔案格式。格式器必須處於可用狀態、檔案不得自動儲存,且編輯器不得關機。
        "editor.formatOnSave": true,
    }

四、常用快捷鍵

  1. Ctrl+N:建立新檔
  2. Ctrl+C:複製
  3. Ctrl+V:貼上
  4. Ctrl+F:搜尋
  5. Ctrl+Shift+F:跨檔搜尋
  6. Ctrl+H:取代
  7. Ctrl+/:註解
  8. Ctrl+`:開終端機
  9. Ctrl+B:關閉左側工具
  10. Ctrl+X:刪除目前行
  11. Ctrl+G:跳至某行
  12. Ctrl+end:跳至文件結尾
  13. Ctrl+Z:回上個動作(復原)
  14. Ctrl+Y:回下個動作(再做)
  15. shift+alt+F:美化(格式化)語法
  16. shift+alt+滑鼠左鍵:區塊標記
  17. 完整快捷鍵整理:https://poychang.github.io/vscode/

:::

書籍目錄

展開 | 闔起

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D32%26tbdsn%3D952

計數器

今天: 4982498249824982
昨天: 3438343834383438
總計: 7395311739531173953117395311739531173953117395311