vue配置代码_配置VS代码以进行Vue开发

vue配置代码

• Vetur

  威图

• Installing Vetur

  安装Vetur

• Syntax highlighting

  语法高亮

• Snippets

  片段

• IntelliSense

  智能感知

• Scaffolding

  脚手架

• Emmet

  Emmet

• Linting and error checking

  整理和错误检查

• Code Formatting

  代码格式化

---

---

Visual Studio Code is one of the most used code editors in the world right now. Editors have, like many software products, a cycle. Once TextMate was the favorite by developers, then it was Sublime Text, now it’s VS Code.

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

The cool thing about being popular is that people dedicate a lot of time to building plugins for everything they imagine.

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

One of such plugins is an awesome tool that can help us Vue.js developers.

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

威图 (Vetur)

It’s called Vetur, it’s hugely popular, with more than 3 million downloads, and you can find it on the Visual Studio Marketplace.

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

安装Vetur (Installing Vetur)

Clicking the Install button will trigger the installation panel in VS Code:

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

You can also open the Extensions in VS Code and search for “vetur”:

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

What does this extension provide?

此扩展程序提供什么？

语法高亮 (Syntax highlighting)

Vetur provides syntax highlighting for all your Vue source code files.

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

Without Vetur, a .vue file will be displayed in this way by VS Code:

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

with Vetur installed:

安装了Vetur时：

VS Code is able to recognize the type of code contained in a file from its extension.

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

Using Single File Component, you mix different types of code inside the same file, from CSS to JavaScript to HTML.

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

VS Code by default cannot recognize this kind of situation, and Vetur allows to provide syntax highlighting for each kind of code you use.

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

Vetur enables support, among the others, for

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

• HTML
  HTML
• CSS
  CSS
• JavaScript
  JavaScript
• Pug
  哈巴狗
• Haml
  哈姆
• SCSS
  SCSS
• PostCSS
  PostCSS
• Sass
  萨斯
• Stylus
  触控笔

• TypeScript

  打字稿

片段 (Snippets)

As with syntax highlighting, since VS Code cannot determine the kind of code contained in a part of a .vue file, it cannot provide the snippets we all love: pieces of code we can add to the file, provided by specialized plugins.

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

Vetur provides VS Code the ability to use your favorite snippets in Single File Components.

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

智能感知 (IntelliSense)

IntelliSense is also enabled bye Vetur, for each different language, with autocomplete:

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

脚手架 (Scaffolding)

In addition to enabling custom snippets, Vetur provides its own set of snippets. Each one creates a specific tag (template, script or style) with its own language:

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

• vue

  vue

• template with html

  template with html

• template with pug

  template with pug

• script with JavaScript

  script with JavaScript

• script with TypeScript

  script with TypeScript

• style with CSS

  style with CSS

• style with CSS (scoped)

  style with CSS (scoped)

• style with scss

  style with scss

• style with scss (scoped)

  style with scss (scoped)

• style with less

  style with less

• style with less (scoped)

  style with less (scoped)

• style with sass

  style with sass

• style with sass (scoped)

  style with sass (scoped)

• style with postcss

  style with postcss

• style with postcss (scoped)

  style with postcss (scoped)

• style with stylus

  style with stylus

• style with stylus (scoped)

  style with stylus (scoped)

If you type vue, you’ll get a starter pack for a single-file component:

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

<template>

</template>

<script>
export default {

}
</script>

<style>

</style>

the others are specific and create a single block of code.

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

Note: (scoped) means that it applies to the current component only

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

Emmet (Emmet)

Emmet, the popular HTML/CSS abbreviations engine, is supported by default. You can type one of the Emmet abbreviations and by pressing tab VS Code will automatically expand it to the HTML equivalent:

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

整理和错误检查 (Linting and error checking)

Vetur integrates with ESLint, through the VS Code ESLint plugin.

Vetur集成了ESLint ，通过VS代码ESLint插件 。

代码格式化 (Code Formatting)

Vetur provides automatic support for code formatting, to format the whole file upon save (in combination with the "editor.formatOnSave" VS Code setting.

Vetur为代码格式化提供自动支持，以在保存时格式化整个文件(与"editor.formatOnSave" VS Code设置结合使用)。

You can choose to disable automatic formatting for some specific language by setting the vetur.format.defaultFormatter.XXXXX to none in the VS Code settings. To change one of those settings, just start searching for the string, and override what you want in the user settings (the right panel).

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

Most of the languages supported use Prettier for automatic formatting, a tool that’s becoming an industry standard.

支持的大多数语言都使用Prettier进行自动格式化，该工具已成为行业标准。

Uses your Prettier configuration to determine your preferences.

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

翻译自: https://flaviocopes.com/vue-vscode/

vue配置代码