用vscode开发vue应用程序的方法和步骤

目前，用VSCode开发Vue.js应用程序几乎是前端的标准，但很多时候，我们看到的代码是混乱的。作为一个前端工程师，单引号和双引号的使用不分青红皂白，一段用分号，一段用分号，有的地方用逗号，有的地方用逗号，空格和回车都是错的，这不是开玩笑。

今天，我们从一开始就讲一个完整的故事，讲一个有严重代码洁癖的病人应该如何用vscode开发vue，如何把一个有上万个格式错误已经可以判死刑的项目变成一个标准的美女。

从安装开始

为了准确起见，我们禁用vscode中的所有插件，并清空用户设置，以尽可能将其恢复到原始外观：

作为代码清洁患者，系统的版本要求肯定是最苛刻的。无论何时，让我们升级所有可以升级到最高版本的系统：

然后，我们开始创建项目：

Vue在这里创建hello-world，你必须选择第一项：babel eslint，这两项是必不可少的。我看到有些人觉得eslint麻烦，项目建立后居然手动关闭eslint，很无语。

已完成安装：

我们不要急于执行它，这是执行代码最简单的事情，让我们先打开代码看看：

嗯，至少我们需要先安装vetur插件。这几乎肯定是开发vue项目的标准。就算我不说，vscode也会强烈推荐你安装。

穿上兽医服后有点像人类。接下来，我们来试试是否可以自动格式化。这部分是洁癖患者的最爱。随意加几个空格，然后保存起来试试：

无法格式化，甚至没有提示！

用棉绒格式化

即使vscode中的vetur不能帮助我们自动格式化，package.json命令中也有一个lint命令。让我们看看lint命令能否帮助我们自动格式化：

林特说没有错！显然，这是一个有很多空格的错误。好吧，为什么？

这是因为默认的vue-cli没有为我们安装@ vue/pretier插件。让我们先手动安装它：

yarnad-d @ vue/eslint-config-pretier，然后添加：

扩展' :[' plugin : vue/essential '，' eslint 3360推荐'，' @ vue/pretier']，尤其是最后一个@ vue/pretier，非常重要。然后执行纱线除绒。多余的空间被自动杀死，但我们发现有些地方也被篡改了：

所有单引号都改成双引号，不在原行末尾的分号加分号。这是为什么？因为我们已经引入了更漂亮的，但是我们还没有设置它，所以我们在项目的根目录中创建了一个. prettierrc.js文件，然后添加：

模块。exports={semi: false，singlequote: true}再次执行纱线掉毛，现在我们可以看到掉毛可以工作了。它不仅可以删除我们插入的多余空格，还可以将双引号改为单引号，并根据规则删除行尾多余的分号。当然，行尾不加额外标记是一个哲学命题，可以根据个人喜好自行决定。在这里，我们有权遵循vue-cli的标准。

这一点至关重要。假设你得到一个糟糕的vue项目，这个项目已经不再糟糕了。有几千个。vue文件和成千上万的各种格式错误，所有这些都可以通过纱线皮棉的命令来纠正！

vscode中的格式

事情还没完。我们注意到，虽然纱线lint命令可以帮助我们在编写代码后格式化代码，但由于我们是用vscode开发的，我们当然希望直接在vscode中看到错误标记。

此时，我们需要在vscode中安装另一个插件eslint。

你认为安装eslint插件就够了吗？没用的。因为埃斯林不知道我们的。vue文件包含js语法，我们需要打开我们的vscode设置文件。

注意：这个一定要在项目设置中设置，不能只在你自己的个人设置中设置，否则你团队的朋友会随意更改并去掉。正确的方法是在项目的文件夹下有一个. vscode文件夹。vue最讨厌的是它居然把这个文件夹放进去了。gitignore。你必须改正这个错误，即删除。中的vscode。gitignore文件。停。将以下代码添加到项目的settings.json文件中：

{ ' eslint . autofixonssave ' : true，' eslint . validate ' :[' JavaScript '，' javascriptreact '，{ 'language': 'vue '，' autoFix': true } ]，}此时，所有错误都被标记出来。注意左侧。确保settings.json文件是绿色的，而不是灰色的。如果是灰色的，请检查你的。gitignore文件：

因为我们在settings.json文件中设置了autoFixOnSave，不管格式有多乱，只要按Ctrl S保存，它就会自动帮我们整理代码格式。方便吗？

与漂亮的冲突

有时候我们的vscode里面安装了很多插件，比如安装了pretier插件，因为我们开发的不仅仅是vue项目，还有其他类型的js项目，尤其是传统的js项目，需要用pretier来美化，而pretier的一些功能会和eslint产生冲突。例如，如果我们将formatOnSave设置为全局更漂亮，这个函数将与eslint的autoFixOnSave进行斗争。为了避免这个矛盾，我们通常会在这个项目的settings.json文件中多添加几个选项，类似于这样：

编辑。tabsize' : 2 '，编辑器。formatonsave' : false，' pretier。semi' : false，pretier。单引号' : true有了这些设置，基本上pretier不会与eslint对抗。

摘要

以上是用vscode开发vue程序的标准，没有网上一些文章说的那么简单，仅靠一个eslint是解决不了的。这里还使用了vetur、eslint和Beatle，通过综合使用几种工具，可以真正达到随时看到自己的错误，保存并自动修改，纠正过去错误的目的。希望每个前端工程师写的代码都像一只手一样漂亮、简洁、干净。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。