如何修復 Prettier 在儲存時搞亂你的 HTML

就像其他人一樣,我使用 Prettier 來格式化我的 JS 檔案。 但是,我遇到了一些 Prettier 對我的 HTML 進行格式化的問題,就像下面這樣: 我找到了解決方法,只需將以下內容添加到您的 settings.json 檔案中,讓 VS Code 使用預設的 HTML 格式化工具,而不是 Prettier: { "[html]": { "editor.defaultFormatter": "vscode.html-language-features" } }

如何在 JavaScript 中進行類型檢查而不使用 TypeScript

了解如何在 JavaScript 中添加類型而不使用 TypeScript。 如果你不是住在岩石下,你應該對 TypeScript 有所了解。這是一種由微軟推出的新語言,基本上它是 JavaScript 加上了類型(並編譯成 JavaScript 在瀏覽器中運行)。 雖然我在一些測試專案中使用過 TypeScript,但是我傾向於避免使用 TypeScript 來編寫我的教程,原因有很多。 首先,我主要編寫初學者教程,而 TypeScript 通常不是初學者開始的東西。 另外,我認為如果我開始使用 TypeScript 來編寫文章,就會引起混亂,不知道我在談論什麼。 TypeScript 的愛好者仍然可以參考 JavaScript 教程,因為 JavaScript 可以很好地適應他們的 TypeScript 文件,而反之則不行。 所以,我堅持學習網頁平台的基本知識而不是建立在其之上的技術。 儘管如此… 有時候在 JavaScript 中擁有類型將是有益的。它們是有幫助的。 感謝 Paul Lewis 的這個視頻,我發現我們實際上可以在 JavaScript 中擁有類型,並使用 VS Code 實現! 首先,如果你還沒有安裝 TypeScript,你需要進行安裝: npm install -g typescript 然後在你的項目根目錄中添加一個 tsconfig.json 文件。假設你的 JavaScript 文件在 src 文件夾中,以下是你在該文件中所需的最小配置: { "compilerOptions": { "outFile": "../../built/local/tsc.js", "checkJs": true, "allowJs": true }, "include": [ "src/*" ] } 你可以選擇排除文件夾,例如排除 node_modules 是一個好主意:...

如何在 macOS 設定 GitHub 憑證

設定 GitHub 認證,以便您可以在 VS Code 或命令列中使用它。 我通常使用 GitHub Desktop 應用程式與我的 GitHub 帳戶互動,這是我所有程式碼和網站的 Git 儲存庫。 但有時候您需要使用 git 命令列,或者使用 VS Code 中的 Git 整合功能。 如果沒有進行以下步驟,您可能會遇到認證問題。 讓我們設定它。 我假設您已經安裝了 Homebrew。 請在命令列中執行以下命令: brew install gh 然後使用 gh 工具: gh auth login 之後回答幾個問題。 選擇 HTTPS: 選擇 Y: 接著登入瀏覽器: 點擊 Authorize GitHub: 完成: 回到您的終端機或 VS Code,一切將按預期運作。

如何在 VS Code 中修復 Unknown at rule @tailwindcss (unknownAtRules) 的問題

問題:您在專案中引用 Tailwind,但在 VS Code 中卻收到「Unknown at rule @tailwindcss(unknownAtRules)」的警告訊息: 以下是如何解決此問題的步驟。 打開設定檔,搜尋關鍵字「unknown」,第一個結果應該是您要尋找的:CSS > Lint: Unknown At Rules: 將該選項修改為 ignore(忽略): 完成!

如何在 VS Code 中刪除空白行

最近,我在 VS Code 中需要處理一個文件,其中有很多個空白行,我希望能夠一次性將它們刪除。 我們談的是超過700個空白行,其中夾雜著一些文字,而我不想手動處理這個問題。 作為一名程序員,我寧願花5分鐘的時間讓任務變得更輕鬆,而不是花同樣的時間來做一個讓人煩惱的工作。 我進行了一番搜尋,找到了這個簡單的方法:用\n\n替換成\n。 我在文件中運行了"全部替換",一半的行數被刪除了。所以我又再次運行了它,一次又一次,直到只剩下一個空白行。 更新:\n\n+ 可以一次性替換掉所有行而不需要重複操作。

如何從命令行打開 VS Code

安裝 VS Code 命令行工具的簡單指南 我寫這篇博客文章是因為我正在設置一台新的 Mac,遇到了一些我習以為常的小問題,在首次安裝 VS Code(我最喜歡的編輯器!)時,這些功能並不是默認提供的。 我習慣於在終端中輸入 code 文件夾名稱 來打開 VS Code 中的文件夾。或者 code 文件名 來打開一個文件。 今天,我自動地按照這樣的方式操作,但是卻出現了“命令未找到”的錯誤! 我不得不進入 VS Code,按下 cmd-option-P(或者從菜單中選擇 View -> Command Palette),然後搜索“command”,我找到了以下選項: Shell Command: Install 'code' command in PATH 我按下了回車鍵,現在命令在終端中可以使用了。 開心地進行編程吧!

如何解決tsconfig.json的\"設定檔中找不到任何輸入\"錯誤

