"editor.tabSize": 2,//設(shè)置Tab鍵兩空格
"emmet.includeLanguages": {//為HTML和JavaScript啟用了emmet
 "html": "html",
 "javascript": "javascriptreact"
},
"workbench.iconTheme": "material-icon-theme",
"files.autoSave": "afterDelay",//設(shè)置延時保存，防止意外丟失
"files.autoSaveDelay": 5000,//自動保存的延時時間
"editor.wordWrap": "on",
"editor.formatOnSave": true,//保存自動格式化
"editor.formatOnPaste": true,//粘貼自動格式化

"prettier.jsxSingleQuote": true,
"prettier.printWidth": 100,
"prettier.semi": false,
"prettier.useTabs": true,
"prettier.tabWidth": 2,

載說明：原創(chuàng)不易，未經(jīng)授權(quán)，謝絕任何形式的轉(zhuǎn)載

當今前端開發(fā)中，使用 Visual Studio Code（VSCode）編輯器是一個普遍的選擇，因為它具有強大的功能和擴展性。為了幫助前端開發(fā)者更好地使用 VSCode，本文將介紹12個實用的 VSCode 插件。這些插件提供了許多便利的功能，可以幫助開發(fā)者提高效率和代碼質(zhì)量。

1、Black Box

Blackbox 是一款強大的 VSCode 擴展，可以幫助開發(fā)人員更快、更準確地編寫代碼。它包含四個主要功能：代碼自動補全、倉庫搜索、代碼搜索和 Jupyter Lab & Notebooks。通過代碼自動補全，開發(fā)人員可以獲得超過20種編程語言的代碼建議，包括 Python、JavaScript、TypeScript、Go 和 Ruby，只需按 Enter 鍵即可。為了獲得更好的準確性，建議在您要構(gòu)建的函數(shù)上添加良好的注釋。

Blackbox 倉庫搜索允許開發(fā)人員搜索不同語言的超過1億個倉庫文件，包括 Python、JavaScript、TypeScript、Java 等。這個功能直接集成在 VSCode 中，因此開發(fā)人員不需要離開他們的 IDE 在線搜索特定的倉庫。

Blackbox 代碼搜索幫助開發(fā)人員找到最佳的代碼片段，在構(gòu)建出色的產(chǎn)品時使用。只需幾個簡單的步驟，開發(fā)人員就可以獲取超過20種編程語言的代碼片段，包括 Python、Java、C 和 C++、C#、JavaScript、SQL、PHP、Go、TypeScript、Kotlin、MATLAB、R、Swift、Rust、Ruby、Dart 和 Scala。

最后，Blackbox 還提供了對 Jupyter Lab & Notebooks 的支持，允許開發(fā)人員和數(shù)據(jù)科學家在構(gòu)建出色的產(chǎn)品時找到最佳的代碼片段。通過 Blackbox Chrome 擴展，開發(fā)人員可以在行首使用注釋符號并編寫問題，以立即獲得代碼建議。總的來說，Blackbox 是任何想要像想法一樣快速編寫代碼的開發(fā)人員必備的擴展。

https://marketplace.visualstudio.com/items?itemName=Blackboxapp.blackbox

2、Live Server

"Live Server"，是一個用于 VSCode 的開發(fā)工具。它可以讓你在開發(fā)過程中實時預覽網(wǎng)頁，并且在保存代碼時自動刷新頁面。

使用 Live Server 插件，你可以在 VSCode 中打開 HTML、CSS、JavaScript 文件，并通過點擊工具欄上的“Go Live”按鈕，啟動一個本地服務(wù)器來預覽網(wǎng)頁。每當你保存代碼時，服務(wù)器會自動刷新頁面，以便你可以立即查看修改后的效果。

此外，Live Server 還提供了一些實用的功能，如支持多種瀏覽器、支持自定義端口、支持 SSL、支持代理等。開發(fā)者可以根據(jù)自己的需要進行配置，以獲得最佳的開發(fā)體驗。

