[VS2022 Tips] 建立程式碼樣式的命名規則

markdown 記錄前陣子學到一招在 Visual Studio 建立 Code Style 的命名規則 經常透過在 constructor 裡注入物件, 然後透過 Visual Studio 自動建立 private 屬性 預設是會以無底線的 camelCase 方式來命名, 但是經常要再重新命名為有底線的方式 (private (C# Reference)), 雖然也不是太複雜, 但每寫一次就要改一次, 其實也蠻枯燥乏味 ## 建立 Code Style 命名規則 在 Tools > Text Editor > C# > Code Style > Naming 先做 nameing styles 的管理

輸入 Style 的標題: `Prefix _` (自己看得懂的就可以了), 在 Prefix 輸入 `_`, 在 Capitalization 選擇 `camel Case Name`

最後新增規則指定 `Private or Internal Field`

[Terminal] Windows 開發者的好朋友 Windows Terminal

markdown ### 前言 在 Windows 的環境下，開發者可以選擇使用指令模式的機會還不少，預設能選擇的有 PowerShell 或 cmd 命令提示字元。 而我本身在 Windows 環境下，使用 Cmder 工具有好一段時間，喜歡它的原因當然只因為外觀的客製以及分頁。還有另一個很重要的功能：連結可以直接點擊並自動開啟瀏覽器。這個對於網站開發者相當友善，因為少了好幾個步驟即可達成瀏覽的動作。 [Windows Terminal](https://docs.microsoft.com/zh-tw/windows/terminal/?WT.mc_id=DOP-MVP-5002629) 已經推行了一段時間，我也從 Cmder 跳到 Windows Terminal 一陣子，但僅一項仍未滿足的部分就是直接點擊連結這功能。有時反而更依賴 VS Code 的 Terminal 補足了這部分功能。 好消息就在今早突然發現可以用了。立馬查詢了一下[更新日誌](https://github.com/microsoft/terminal/releases)，版本 v1.5.10271.0 已經支援自動檢測 URL 囉！從此刻起可以大力推推推~~ ### Windows Terminal 什麼是 Windows 終端機 ([Windows Terminal](https://docs.microsoft.com/zh-tw/windows/terminal/?WT.mc_id=DOP-MVP-5002629))? 「Windows 終端機是新式的終端機應用程式，適用於使用命令列工具和命令介面 (如命令提示字元、PowerShell 和 Windows 子系統 Linux 版 (WSL)) 的使用者。 其主要功能包括多個索引標籤、窗格、Unicode 和 UTF-8 字元支援、GPU 加速文字轉譯引擎，以及讓您能夠建立自己的佈景主題並自訂文字、色彩、背景和快速鍵。」 ### 安裝 Windows Terminal 在 Microsoft Store 搜尋 terminal 即可找到 Windows Terminal

最早開始換用 Windows Terminal 是用它來開啟 bash (安裝 Git 就會自帶 bash)，原本在用 Cmder 也是開 bash，主要是因為本身也是 Mac 使用者，為求操作體驗一致，加上 bash 的 alias 讓跨平台開發一切變得順暢。 以下就我喜歡的特色加以介紹，一起來探索吧！ #### 支援各式命令列 任何具有命令列介面的應用程式都可以在 Windows 終端機內執行。 - PowerShell - Cmd 命令提示字元 - Azure Cloud Shell - WSL - Bash 依據需求我會開啟不同的命令列，因為完整整合就不需各別開啟個別視窗，相當方便。 不僅可以選擇預設的命令列，而且還可以選擇顯示或隱藏，下圖則是我把 Azure Cloud Shell 隱藏了。

#### 客製化設定 喜歡什麼配置自由選擇 [Windows 終端機中的色彩配置](https://docs.microsoft.com/zh-tw/windows/terminal/customize-settings/color-schemes?WT.mc_id=DOP-MVP-5002629) 開啟設定 (settings.json) 至任何 commandline 的區塊加上 `colorScheme` 例如: ``` { "commandline: "powershell.exe", "colorScheme": "One Half Dark", } ``` `colorScheme` 預設選擇有： - Campbell - Campbell Powershell - Vintage - One Half Dark - One Half Light - Tango Dark - Tango Light 若是想要自己設定自己的色彩配置請看 [自訂終端機指南](https://docs.microsoft.com/zh-tw/windows/terminal/custom-terminal-gallery/custom-schemes?WT.mc_id=DOP-MVP-5002629) #### 自定鍵盤快速鍵 在設定檔案中的 `keybindings` 區塊設定快速鍵 設定格式如下: 不含引數的命令 ``` { "command": "closeWindow", "keys": "alt+f4" } ``` 具有引數的命令 ``` { "command": { "action": "newTab", "index": 0 }, "keys": "ctrl+shift+1" } ``` 更多詳細動作可查閱 [Windows 終端機中的自訂動作](https://docs.microsoft.com/zh-tw/windows/terminal/customize-settings/actions?WT.mc_id=DOP-MVP-5002629) #### 支援背景影像 在 WSL 我選擇用 Ubuntu 的圖片來做背景，一方面也讓我可以直覺知道我正在操作 WSL

#### 對開發者友善的功能 真心覺得 Windows Terminal 終於實現開發者很需要的重要功能啊~~

### 結語 對視覺系的開發者來說，打指令也要賞心悅目，打造自己喜歡的工具開發起來也會更得心應手。最後一塊拼圖今日出現，我認為至少在目前最新的版本已經達到我的需求。希望也能成為你喜歡的命令列工具！

[Node.js] 解決 express: command not found 問題

markdown ### 開發環境 - Windows 10 / macOS 10.15.6 - Node 14.5.0 ### 問題 最近研究採用 Node + Express 跑前端應用 找到許多文件在 npm global 安裝 express 可以執行 cli 命令 ``` $ npm install -g express $ express --version ``` 但在查詢版本指令下卻出現 `express: command not found` 原因是在版本 4.x 與 3.x 有所不同, 在 v4.x 版已將 cli 移至 `express-generator` ### 解決方法 安裝全域 express-generator (目前版本是 4.16.1) ``` $ npm install -g express-generator ``` 另外在 v4.x 的命令方法也有所不同, 可以下 `express -h` 作進一步查詢 ### References - [Express application generator](https://expressjs.com/en/starter/generator.html) - [適合初學者在 Windows 上開始使用 Node.js](https://docs.microsoft.com/zh-tw/windows/nodejs/beginners?WT.mc_id=DOP-MVP-5002629)

[VSCode] 如何在 VSCode 搭配 XDebug 偵錯 PHP 程式

markdown Xdebug 3 已經正式釋出, 不僅在效能上提升, 在設定上也變得簡單許多。 今天來介紹如何在 VSCode 上使用 XDebug 來偵錯 PHP 程式。 ### 環境 - Windows 10 - VSCode v1.52.0 - PHP v7.4.12 - XDebug v3.0.0
PHP 在本機上的環境變數設定，請參考 [如何整合設定 PHP 的開發環境至 Visual Studio Code](https://devmanna.blogspot.com/2019/01/vs-code-php-environment-intergration-settings.html)
### PHP 加上 Xdebug 下載 [PHP XDebug](https://xdebug.org/download#releases)，請務必下載對應 PHP 的版本 `php.ini` 設定檔需加上 XDebug 的設定來開啟 debug 模式 zend_extension 請設定您的 PHP XDebug 的檔案位置 ``` [xdebug] zend_extension="D:\_devlib\php\xdebug\php_xdebug-3.0.0-7.4-vc15-x86_64.dll" xdebug.mode=debug xdebug.start_with_request=yes ; xdebug 3 版 port 預設為 9003, 若想維持與 2 版一樣的 9000 port 則可變更 client_port 的值 ;xdebug.client_port = 9000 ``` XDebug v3 的設定是不是精簡許多? 確認 PHP 是否正確掛載 XDebug 的 extension ``` $ php -v ``` 顯示應會如下 (必須出現 with Xdebug ...) ``` PHP 7.4.12 (cli) (built: Oct 27 2020 17:18:47) ( ZTS Visual C++ 2017 x64 ) Copyright (c) The PHP Group Zend Engine v3.4.0, Copyright (c) Zend Technologies with Xdebug v3.0.0, Copyright (c) 2002-2020, by Derick Rethans ```
### 安裝 VSCode 的 PHP Debug 套件 - [PHP Debug](https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug) by Felix Becker 或者是安裝 [PHP Productive Pack](http://bit.ly/2xSEkwZ) 套件包增加生產力

### VSCode 的偵錯設定 在 VSCode 開啟 PHP 專案，點 "執行" 選擇 "新增組態"，選擇 "PHP"

即會自動產生對應程式語言的偵錯設定檔 `.vscode/launch.json` 由於目前使用 XDebug 的版本是 v3.0.0，預設的 port 要改成 `9003` 才行 ```json { "version": "0.2.0", "configurations": [ { "name": "Listen for XDebug", "type": "php", "request": "launch", "port": 9003 }, { "name": "Launch currently open script", "type": "php", "request": "launch", "program": "${file}", "cwd": "${fileDirname}", "port": 9003 } ] } ```
### 執行偵錯 下圖為一個簡單的 PHP 檔案，前面有紅點為指定偵錯的中斷點 1. 先在程式加上偵錯中斷點 2. 執行偵錯 - Listen for XDebug (偵錯監聽中，需在終端機或網站執行到此行程式才會觸發偵錯) - Lunch currently open script (即會在 focus 的 PHP 程式啟動偵錯) 3. 偵錯步驟 (繼續/不進入函式/逐步執行/跳離函式/重新啟動/停止) 在偵錯的面板上即可看到偵錯的訊息 例如此例在程式跳到第 5 行時, $x 的變數值為 "VSCode + PHP Debug mode!"

偵錯 PHP 就是這麼簡單!

[Composer] v2.0 已釋出! 來更新至最新的 Composer 2.0 版本吧!

markdown 2020-10-24 Composer 2.0 正式釋出! ### 關於 Composer 2.0 新功能 - 改善效能 50% 以上 (這個很需要啊) - 架構變更及確定性：vendor 更新不受網路錯誤干擾 - Runtime 特徵 (可在 composer.json 設定 `"composer-runtime-api": "^2.0"`) - 錯誤訊息改善 - 暫時限制部分更新 (`composer update vendor/package:1.0.*`) ### 如何更新至 Composer 2.0 Composer 2.0 基本上可以順利快速升級 - 2.0 版本仍支援 PHP 5.3 以上版本 - composer.lock 檔案可在版本間互相操作，可更新至 2.0 版本或是回復 - 大多數的命令在 2.0 保持一致 若原先使用 Composer 1.x 版本，執行 `composer self-update` 則會更新 1.x 的主要穩定版本 更新至 2.0 只要執行以下命令 ``` composer self-update --2 ``` 若隨時要變更至 1.x 版本，則執行 ``` composer self-update --1 ``` ### 向下相容問題 - plugings: 需要更新支援 Composer 2 - 避免相容性錯誤，可在部署至 production 時執行 `composer check-platform-reqs --no-dev` - Repository 優先性：若套件存在於較高優先的儲存庫，即會完全忽略較低優先性的儲存庫 - 無效的 PSR-0 / PSR-4 設定將不自動載入 optimized-autoloader 模式 ### 未來如何 根據發佈消息，Composer 2.1 應該還是會支援 PHP 5.3，但 Composer 2.2 就會要求要 PHP 7.1.3 以上版本。 ### References - [Composer 2.0 is now available!](https://blog.packagist.com/composer-2-0-is-now-available/) - [Upgrade guides for Composer 1.x to 2.0](https://getcomposer.org/upgrade/UPGRADE-2.0.md)

[Laravel] Laravel 8 搶先玩

markdown Laravel 8 即將在 September 8, 2020 釋出！ 今天就搶先來玩一下囉～ #### 更新 Laravel Installer 先來把 Laravel Installer 更新到最新版本 4.0.0 ### 方法 1: 直接修改本機全域的 `composer.json` 把 `laravel/installer` 的版本改成 "^4.0" ```json { "require": { ... "laravel/installer": "^4.0" } } ``` 再執行全域更新 ``` composer global update ``` ### 法方 2: 移除再重裝 Laravel Installer 先移除 ``` composer global remove laravel/installer ``` 再安裝最新版本 ``` composer global require laravel/installer ``` 確認版本是否為新版 ``` laravel -v ```

#### Laravel 8 我們來用剛剛新裝的 Laravel Installer 來建立 Laravel 8 專案吧！ 因為目前還沒正式 Release, 所以先來裝 dev 版本 暫時先把專案名稱命名為 lv8-dev ``` laravel new lv8-dev --dev ```

新版本安裝畫面變得不一樣囉～ 有 Laravel 圖文字樣煥然一新！ 再來看一下 Laravel 8 的新呈現畫面 (本範例使用 Valet 開發環境, 若以指令瀏覽結果，請輸入 `php artisan serve`)

[macOS] Mac 解決 gyp: No Xcode or CLT version detected! 的問題

markdown ### 環境 - macOS Catalina 版本 10.15.6 - Node v14.5.0 - npm v6.14.5 ### 問題 最近換新電腦，在開新專案執行 npm install 時出現下列訊息 ``` No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'. No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'. No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'. gyp: No Xcode or CLT version detected! gyp ERR! configure error gyp ERR! stack Error: `gyp` failed with exit code: 1 ``` ### 解決方法 參考此文：[Installation notes for macOS Catalina (v10.15)](https://github.com/nodejs/node-gyp/blob/master/macOS_Catalina.md) ``` sudo rm -rf $(xcode-select -print-path) ``` 執行過程它會重新安裝 command line tools 完成安裝後就行了 參考連結中還有其他指令，但我僅執行這行就成功了，若有朋友也遇到相同問題，可以參考接下來的動作 ``` xcode-select --install ```