我的幾位學生在Astro專案中遇到了這個問題。 預設情況下,Astro會包含一個tsconfig.json檔案,這個檔案在VS Code中給他們帶來了一個錯誤。 該錯誤來自於tsconfig.json,並顯示以下訊息: 設定檔中找不到任何輸入 我們並沒有使用TypeScript,所以這是一個奇怪的問題。 以下是一些可能的解決方法: 首先,嘗試重新啟動VS Code。 如果這樣不行,請在tsconfig.json檔案相同的資料夾中添加一個空的file.ts檔案。 或者刪除tsconfig.json。 除非您計劃使用TypeScript,否則您可以配置它以指向您專案中的TypeScript檔案,方法如下: 從: { "compilerOptions": { "moduleResolution": "node" } } 修改為: { "compilerOptions": { "moduleResolution": "node" }, "include": [ "./src/\*\*/\*.ts" ] }

為 Vue 開發配置 VS Code

VS Code 是目前使用最廣泛的程式碼編輯器之一。當你成為這麼受歡迎的編輯器時,人們會開發出很多好用的插件。其中一個很棒的插件是可以幫助 Vue.js 開發者的工具。 Vetur 安裝 Vetur 語法高亮 程式碼片段 智能提示 腳手架 Emmet 程式碼檢查 程式碼格式化 VS Code 是目前使用最廣泛的程式碼編輯器之一。編輯器(editor)如同許多軟體產品一樣,都有不同的周期。曾經有一段時間開發人員最愛的是 TextMate,然後是 Sublime Text,現在則是 VS Code。 能夠成為受歡迎的編輯器最棒的地方之一就是人們會花許多時間開發各種插件。 其中一個很棒的插件是可以幫助 Vue.js 開發者的工具。 Vetur 這個插件叫做 Vetur,非常受歡迎,下載量超過 300 萬,你可以在 Visual Studio Marketplace 上找到它。 安裝 Vetur 點擊安裝按鈕會觸發 VS Code 的安裝面板: 你也可以在 VS Code 的擴展面板中搜索 “vetur”: 這個擴展提供了什麼功能? 語法高亮 Vetur 為所有的 Vue 源代碼文件提供了語法高亮功能。 沒有安裝 Vetur 時,VS Code 會以以下方式顯示 .vue 文件: 安裝了 Vetur 後: VS Code 能夠根據文件的擴展名識別出文件中包含的程式碼類型。 在使用單文件元件(Single File Component)時,你可以將不同類型的程式碼混在同一個文件中,包括 CSS、JavaScript 和 HTML。...

運行 Python 程式

如何運行用 Python 編寫的程式 有幾種不同的方法可以運行 Python 程式。 特別是,您可以選擇使用互動提示,這裡您可以輸入 Python 程式碼並立即執行,或者將 Python 程式保存到檔案中並執行該檔案。 讓我們從互動提示開始。 如果您打開終端並輸入 python,您將看到如下的畫面: 這是 Python REPL (Read-Evaluate-Print-Loop)。 請注意 >>> 符號以及之後的光標。您可以在這裡鍵入任何的 Python 程式碼,然後按下 enter 鍵來執行它。 例如,試著使用以下程式碼定義一個新的變數: name = "Flavio" 然後使用 print() 函數來打印其值: print(name) 注意:在 REPL 中,您也可以只輸入 name,然後按下 enter 鍵,您將獲得其值。但在程式中,如果您這樣做,將不會看到任何輸出 - 您需要使用 print() 函數。 您在這裡編寫的任何 Python 程式碼都會立即執行。 輸入 quit() 以退出這個 Python REPL。 您可以使用 Python 自動安裝的 IDLE 應用程序來訪問相同的互動提示: 這可能對您來說更方便,因為您可以通過滑鼠更輕鬆地移動和複製/粘貼。 上述是 Python 默認提供的基本功能。然而,我建議安裝 IPython,這可能是您能找到的最好的命令行 REPL 應用程序。 使用以下命令安裝 IPython: pip install ipython 確保 pip 的執行檔位於您的路徑中,然後運行 ipython:...

配置 VS Code

如何從零配置 VS Code,使其成為完美的 JavaScript 開發工具 最近我買了一台新的 Mac(MacBook Air),需要安裝全新的 VS Code,所以我花了點時間記錄下來,把我的編碼體驗與使用的舊 MacBook Pro 相同,該筆記本已經使用了長達 9 年的時間。 還可以查看我的 VS Code 介紹 文章 以下是我所做的事情: 我安裝了 Fira Code 並將其設置為我的字體 我將制表符大小設置為2(這是我的習慣)。空格。2個空格。 我將 **/node_modules 添加到排除文件列表中,以防止它們顯示在文件列表中 我啟用了“粘貼時格式化”和“保存時格式化”功能 啟用了字體連接功能 停用了縮略圖功能 啟用了“修剪末尾空格”功能 我安裝了 Sublime Text 按鍵映射插件。這對於顯示/隱藏側邊欄,關閉文件等提供了快捷鍵,例如 cmd-K cmd-B。 接下來,我安裝了一些主題。這取決於你的個人喜好。我喜歡在以下主題之間切換: Palenight 主題 Nostromo Night Owl Ayu 然後我安裝了以下擴展: Prettier IntelliSense for CSS class names Intent 4-to-2 ESLint Duplicate action Bracket Pair Colorizer 2 Babel ES6/ES7 ES7 React/Redux/GraphQL/React-Native snippets TODO Highlight 這是開始使用 JavaScript 和 React 的好套件集合。...