總的來說，Live Server 是一個非常實用的 VSCode 插件，它可以幫助開發(fā)者更快速、更高效地預覽和調(diào)試網(wǎng)頁。與傳統(tǒng)的瀏覽器刷新相比，Live Server 的實時刷新功能可以大大提高開發(fā)效率，同時還可以減少開發(fā)者在切換瀏覽器和編輯器之間的時間浪費。

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

3、JavaScript Code Snippets

JavaScript Code Snippets 是一個 VSCode 插件，它提供了大量的 JavaScript 代碼片段，可以幫助開發(fā)者更快速、更高效地編寫代碼。

該插件包含了許多常用的 JavaScript 代碼片段，如創(chuàng)建函數(shù)、循環(huán)、條件語句等等。使用者只需要輸入相應(yīng)的快捷指令或者使用自動完成功能，即可快速插入代碼片段。

此外，JavaScript Code Snippets 還支持自定義代碼片段，你可以根據(jù)自己的需要添加或修改代碼片段。這些自定義代碼片段可以幫助你快速實現(xiàn)一些常見的代碼邏輯，從而減少手動敲代碼的時間和錯誤。

總之，JavaScript Code Snippets 是一個非常實用的 VSCode 插件，它可以幫助開發(fā)者更快速、更高效地編寫 JavaScript 代碼，從而提高開發(fā)效率。同時，它還支持自定義代碼片段，可以根據(jù)自己的需求進行定制，讓開發(fā)變得更加方便和靈活。

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

4、TODO Highlight

TODO Highlight 是一個 VSCode 插件，它可以幫助開發(fā)者更好地管理和追蹤代碼中的 TODO 、FIXME 和其他注釋。

當你在代碼中添加 TODO 注釋時，TODO Highlight 會自動將其高亮顯示，并在右側(cè)的“Problems”窗格中生成一個任務(wù)列表。你可以單擊任務(wù)列表中的任何一項，以快速跳轉(zhuǎn)到相應(yīng)的注釋位置。此外，TODO Highlight 還支持自定義注釋關(guān)鍵詞和顏色，可以根據(jù)自己的需求進行定制。

使用 TODO Highlight 插件可以幫助開發(fā)者更好地組織代碼和任務(wù)，從而提高開發(fā)效率。當你遇到一些需要處理的問題時，只需要在代碼中添加注釋，TODO Highlight 就會自動將其列入任務(wù)列表，并提示你需要處理的任務(wù)。在任務(wù)處理完成后，你可以將注釋從代碼中刪除，同時也會從任務(wù)列表中移除。

總之，TODO Highlight 是一個非常實用的 VSCode 插件，它可以幫助開發(fā)者更好地管理和追蹤代碼中的 TODO、FIXME 等注釋，從而提高開發(fā)效率。同時，它還支持自定義注釋關(guān)鍵詞和顏色，可以根據(jù)自己的需求進行定制，讓開發(fā)變得更加靈活和方便。

https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

5、Code Spell Checker

Code Spell Checker 是一個 VSCode 插件，它可以幫助開發(fā)者檢查代碼中的拼寫錯誤。

該插件可以自動掃描代碼中的單詞，檢查其是否存在拼寫錯誤，并在代碼編輯器中進行標注。在發(fā)現(xiàn)拼寫錯誤時，Code Spell Checker 會在右下角的狀態(tài)欄中顯示錯誤數(shù)量，并且可以通過快捷鍵或者右鍵菜單來修正錯誤。

Code Spell Checker 還支持自定義字典和忽略列表，可以根據(jù)自己的需求進行定制。你可以將常用的單詞添加到字典中，或者將不需要檢查的單詞添加到忽略列表中。

使用 Code Spell Checker 插件可以幫助開發(fā)者更好地管理代碼中的拼寫錯誤，從而提高代碼質(zhì)量和可讀性。在代碼編輯過程中，Code Spell Checker 可以及時發(fā)現(xiàn)拼寫錯誤，并提供修正建議，讓開發(fā)變得更加輕松和高效。

總之，Code Spell Checker 是一個非常實用的 VSCode 插件，它可以幫助開發(fā)者檢查代碼中的拼寫錯誤，并提供修正建議。同時，它還支持自定義字典和忽略列表，可以根據(jù)自己的需求進行定制，讓開發(fā)變得更加靈活和方便。

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

6、Better Comments

Better Comments 是一個 VSCode 插件，它可以幫助開發(fā)者以不同的顏色和樣式突出顯示代碼中的注釋，從而更好地理解和管理代碼。

該插件支持多種注釋樣式，例如： !TODO, ?QUESTION, //HIGHLIGHT, *IMPORTANT 等等。每種注釋樣式都有對應(yīng)的顏色和樣式，可以根據(jù)需求進行選擇和定制。

Better Comments 還支持代碼折疊，可以折疊所有注釋或者只折疊特定樣式的注釋。這樣可以使代碼更加簡潔、易讀。

通過 Better Comments 插件，開發(fā)者可以更加清晰地理解代碼中的注釋內(nèi)容，更好地進行開發(fā)和維護。在代碼編輯過程中，Better Comments 可以幫助開發(fā)者更好地組織和管理注釋，提高代碼的可讀性和可維護性。

總之，Better Comments 是一個非常實用的 VSCode 插件，它可以幫助開發(fā)者以不同的顏色和樣式突出顯示代碼中的注釋，更好地理解和管理代碼。同時，它還支持代碼折疊，可以使代碼更加簡潔、易讀，提高代碼的可讀性和可維護性。

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

7、Bookmarks

Bookmarks 是一個 VSCode 插件，它可以幫助開發(fā)者在代碼中添加和管理書簽，快速跳轉(zhuǎn)到關(guān)鍵代碼行，提高開發(fā)效率。

通過 Bookmarks 插件，開發(fā)者可以很容易地添加書簽到代碼中。在代碼中添加書簽后，可以通過快捷鍵或者插件提供的側(cè)邊欄來查看、管理書簽。同時，該插件還支持在多個文件中添加書簽，方便跨文件快速定位關(guān)鍵代碼。

另外，Bookmarks 還支持多種自定義設(shè)置。開發(fā)者可以根據(jù)自己的需求來定制書簽樣式、快捷鍵和側(cè)邊欄位置等等。

總之，Bookmarks 是一個非常實用的 VSCode 插件，它可以幫助開發(fā)者在代碼中添加和管理書簽，快速跳轉(zhuǎn)到關(guān)鍵代碼行，提高開發(fā)效率。同時，該插件還支持多種自定義設(shè)置，可以根據(jù)個人需求進行定制。

https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks

8、Auto Rename Tag

Auto Rename Tag 是一個 VSCode 插件，它可以幫助開發(fā)者在編輯 HTML 和 XML 文件時自動重命名標簽，提高開發(fā)效率。

通過 Auto Rename Tag 插件，當開發(fā)者在編輯 HTML 或 XML 文件時修改一個標簽的開始或結(jié)束標記時，它會自動重命名對應(yīng)的結(jié)束或開始標記。這意味著開發(fā)者可以在不手動更改標記的情況下，快速修改標記名稱，提高開發(fā)效率。

該插件還支持多種自定義設(shè)置，包括在哪些文件類型中啟用自動重命名標簽、設(shè)置觸發(fā)器字符等等。開發(fā)者可以根據(jù)自己的需求來定制 Auto Rename Tag 的行為。

總之，Auto Rename Tag 是一個非常實用的 VSCode 插件，它可以幫助開發(fā)者在編輯 HTML 和 XML 文件時自動重命名標簽，提高開發(fā)效率。同時，該插件還支持多種自定義設(shè)置，可以根據(jù)個人需求進行定制。

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

