{oc.tech.notes} 技術誌: VSCode

顯示具有 VSCode 標籤的文章。顯示所有文章

2022/03/21

[PHP] 如何在 VS Code 使用 php-cs-fixer 自動修正 coding style 格式

markdown 因應 [PSR-12: Extended Coding Style](https://www.php-fig.org/psr/psr-12/)，讓 VS Code 來幫忙自動修正程式碼風格 ### 環境 - PHP 8.0.15 - Composer 2.2.6 - friendsofphp/php-cs-fixer v3.6.0 ### php-cs-fixer Composer 全域安裝 ``` composer global require friendsofphp/php-cs-fixer ``` 其他安裝方式: [PHP-CS-Fixer 安裝文件](https://github.com/FriendsOfPHP/PHP-CS-Fixer/blob/master/doc/installation.rst)

2020/12/13

[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 就是這麼簡單!

2019/08/09

[VSCode] 解決 Windows 10 1903 開啟 VSCode 內嵌 Terminal 終端機視窗跳出問題

markdown ### 問題在 VS Code 開啟終端機時, 命令視窗是跳出式而非內嵌在 VS Code 內 ### 環境 - Windows 10 1903 版本 - VS Code 1.36.1 ### 解決方法開啟設定，搜尋 conpty 把選項 Terminal > Integrated: Windows Enable Conpty 勾消即可

### 參考連結 - [Terminal is always launching externally when ConPTY is turned on](https://github.com/microsoft/vscode/issues/73790) - [Intergrated terminal is pop out](https://github.com/microsoft/vscode/issues/78670) - [How do I get around the verified bug in Windows 1903 and launch the VSCode integrated terminal?](https://stackoverflow.com/questions/56154957/how-do-i-get-around-the-verified-bug-in-windows-1903-and-launch-the-vscode-integ)

2019/06/11

[VSCode] 用 VS Code 開啟 Laravel-Tracy 偵錯的檔案

markdown 以前寫過一篇是用 Sublime 開啟 Tracy 偵錯的檔案: [善用工具 -- Tracy 讓 PHP Debug 變簡單了](https://devmanna.blogspot.com/2015/10/tracy-tracy-php-debug.html) 現在都用 VS Code 或 PhpStorm 來寫 PHP 專案來記錄一下怎麼使用 VS Code 來開啟 Laravel-Tracy 偵錯到的檔案 ### 環境 - Laravel-Tracy 1.8.23 - VS Code 1.35.0 ### 編輯器設定 Protocol: `vscode://file/%file:%line` [Tracy](https://tracy.nette.org/en/) 的設定如下 ```php // Visual Studio Code Tracy\Debugger::$editor = 'vscode://file/%file:%line'; ``` [Laravel-Tracy](https://github.com/recca0120/laravel-tracy) 的設定如下 (`config/tracy.php`)

### 瀏覽器以下為各個瀏覽器用 VS Code 來開啟檔案的對話視窗 Microsoft Edge

Chrome

Firefox

### References - [How to open a file in editor from Tracy?](https://tracy.nette.org/en/open-files-in-ide) - [Laravel-Tracy](https://github.com/recca0120/laravel-tracy)

2019/01/17

[VS Code] 如何整合設定 PHP 的開發環境至 Visual Studio Code

最近在帶 Laravel 工作坊，有許多學員為非程式開發人員，在入門程式開發的過程中。要把開發環境設定完成，若不透過手把手帶領，可能要繞很大圈才有辦法完全設定完畢。

由於 Laravel 這個框架的底程程式語言為 PHP。就以 PHP 的開發環境來跟 Visual Studio Code 做整合介紹。

目的

以 Visual Studio Code 為我們整合的開發環境：Git, Terminal, PHP 的整合設定

這次介紹主要以 Windows 的作業系統平台來做範例。當然大多數的 Visual Studio Code 設定也適用於 Mac，只是在 Mac 的設定上會少很多 (主要是 Terminal 以 bash 為主，PHP 及 Git 的路徑設定在安裝完時已經 Ready 了)

環境

Windows 10
wagon (v1.4.0) (WAMP 安裝整合包: 已包含 PHP)
Git (v2.20.1)

https://www.laravel-dojo.com/opensource/wagon

2018/06/05

[VSCode] PHPUnit Snippets 擴充套件釋出

來囉~ 來囉~ Visual Studio Code 的擴充套件 PHPUnit Snippets 釋出囉！

套件介紹: PHPUnit Snippets

基本用法 - 看圖片說故事

1. 先確認文件是 PHP 的文件 (可按 Ctrl + K + M 切換)
2. 在 PHP 程式碼區段輸入 snippet, 圖例: assequ (自動會找到相近的名稱可使用，是不是超級聰明？可以少打好多字)

快來試試看吧～ PHPUnit Snippets 也別忘了給星星跟推薦唷！

2016/11/26

[CentOS] 如何在 CentOS 7 安裝使用 Visual Studio Code

自接觸客戶的 CentOS 系統, 為了要可同步並熟悉它的操作, 自己也架了一台虛擬機使用.

說實在的, 如果是個人使用的話, 我比較推薦 Ubuntu 比較人性化, 也比較不會有一些預期外的事發生.

不講別的, 在有 GUI 的主機上只有 Vim 或 gedit 來做 coding 的工具就弱掉了!

- Vim 通常是逼不得已, 或是應急小改編輯用. 真要拿來做開發用, 還是免了吧. :p

- gedit 也只是像 notepad 的功能編輯文字用

- Visual Studio Code 不僅免費用, 重要的是它跨平台的特性, 而且愈來愈好用, 開發網站, 至少這個基本的編輯器一定要有.

不廢話了~ 先來安裝 Visual Studio Code 吧!!

2016/07/24

[VSCode] Laravel Blade Snippets 外掛釋出

Laravel Blade Snippets - 支援 Blade 程式碼片斷, 以及 Blade 語法高亮顯示

外掛介紹: Laravel Blade Snippets

2016/06/07

[VSCode] 如何在 Visual Studio Code 啟用 Terminal 指令列

今日收到 1.2 的升級通知, 其中一項重大更新就是 Terminal

隨著開發使用指令的機會愈加頻繁, Terminal 的整合使用也愈顯重要

在 Visual Studio Code 已可以設定 tasks, 可以在不需開啟 Terminal 的情況下做些建置動作

但是有更多的時候, 還是脫離不了打指令執行某些任務

使用版本: Visual Studio Code 1.2.0

在 VS Code 裡開啟 Terminal 很簡單，快速鍵 Ctrl + ` 即可開啟 (Windows 及 Mac 上都是相同快速鍵)

另外目前在 Windows 10 要能正確開啟，需要做些變更設定如下:

2016/05/10

[VSCode] 升級 Visual Studio Code 1.1.0 可以放心用中文界面囉

自從 Visual Studio Code 更新至 1.0.0 版後，就支援各國語系的界面。

但是卻因為翻譯翻過頭，連平常要下的指令也都被翻了，突然指令找不到無法執行，整個卡呀！

然而早已習慣英文界面，而且下指令能夠正常，至今一直維持英文版界面操作。

剛剛熱騰騰的更新通知，Visual Studio Code 1.1.0 發佈更新，當然立馬更新囉！

瞄了一下 Bug 修復中有一條~ Don't localize command names on the command palette.

這個就是遲遲不變更界面的主要原因呀!!

如今最大問題解決了，非中文界面不可的朋友快更新吧！

這樣看起來是不是感覺特別好？ :)

2016/04/18

[VSCode] 如何在 Visual Studio Code 整合呼叫 Dash API 文件

Viausl Studio Code + Dash = 加速在編寫程式時查詢 API 文件的速度及效率

2016/04/15

[VSCode] 如何變更 Visual Studio Code UI 介面語系

Visual Studio Code 1.0 釋出後，自動變更成本機的語系，自動中文化了

如果想要維持使用英文版介面，可以這麼做

鍵盤輸入 Ctrl + Shift + P 跳出指令輸入框

輸入語言 -- 即可找到 "設定語言"

只需把 Locale 的值變更成希望呈現的介面語系即可

繁中: zh-TW
英文: en-US

變更後，儲存並重開 Visual Studio Code 即可

可變更的語系列表: VSCode - Display Language

Visual Studio Code 1.0 正式釋出

千呼萬喚始出來之 Visual Studio Code 1.0

2016/02/13

[編程工具] 輕量好用的程式編輯器 Visual Studio Code

寫程式只要有文字編輯器, 都可以完成工作! 但是, 好的程式編輯式, 幫助可就大大加分囉~
這十幾年來用過無數種編輯器, 細數真的也不少吶, 記事本不算在內的話, 有 UltraEdit, BBEdit, Notepad++, Sublime Text, etc. 有些可跨平台, 有些沒有. 但是其實跨平台可使用是我最想要的功能啊~減少學習曲線是一個, 再著是用同一款熟悉的工具對效率也是一大重點!

Visual Studio Code 是除了最強的 IDE - Visual Studio 外, 還不算是完美, 但我覺得還不錯用的程式編輯器.

以下是個人喜愛的功能, 跟大家分享, 也許你也會愛上它!