如果你要與Vue做大量的工作，從長遠來看，它會花費一些時間來投入一些時間來設置你的編碼環境。強大的編輯器和一些精心挑選的工具將使您的工作效率更高，并最終成為更快樂的開發人員。

在這篇文章中，我將演示如何配置VS代碼以使用Vue。我將展示如何使用ESLint和Prettier對代碼進行lint和格式化，以及如何使用Vue的瀏覽器工具來查看Vue應用程序中的內容。當您完成閱讀后，您將擁有一個可用的開發環境，并準備開始像老板一樣編寫Vue應用程序。

我們來吧！

想從頭開始學習Vue.js？本文是我們的高級庫的摘錄。使用SitePoint Premium獲取涵蓋基礎知識，項目，技巧和工具等的全部Vue書籍。現在加入只需9美元/月。

安裝和設置編輯器

我說我將在本教程中使用VS Code，但我害怕我撒了謊。我實際上將使用VSCodium，它是VS Code的開源分支，沒有Microsoft品牌，遙測和許可。該項目正在積極開發中，我建議您查看一下。

使用哪個編輯器并不重要; 兩者都適用于Linux，Mac和Windows。您可以在此處下載最新版本的VSCodium，或在此處下載最新版本的VSCode，并以正確的方式為您的操作系統安裝。

在本指南的其余部分中，為了保持一致性，我將編輯器稱為VS Code。

添加Vetur擴展

當您啟動編輯器時，您會注意到窗口左側工具欄中的一組五個圖標。如果單擊這些圖標（方形圖標）的底部，將打開一個搜索欄，使您可以搜索VS Code Marketplace。在搜索欄中輸入“vue”，您應該會看到列出的數十個擴展程序，每個擴展程序聲稱會執行略微不同的操作。

根據您的使用情況，您可能會在這里找到適合您的東西。有很多可用的。例如，如果您正在處理涉及TypeScript的Vue項目，則TSLint for Vue可能很方便。現在，我將專注于一個名為Vetur的人。

在搜索框中輸入“Vetur”，然后選擇Pine Wu創作的包。然后點擊Install。

在VS代碼中安裝Vetur

一旦安裝了擴展程序，點擊重新加載即可激活并開始營業。

探索Vetur的特色

如果您訪問項目的主頁，您會看到該擴展程序為您提供了許多功能：

語法高亮

片段

螞蟻

掉毛/錯誤檢查

格式化

自動完成

調試

現在讓我們看看其中的一些。

報告廣告

注意：許多這些功能僅在您設置項目時才有效。這意味著您需要創建一個文件夾來包含您的Vue文件，使用VS Code打開該文件夾并通過VS Code的資源管理器訪問這些文件。