為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教程: