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

在這篇文章中，我將演示如何配置VS代碼以使用Vue。我將展示如何使用ESLint和Prettier對代碼進(jìn)行l(wèi)int和格式化，以及如何使用Vue的瀏覽器工具來查看Vue應(yīng)用程序中的內(nèi)容。當(dāng)您完成閱讀后，您將擁有一個(gè)可用的開發(fā)環(huán)境，并準(zhǔn)備開始像老板一樣編寫Vue應(yīng)用程序。

我們來吧！

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

安裝和設(shè)置編輯器

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

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

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

添加Vetur擴(kuò)展

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

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

在搜索框中輸入“Vetur”，然后選擇Pine Wu創(chuàng)作的包。然后點(diǎn)擊Install。

在VS代碼中安裝Vetur

一旦安裝了擴(kuò)展程序，點(diǎn)擊重新加載即可激活并開始營業(yè)。

探索Vetur的特色

如果您訪問項(xiàng)目的主頁，您會看到該擴(kuò)展程序?yàn)槟峁┝嗽S多功能：

語法高亮

片段

螞蟻

掉毛/錯(cuò)誤檢查

格式化

自動(dòng)完成

調(diào)試

現(xiàn)在讓我們看看其中的一些。

報(bào)告廣告

注意：許多這些功能僅在您設(shè)置項(xiàng)目時(shí)才有效。這意味著您需要?jiǎng)?chuàng)建一個(gè)文件夾來包含您的Vue文件，使用VS Code打開該文件夾并通過VS Code的資源管理器訪問這些文件。