先來比較一下設定前與設定後。
設定前 :
![[Flutter] 設定 VSCode 編輯 Dart 時顯](https://pimg.1px.tw/mitblog/1739686432-1556530364-g.png "[Flutter] 設定 VSCode 編輯 Dart 時顯")
設定後 :
![[Flutter] 設定 VSCode 編輯 Dart 時顯](https://pimg.1px.tw/mitblog/1739686544-2601038406-g.png "[Flutter] 設定 VSCode 編輯 Dart 時顯")
設定步驟
1. 開啟 VSCode，在左下角點擊 Settings.
![[Flutter] 設定 VSCode 編輯 Dart 時顯](https://pimg.1px.tw/mitblog/1739686839-3496047276-g.png "[Flutter] 設定 VSCode 編輯 Dart 時顯")
2. 展開 Extensions → Dart → Expermental，找到 Preview Fluter Ui Guides 和 Preview Flutter Ui Guides Custom Tracking 勾選它。
![[Flutter] 設定 VSCode 編輯 Dart 時顯](https://pimg.1px.tw/mitblog/1739687070-3651129585-g.png "[Flutter] 設定 VSCode 編輯 Dart 時顯")
3. 重開 VSCode。可以試著開 Flutter Project 就能看到代碼顯示豎線了。
投資、股票、理財、銀行 (1) 免費線上 (4) 耶穌是主 (1) 汽車、機車 (2) 房屋、建築 (1) 數學(Math) (1) English Study (1) Linux Unix-like (5) 駭客-黑客-防毒(Hacker-Hacking-Virus) (5) HTML (1) 練習作品 (1) JavaScript (3) Node.js (1) 勞保、勞退、健保相關 (1) 網路連線速度測試 (1) 虛擬機器 (3) Perl Programming (1) C/C++ Programming Language (8) C# WPF(Windows Presentation Foundation) (14) Linux script Programming (1) VB.NET、VB (1) C# Programming Language (327) C# Xamarin (2) PHP Programming Language (12) C# ASP.NET (16) C# ASP.NET MVC (1) jQuery Tools (1) 瀏覽器(Browser) (1) 電腦知識 (3) Hinet (1) 緣份故事 (1) 醫療 (1) 資料庫設計實務 (1) Access (1) MySQL (1) NuoDB (1) SQLite (1) MariaDB (2) T-SQL (15) JSON (1) SQL injection(XSS) (1) Microsoft (20) Microsoft Downloads (2) Google Android (6) Skype Messenger (1) MSN messenger (1) Yahoo messenger (1) 軟體 (45) 電子相關 (1) 電腦硬體 (1) Apache (3) CentOS (2) backtrack (1) Fedora (4) JQuery (12) Google (3) Yahoo 知識回答、Yahoo knowledge answer. (1)