如果你要与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的资源管理器访问这些文件。