9、GitLens

GitLens 是一個非常實用的 VSCode 插件，它可以幫助開發(fā)者更方便地管理和查看 Git 倉庫。

通過 GitLens 插件，開發(fā)者可以輕松查看 Git 倉庫中的提交歷史記錄、分支、標簽、文件修改記錄等等。同時，該插件還支持注釋、比較、撤銷、重做等 Git 操作，可以幫助開發(fā)者更方便地管理代碼。

此外，GitLens 還提供了一些非常實用的功能。例如，它可以在編輯器中顯示代碼作者、最后一次修改時間等信息，還可以通過命令面板直接跳轉(zhuǎn)到指定的提交、分支、標簽等。此外，該插件還支持和多種第三方服務(wù)集成，例如 GitHub、GitLab、Bitbucket 等等。

總之，GitLens 是一個非常實用的 VSCode 插件，它可以幫助開發(fā)者更方便地管理和查看 Git 倉庫。該插件支持多種 Git 操作，提供了一些非常實用的功能，并且支持和多種第三方服務(wù)集成。使用 GitLens 可以幫助開發(fā)者更加高效地進行代碼開發(fā)和管理。

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

10、Git History

Git History 是一款 VSCode 插件，它提供了一個直觀的用戶界面來顯示 Git 倉庫的提交歷史，方便開發(fā)者查看和管理代碼的版本歷史。

使用 Git History 插件，開發(fā)者可以輕松地查看 Git 倉庫中的提交歷史，并且可以方便地比較不同版本之間的代碼差異。此外，該插件還支持搜索和過濾功能，可以幫助開發(fā)者快速定位特定的提交記錄和文件。

該插件還提供了許多有用的功能，例如可以顯示每個提交的作者、提交日期、提交消息等信息，并且可以在提交歷史中進行復制和粘貼等操作。同時，該插件還支持多種 Git 倉庫，包括本地倉庫、GitHub、Bitbucket、GitLab 等。

總之，Git History 是一款非常實用的 VSCode 插件，它可以幫助開發(fā)者更加直觀地查看和管理 Git 倉庫的提交歷史，提高了代碼版本管理的效率和準確性。

https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

11、Bracket Pair Colorizer

Bracket Pair Colorizer 是一個非常實用的 VSCode 插件，它可以為代碼中的括號、花括號、方括號等符號添加不同的顏色，以便更好地區(qū)分和識別不同的代碼塊。

使用 Bracket Pair Colorizer 插件，開發(fā)者可以在編輯器中清晰地看到匹配的括號或其他符號，以便更好地理解代碼結(jié)構(gòu)和邏輯。該插件支持自定義顏色，開發(fā)者可以根據(jù)自己的喜好和需求進行設(shè)置。

此外，Bracket Pair Colorizer 還提供了一些實用的功能，例如可以配置不同類型的括號、花括號、方括號等符號，也可以在配置文件中排除一些不需要匹配的符號等等。

總之，Bracket Pair Colorizer 是一個非常實用的 VSCode 插件，它可以幫助開發(fā)者更好地理解和閱讀代碼。使用該插件，開發(fā)者可以清晰地看到匹配的括號或其他符號，以便更好地理解代碼結(jié)構(gòu)和邏輯。同時，該插件還提供了一些實用的功能，可以根據(jù)自己的需求進行設(shè)置和配置。

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

12、Colorize

Colorize 是一款 VSCode 插件，它可以自動將 CSS 和 Sass/Less/SCSS 文件中的顏色值高亮顯示，讓開發(fā)者更加直觀地了解代碼中使用的顏色。

該插件支持多種顏色格式，包括 HEX、RGB、RGBA、HSL、HSLA 等，可以根據(jù)開發(fā)者的喜好和需求進行自定義設(shè)置。此外，Colorize 還支持在編輯器中快速替換顏色，可以幫助開發(fā)者更加高效地編輯代碼。

