为Vue开发配置VS代码

Visual Studio Code是目前世界上最常用的代码编辑器之一。当您成为如此受欢迎的编辑器时，人们会构建出色的插件。这样的插件之一就是一个很棒的工具，可以帮助我们Vue.js开发人员。

Visual Studio Code是目前世界上最常用的代码编辑器之一。像许多软件产品一样，编辑器有一个循环。一旦TextMate被开发人员所喜爱，那就是Sublime Text，现在是VS Code。

受欢迎的有趣之处在于，人们花了很多时间来为他们想象的一切构建插件。

这样的插件之一就是一个很棒的工具，可以帮助我们Vue.js开发人员。

威图

叫做威图，它非常受欢迎，下载量超过300万，您可以找到它在Visual Studio市场上。

Vetur marketplace page

安装Vetur

单击“安装”按钮将在VS Code中触发安装面板：

Install Vetur in VS Code

您也可以在VS Code中打开扩展，然后搜索“ vetur”：

此扩展程序提供什么？

语法高亮

Vetur为所有Vue源代码文件提供语法高亮显示。

如果没有Vetur，VS代码将以这种方式显示.vue文件：

Vue file without Vetur

安装了Vetur时：

Vue file with Vetur

VS Code能够从其扩展名识别文件中包含的代码类型。

使用单个文件组件，您可以在同一个文件中混合使用不同类型的代码，从CSS到JavaScript到HTML。

默认情况下，VS Code无法识别这种情况，Vetur允许为您使用的每种代码提供语法高亮显示。

Vetur可以为以下方面提供支持：

HTML
CSS
JavaScript
哈巴狗
哈姆
SCSS
的CSS
萨斯
触控笔
打字稿

片段

与语法突出显示一样，由于VS Code无法确定.vue文件的一部分中包含的代码类型，因此它无法提供大家都喜欢的代码段：可以添加到文件中的代码段（由专用插件提供）。

Vetur使VS Code能够在单个文件组件中使用您喜欢的代码段。

智能感知

Vetur还通过自动完成功能为每种不同的语言启用了IntelliSense：

Autocomplete

脚手架

除了启用自定义片段外，Vetur还提供了自己的片段集。每个人都使用自己的语言创建一个特定的标签（模板，脚本或样式）：

vue
template with html
template with pug
script with JavaScript
script with TypeScript
style with CSS
style with CSS (scoped)
style with scss
style with scss (scoped)
style with less
style with less (scoped)
style with sass
style with sass (scoped)
style with postcss
style with postcss (scoped)
style with stylus
style with stylus (scoped)

如果您输入vue，您将获得一个用于单个文件组件的入门包：

<template>
</template>
<script>
export default {
}
</script>
<style>
</style>

其他的则是特定的，并创建单个代码块。

注意：（作用域）意味着它仅适用于当前组件

Emmet

Emmet，默认情况下支持流行的HTML / CSS缩写引擎。您可以输入Emmet缩写之一，然后按tabVS Code会自动将其扩展为等效的HTML：

Emmet support

整理和错误检查

Vetur与ESLint，通过VS Code ESLint插件。

ESLint configuration

ESLint at work

代码格式化

Vetur为代码格式化提供自动支持，以便在保存时格式化整个文件（与"editor.formatOnSave"VS代码设置。

您可以通过设置以下选项来选择禁用某些特定语言的自动格式设置：vetur.format.defaultFormatter.XXXXX到none在VS Code设置中。要更改这些设置之一，只需开始搜索字符串，然后在用户设置（右侧面板）中覆盖所需的内容即可。

支持大多数语言更漂亮用于自动格式化的工具已经成为行业标准。

使用您的Prettier配置来确定您的首选项。

免费下载我的Vue手册