XOOPS輕鬆架 - 線上書籍

:::

用AI學PHP8
========

### 一、安裝前準備

1. 官網：<https://code.visualstudio.com/>
2. 開發工具，請使用自己慣用的文字編輯器即可，上課用Visual Studio Code 為主
3. 建議先安裝以下兩個軟體： 
 - node.js <https://nodejs.org/en/> ，讓功能更完整（可安裝 [20.16.0 LTS](https://nodejs.org/dist/v20.16.0/node-v20.16.0-x64.msi) 版本）。
 - git <https://git-scm.com/download/win>，VSCode的版本控制才會有作用（可安裝 **[64-bit Git for Windows Setup](https://github.com/git-for-windows/git/releases/download/v2.46.0.windows.1/Git-2.46.0-64-bit.exe)**）。
4. 做好編輯器設定 
 ```javascript
 {
 "editor.fontSize": 18,
 // - 'bounded' (當檢視區縮至最小並設定 'editor.wordWrapColumn' 時換行).
 "editor.wordWrap": "on",
 // 控制編輯器是否應自動設定貼上的內容格式。格式器必須可供使用，而且格式器應該能夠設定文件中一個範圍的格式。
 "editor.formatOnPaste": true,
 // 使用滑鼠滾輪並按住 Ctrl 時，縮放編輯器的字型
 "editor.mouseWheelZoom": true,
 // 在儲存時設定檔案格式。格式器必須處於可用狀態、檔案不得自動儲存，且編輯器不得關機。
 "editor.formatOnSave": false,
 // 控制是否應在輸入時自動顯示建議
 "editor.quickSuggestions": {
 "other": true,
 "comments": false,
 "strings": true
 },
 "editor.minimap.enabled": false,
 "editor.tabCompletion": "on",
 "editor.linkedEditing": true,
 "editor.suggestSelection": "first",
 // 若啟用，則會在儲存檔案時，修剪檔案末新行尾的所有新行。
 "files.trimFinalNewlines": true,
 // 若啟用，將在儲存檔案時修剪尾端空白。
 "files.trimTrailingWhitespace": true,
 "files.associations": {
 "*.tpl": "html"
 },
 "[php]": {
 "editor.formatOnSave": true,
 "editor.defaultFormatter": "kokororin.vscode-phpfmt"
 },
 "emmet.triggerExpansionOnTab": true,
 "emmet.showSuggestionsAsSnippets": true,
 "git.ignoreMissingGitWarning": true,
 "git.enableSmartCommit": true,
 "git.autofetch": true,
 "git.confirmSync": false,
 }
 ```
 
### 二、安裝常用套件：

- `Auto Close Tag` : 讓標籤自動閉合的。
- `Auto Rename Tag` : 讓成對的標籤自動一起修改。
- `AutoFileName` : 讓編輯器自動完成圖片或檔案路徑。
- `Bootstrap 5 Quick Snippets` : 快速插入Bootstrap 5 語法片段。
- `Codeium: AI Coding Autocomplete and Chat for Python, Javascript, Typescript, Java, Go, and more`：AI助理
- `Chinese (Traditional) Language Pack for Visual Studio Code`：中文介面
- `Copy file name`：複製檔名
- `Git History`：檢視Git的完整紀錄
- `HTML CSS Support`：網頁的 id 及 class 自動補全，不用自己死記網頁中的 id 或 class 
 ```javascript
 "css.styleSheets": [ 
 "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
 ],
 "css.enabledLanguages": [
 "css",
 "scss",
 "tpl"
 ],
 ```
- `indent-rainbow`：以顏色標出縮排，更容易辨識與對齊
- `Material Icon Theme`：精美的檔案圖示（非必須）
- `PHP Intelephense`：夠快速完成PHP程式碼及查找關聯、精確錯誤報告，請加入設定： 
 ```javascript
 "intelephense.completion.fullyQualifyGlobalConstantsAndFunctions": true,
 "intelephense.environment.includePaths": [
 "vendor"
 ],
 ```
 
 
 - 在套件搜尋框輸入「@builtin php」
 - 將「PHP Language Features」關閉，避免功能衝突
- `phpfmt - PHP formatter`：格式化PHP程式碼用，請加入設定（php.exe 的實際路徑請視實際情況修改） 
 ```javascript
 // php executable path
 "phpfmt.php_bin": "C:/UniServerZ/core/php83/php.exe",
 // enable auto align of ST_EQUAL and T_DOUBLE_ARROW
 "phpfmt.enable_auto_align": true,
 // fixes visibiliy order for method in classes - PSR-2 4.2
 "phpfmt.visibility_order": true,
 // convert multistatement blocks into multiline blocks
 "phpfmt.smart_linebreak_after_curly": true,
 ```