使用 Colorize 插件可以使開發(fā)者更容易地區(qū)分和識別代碼中的顏色，從而更加方便地進行樣式的調(diào)整和修改。同時，該插件還支持自定義顏色格式和顏色映射，可以根據(jù)開發(fā)者的需求進行設(shè)置和調(diào)整。

總之，Colorize 是一款非常實用的 VSCode 插件，它可以幫助開發(fā)者更加直觀地了解 CSS 和 Sass/Less/SCSS 文件中的顏色值，并且支持快速替換顏色，提高了開發(fā)效率。同時，該插件還支持自定義設(shè)置，可以根據(jù)開發(fā)者的需求進行調(diào)整和優(yōu)化。

https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize

結(jié)束

總之，這些 VSCode 插件為前端開發(fā)者提供了許多實用的功能和工具，可以幫助開發(fā)者更加高效地編寫代碼，提高代碼質(zhì)量和可讀性。當然，這里只介紹了12個插件，實際上 VSCode 還有很多其他優(yōu)秀的插件，大家可以根據(jù)自己的需求進一步探索。希望這篇文章能對前端開發(fā)者提供一些參考和幫助，讓大家的開發(fā)過程更加愉快和高效。

今天的分享就到這里，希望對你有所幫助，感謝你的閱讀，文章創(chuàng)作不易，如果你喜歡我的分享，別忘了點贊轉(zhuǎn)發(fā)，讓更多有需要的人看到，最后別忘記關(guān)注「前端達人」，你的支持將是我分享最大的動力，后續(xù)我會持續(xù)輸出更多內(nèi)容，敬請期待。

1. 地部署大模型的原因

在本地部署大模型主要有以下幾個重要原因：

數(shù)據(jù)隱私和安全性：

• 企業(yè)或組織的敏感數(shù)據(jù)在本地部署中能得到更好的保護，降低數(shù)據(jù)泄露的風險。例如金融機構(gòu)的客戶交易數(shù)據(jù)、醫(yī)療行業(yè)的患者信息等，這些數(shù)據(jù)如果上傳到云端可能會引發(fā)嚴重的隱私問題。
• 避免了數(shù)據(jù)在傳輸過程中被竊取或篡改的可能性，確保數(shù)據(jù)的完整性和機密性。

低延遲和高性能：

• 本地部署可以減少數(shù)據(jù)傳輸?shù)难舆t，特別是對于對實時性要求較高的應(yīng)用，如工業(yè)自動化中的實時控制、自動駕駛中的決策等。
• 能夠充分利用本地的硬件資源，實現(xiàn)更高的性能和更快的響應(yīng)速度。

定制化和靈活性：

• 可以根據(jù)本地的特定需求和業(yè)務(wù)流程進行定制化的開發(fā)和優(yōu)化。比如，對模型的結(jié)構(gòu)、參數(shù)進行調(diào)整，以適應(yīng)特定的行業(yè)場景。
• 便于與本地現(xiàn)有的系統(tǒng)和基礎(chǔ)設(shè)施進行集成，無需受到云服務(wù)提供商的限制和約束。

自主控制和穩(wěn)定性：

• 企業(yè)對模型的運行和維護擁有完全的自主控制權(quán)，能夠及時處理可能出現(xiàn)的問題。
• 不受云服務(wù)提供商的服務(wù)中斷、網(wǎng)絡(luò)故障等外部因素的影響，保障業(yè)務(wù)的持續(xù)穩(wěn)定運行。

合規(guī)要求：

• 某些行業(yè)受到嚴格的法規(guī)監(jiān)管，要求數(shù)據(jù)和模型必須在本地存儲和處理，以滿足合規(guī)性。比如，國防、軍工等領(lǐng)域。

總之，本地部署大模型為企業(yè)和組織提供了更多的數(shù)據(jù)主權(quán)、性能優(yōu)化、定制靈活性以及合規(guī)保障，使其能夠更好地滿足自身業(yè)務(wù)的獨特需求和安全要求。

