为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”:

Search vetur in extensions

此扩展程序提供什么?

语法高亮

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.XXXXXnone在VS Code设置中。要更改这些设置之一,只需开始搜索字符串,然后在用户设置(右侧面板)中覆盖所需的内容即可。

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

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

免费下载我的Vue手册


更多vue教程: