發表文章

目前顯示的是有「VSCode」標籤的文章

解決Ubuntu22.04下VSCode的快速修復(快捷鍵Ctrl+.)無法使用的問題

圖片
我們在VSCode中開發typescript或java專案時,很常會在程式碼中看到以波浪符號標示東西。這是要提醒我們標示的寫法可能有問題,或是習慣不好的部份。滑鼠移過去可以看到它會附帶一個快速修復的建議,使用快捷鍵Ctrl+.可以套用。 接著,我們的問題就出現了,在Ubuntu 22.04環境下在VSCode中按Ctrl+.會出現一個帶底線小e符號。怎麼按Ctrl+.都無法讓這個快速修復的快捷鍵生效。  

臨時解法:Ubuntu 22.04無法自動更新VSCode

圖片
 最近安裝Ubuntu 22.04之後, 使用軟體安裝器開啟deb檔案竟然都只會顯示deb資訊而無法按安裝, 如下圖

VSCode設定預設字串為JS單引號或雙引號

圖片
開啟VSCode設定頁,搜尋quote 如圖所示,在這裡可以變更使用single/double/auto

解決VSCode使用DevContainer遭遇問題:Failed to connect to bus

一段時間沒使使用DevContainer, 之前的解決方案 竟然出現了問題。使用systemctl status httpd指令遭遇了 Failed to connect to bus 問題。跟著網路資料操作了幾種看到的參數都無法有效解決。 

解決VSCode使用DevContainer遭遇問題:System has not been booted with systemd as init system (PID 1)

要解決System has not been booted with systemd as init system (PID 1)的問題,可以參考 https://github.com/microsoft/vscode-remote-release/issues/3919

VSCode中使用既有的docker image作為Dev Container的目標

若要在VSCode中,使用已存在docker image作為Dev Container使用標的,這部份在官方的說明文件有提到,詳細說明可以參考 這裡 。

VSCode使用podman作為Remote developement預設container

 想要在VSCode使用podman作為Remote development預設container,需要視你的開發環境而定。 如果你是使用Attach container development或是Connect ssh development,你需要跟隨 上一篇 的設定方式。

VSCode使用podman作為工作目錄預設的container

想要VSCode使用podman作為預設container,我們可以設定編輯器全域的設定,或是目錄/工作目錄的設定兩種。

VSCode存檔時自動執行格式化javascript程式碼

圖片
1. 安裝VSCode外掛 eslint https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint 之前tyescript微軟有寫tslint不過廢棄了,現在用eslint外掛 2. 設定VSCode 建立.vscode/settings.json檔案,將eslint的設定開啟。 {     "editor.codeActionsOnSave": {         "source.fixAll.eslint": true     } } 3. 設定你要的lint風格 eslint設定檔是.eslintrc.json 你也可以用eslint套件來產生 yarn add -D eslint 輸入以下指令後會以交互提問來確認你想要產生的設定檔 yarn eslint --init 以下是我產生一個typescript用的.eslintrc.json設定檔 { "env" : { "node" : true , "jest" : true }, "extends" : "standard" , "parser" : "@typescript-eslint/parser" , "parserOptions" : { "ecmaVersion" : 12 , "sourceType" : "module" }, "plugins" : [ "@typescript-eslint" , ], "rules" : { }, "ignorePatterns" : [ "node_modules" , "dist" ...

在VSCode中使用docker開發react

在VSCode中使用Docker環境開發react Development React App with docker in VSCode 嘗試使用過 在VSCode在使用Docker環境開發Flutter 後,就想到應該我現在所有的開發工作應該都可以docker化了吧! 就開始著手研究起了React部份。 起手使用了nodejs的docker環境,只是跑起來有權限不足的問題,果然轉套一個技術沒這麼簡單,中間琢磨了許久,後面將調整的結果與大家分享。

解決VSCode寫jest測試React Native沒有自動補完的問題

圖片
解決自動補完(Autocomplete)問題 要讓VSCode自動補完需要套件支援 在專案下安裝套件 yarn add @types/jest --dev 安裝完後重開VSCode就會出現補完項目了! VSCode其他jest推薦套件 個人推薦還可以安裝VSCode的jest套件,協助執行單一test項目的測試 1. Jest - 當你程式存檔時會自動執行測試 2. Jest Snippets - 寫測試時輸入幾個字就可以產生固定template的套件

將cmder設為VSCode預設終端機

圖片
因為之前已經習慣用cmder開發APP,只是一直都是分開使用VSCode和cmder,剛看到整合使用shell的例子覺得有必要加入VSCode。 如果你會開啟setting,json,直接開起來加入下面設定2行即可     "terminal.integrated.shell.windows": "cmd.exe",     "terminal.integrated.shellArgs.windows": [         "/k", "%CMDER_ROOT%\\vendor\\init.bat"     ], 這設定是 cmder官方提供的設定方法 ,記得先設定環境變數CMDER_ROOT為你的cmder路徑。 如果不會開啟setting.json,請跟隨以下指引開setting.json 需要先開啟VSCode的終端機功能(如下圖下方列) 按終端機右上角的選單,點擊" 設定終端設定 " (如圖右下) 接著就會開啟下圖左方的這個的畫面,稍微向下滾動找到" 在 settings.json 內編輯 " 另外官方github也有該如何整合進Windows的右鍵選單 https://github.com/cmderdev/cmder/wiki/Context-menu-integration

解決VS Code開java檔案時常跳出的小提示

圖片
解決VS Code開java檔案時常跳出的小提示 這個問題其實困擾的我很久,用VS Code開java檔案時常跳出的右下角小提示,如下圖 寫著: 抱歉啟用適用於Java的IntelliCode支援時發生錯誤,如需詳細資料... Java 11 or more recent is required to run the Java extension. 其實只要這樣做 下載 OpenJDK 11的zip檔案, 解開後放到特定目錄 例如我是放到, C:\tools\java-11-openjdk-11.0.8.10-2 (如果是下載用MSI安裝檔還要改安裝設定,直接zip解開就好) 在VS Code的settings.json中設定java.home "java.home" :  "C: \\ tools \\ java-11-openjdk-11.0.8.10-2" , 重開VS Code, 開java檔案就不會再冒出右下角小提示啦! 編譯Java若要其它版本 如果你要在VS Code底下用其他jdk版本編譯, 就還要設定java.configuration.runtimes,像是下面這樣      "java.configuration.runtimes" : [         {            "name" :  "JavaSE-1.8" ,            "path" :  "C: \\ Program Files \\ Java \\ jdk1.8.0_261" ,            "default" :  true         },     ...