2. VS Code代碼編輯器

Visual Studio Code（簡稱 VSCode）是一款由微軟開發(fā)的免費、開源且跨平臺的代碼編輯器。

它具有眾多優(yōu)點：

強大的功能：

• 支持多種編程語言，通過安裝相應(yīng)的擴展可以獲得豐富的語法高亮、智能代碼補全、代碼格式化等功能。
• 內(nèi)置了調(diào)試工具，方便開發(fā)者對代碼進行調(diào)試。

優(yōu)秀的擴展生態(tài)：

• 擁有海量的擴展插件，涵蓋了從前端開發(fā)到后端開發(fā)，從數(shù)據(jù)庫管理到版本控制等各個領(lǐng)域。例如，用于 JavaScript 和 TypeScript 開發(fā)的 ESLint 插件，用于 Python 開發(fā)的 Python 插件等。

界面友好：

• 提供了簡潔清晰的用戶界面，可根據(jù)個人喜好進行主題和布局的定制。

版本控制集成：

• 與 Git 等版本控制系統(tǒng)緊密集成，方便查看代碼的更改、提交代碼等操作。

跨平臺支持：

• 可以在 Windows、Mac 和 Linux 等操作系統(tǒng)上運行，方便開發(fā)者在不同的環(huán)境中工作。

總之，VSCode 因其功能強大、易于使用和高度可擴展性，成為了眾多開發(fā)者的首選代碼編輯器。

例如，一位前端開發(fā)者可以在 VSCode 中安裝 HTML CSS Support、JavaScript (ES6) code snippets 等插件來提高開發(fā)效率；一位 Python 開發(fā)者可以安裝 Python 插件，并利用其提供的代碼檢查和調(diào)試功能來優(yōu)化代碼質(zhì)量。

3. Continue插件

Continue 是領(lǐng)先的開源 AI 代碼助手。您可以連接任何模型和任何上下文，在 Visual Studio Code 和 JetBrains 內(nèi)部構(gòu)建自定義的自動補全和聊天體驗。

開源地址

https://github.com/continuedev/continue

安裝Continue插件

在擴展中，搜索“continue”，如上圖所示的擴展，點擊“安裝”。

安裝成功后，在“擴展”按鈕的下方，會出現(xiàn)一個“Continue"的按鈕，點擊后，出現(xiàn)如下界面。

左下角出現(xiàn)一個選項欄。點擊”+”號后，上方出現(xiàn)滾動欄，向下滑動，可以看到“ollama”選項。

點擊“ollama”選項，出現(xiàn)如下圖界面。

安裝ollama

ollama的安裝教程：

https://www.toutiao.com/article/7371308422433669658/

啟動ollama

此時需要我們啟動本地安裝好的ollama。

啟動成功后，在托盤區(qū)域，會出現(xiàn)如下圖所示的ollama圖標：

continue關(guān)聯(lián)ollama

點擊如下圖所示的“Autodetect”

關(guān)聯(lián)成功后，在左下角的選項菜單中，會顯示出ollama中下載和安裝好的大模型，如下圖所示：

選擇一個大模型，如通義千問的“qwen2:7b”模型。

測試是否安裝成功

在左上角的輸入框中輸入“請介紹一下你自己”，并回車。如下圖所示：

等待幾秒鐘后，出現(xiàn)答案，說明此時continue已經(jīng)和ollama關(guān)聯(lián)成功。根據(jù)需要可以切換任意ollama中安裝的模型。

測試問題“寫一個html頁面”，如下圖所示，很快給出一段代碼。

點擊如下圖所示的“apply”按鈕，代碼會自動填寫到右側(cè)的文件test.html中。

網(wǎng)頁效果如下圖所示：

如果不想安裝dockers部署webui，在VScode中用continue進行問答，也是一個替代方法。