- `Prettier - Code formatter`：美化HTML、JavaScript、CSS...等格式器
- `Smarty Template Support`：Smarty樣板引擎支援
- `vscode-goto-documentation`：快速檔案搜尋
- 不過癮的話，這裡還有更多他人推薦的套件：<http://goodjack.blogspot.com/2018/03/visual-studio-code-extensions.html>
- 最後的完整設定檔：
 
 
 ```javascript
 {
 "editor.fontSize": 18,
 // - 'bounded' (當檢視區縮至最小並設定 'editor.wordWrapColumn' 時換行).
 "editor.wordWrap": "on",
 // 控制編輯器是否應自動設定貼上的內容格式。格式器必須可供使用，而且格式器應該能夠設定文件中一個範圍的格式。
 "editor.formatOnPaste": true,
 // 使用滑鼠滾輪並按住 Ctrl 時，縮放編輯器的字型
 "editor.mouseWheelZoom": true,
 // 在儲存時設定檔案格式。格式器必須處於可用狀態、檔案不得自動儲存，且編輯器不得關機。
 "editor.formatOnSave": false,
 // 控制是否應在輸入時自動顯示建議
 "editor.quickSuggestions": {
 "other": true,
 "comments": false,
 "strings": true
 },
 "editor.minimap.enabled": false,
 "editor.tabCompletion": "on",
 "editor.linkedEditing": true,
 "editor.suggestSelection": "first",
 // 若啟用，則會在儲存檔案時，修剪檔案末新行尾的所有新行。
 "files.trimFinalNewlines": true,
 // 若啟用，將在儲存檔案時修剪尾端空白。
 "files.trimTrailingWhitespace": true,
 "files.associations": {
 "*.tpl": "html"
 },
 "[php]": {
 "editor.formatOnSave": true,
 "editor.defaultFormatter": "kokororin.vscode-phpfmt"
 },
 "emmet.triggerExpansionOnTab": true,
 "emmet.showSuggestionsAsSnippets": true,
 "git.ignoreMissingGitWarning": true,
 "git.enableSmartCommit": true,
 "git.autofetch": true,
 "git.confirmSync": false,
 "css.styleSheets": [
 "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
 ],
 "css.enabledLanguages": [
 "css",
 "scss",
 "tpl"
 ],
 "workbench.iconTheme": "material-icon-theme",
 "intelephense.completion.fullyQualifyGlobalConstantsAndFunctions": true,
 "intelephense.environment.includePaths": [
 "vendor"
 ],
 // php executable path
 "phpfmt.php_bin": "C:/UniServerZ/core/php83/php.exe",
 // enable auto align of ST_EQUAL and T_DOUBLE_ARROW
 "phpfmt.enable_auto_align": true,
 // fixes visibiliy order for method in classes - PSR-2 4.2
 "phpfmt.visibility_order": true,
 // convert multistatement blocks into multiline blocks
 "phpfmt.smart_linebreak_after_curly": true,
 }
 ```
 
### 三、常用快捷鍵

1. <kbd>Ctrl</kbd>+<kbd>N</kbd>：建立新檔
2. <kbd>Ctrl</kbd>+<kbd>C</kbd>：複製
3. <kbd>Ctrl</kbd>+<kbd>V</kbd>：貼上
4. <kbd>Ctrl</kbd>+<kbd>S</kbd>：儲存
5. <kbd>Ctrl</kbd>+<kbd>F</kbd>：搜尋
6. <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>F</kbd>：跨檔搜尋
7. <kbd>Ctrl</kbd>+<kbd>H</kbd>：取代
8. <kbd>Ctrl</kbd>+<kbd>/</kbd>：註解
9. <kbd>Shift</kbd>+<kbd>Alt</kbd>+<kbd>A</kbd>：區域註解
10. <kbd>Ctrl</kbd>+<kbd>`</kbd>：開終端機
11. <kbd>Ctrl</kbd>+<kbd>B</kbd>：關閉左側工具
12. <kbd>Ctrl</kbd>+<kbd>X</kbd>：刪除目前行
13. <kbd>Ctrl</kbd>+<kbd>G</kbd>：跳至某行
14. <kbd>Ctrl</kbd>+<kbd>end</kbd>：跳至檔案結尾
15. <kbd>Ctrl</kbd>+<kbd>Z</kbd>：回上個動作（復原）
16. <kbd>Ctrl</kbd>+<kbd>Y</kbd>：回下個動作（再做）
17. <kbd>shift</kbd>+<kbd>alt</kbd>+<kbd>F</kbd>：美化（格式化）語法
18. <kbd>shift</kbd>+<kbd>alt</kbd>+<kbd>滑鼠左鍵</kbd>：區塊標記
19. Emmet語法：<https://abgne.tw/web/emmet-tutorial-series-basic.html>

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1985

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器