/

為 Vue 開發配置 VS Code

為 Vue 開發配置 VS Code

VS Code 是目前使用最廣泛的程式碼編輯器之一。當你成為這麼受歡迎的編輯器時，人們會開發出很多好用的插件。其中一個很棒的插件是可以幫助 Vue.js 開發者的工具。

VS Code 是目前使用最廣泛的程式碼編輯器之一。編輯器（editor）如同許多軟體產品一樣，都有不同的周期。曾經有一段時間開發人員最愛的是 TextMate，然後是 Sublime Text，現在則是 VS Code。

能夠成為受歡迎的編輯器最棒的地方之一就是人們會花許多時間開發各種插件。

其中一個很棒的插件是可以幫助 Vue.js 開發者的工具。

Vetur

這個插件叫做 Vetur，非常受歡迎，下載量超過 300 萬，你可以在 Visual Studio Marketplace 上找到它。

Vetur 市集頁面

安裝 Vetur

點擊安裝按鈕會觸發 VS Code 的安裝面板：

在 VS Code 安裝 Vetur

你也可以在 VS Code 的擴展面板中搜索 “vetur”：

在擴展中搜索 vetur

這個擴展提供了什麼功能？

語法高亮

Vetur 為所有的 Vue 源代碼文件提供了語法高亮功能。

沒有安裝 Vetur 時，VS Code 會以以下方式顯示 .vue 文件：

沒有 Vetur 的 Vue 文件

安裝了 Vetur 後：

有 Vetur 的 Vue 文件

VS Code 能夠根據文件的擴展名識別出文件中包含的程式碼類型。

在使用單文件元件（Single File Component）時，你可以將不同類型的程式碼混在同一個文件中，包括 CSS、JavaScript 和 HTML。

VS Code 默認無法識別這種情況，而 Vetur 則允許對每種程式碼類型提供語法高亮。

Vetur 支援的語言包括：

  • HTML
  • CSS
  • JavaScript
  • Pug
  • Haml
  • SCSS
  • PostCSS
  • Sass
  • Stylus
  • TypeScript

程式碼片段

與語法高亮一樣，由於 VS Code 無法判斷 .vue 文件中的程式碼類型，因此無法提供我們所喜愛的程式碼片段：也就是由專門的插件提供的可以添加到文件中的程式碼片段。

Vetur 允許 VS Code 使用你最喜愛的程式碼片段在單文件元件中使用。

智能提示

Vetur 還支援智能提示功能，對於每種不同的語言，都可以提供自動完成：

智能提示

腳手架

除了啟用自定義的程式碼片段外，Vetur 還提供了自己的一組程式碼片段。每個片段都會創建一個特定的標籤（模板、腳本或樣式），並附帶其自己的語言。

  • vue
  • 帶有 HTML 的模板
  • 帶有 Pug 的模板
  • 帶有 JavaScript 的腳本
  • 帶有 TypeScript 的腳本
  • 帶有 CSS 的樣式
  • 帶有 CSS 的樣式（有作用域）
  • 帶有 SCSS 的樣式
  • 帶有 SCSS 的樣式（有作用域）
  • 帶有 LESS 的樣式
  • 帶有 LESS 的樣式（有作用域）
  • 帶有 Sass 的樣式
  • 帶有 Sass 的樣式（有作用域）
  • 帶有 PostCSS 的樣式
  • 帶有 PostCSS 的樣式（有作用域）
  • 帶有 Stylus 的樣式
  • 帶有 Stylus 的樣式（有作用域）

如果你輸入 vue，就會得到一個單文件元件的起始模板：

1
2
3
4
5
6
7
8
9
10
<template>
</template>

<script>
export default {
}
</script>

<style>
</style>

其他的片段都是創建單一代碼塊的特定片段。

注：（有作用域）表示它只應用於當前元件。

Emmet

預設情況下，Vetur 支援 Emmet，這是一個流行的 HTML/CSS 縮寫引擎。你可以輸入 Emmet 縮寫，然後按下 Tab 鍵，VS Code 將自動展開縮寫為對應的 HTML 代碼：

Emmet 支援

程式碼檢查

Vetur 通過 ESLint 與 VS Code ESLint 插件 集成。

ESLint 配置

ESLint 工作中

程式碼格式化

Vetur 提供了自動支援程式碼格式化的功能，以便在保存文件時格式化整個文件（需要結合 "editor.formatOnSave" 這個 VS Code 設定）。

你可以選擇禁用某些特定語言的自動格式化，只需要在 VS Code 的設定中將 vetur.format.defaultFormatter.XXXXX 設置為 none。要更改這些設定之一，只需要搜索該字符串，並在用戶設定中覆蓋你想要的設定（右側面板）。

大多數受支持的語言使用 Prettier 進行自動格式化，這是成為行業標准的工具。

它使用你的 Prettier 配置來確定你的偏好設定。

tags: [“VS Code”, “Vue.js”, “Vetur”, “syntax highlighting”, “snippets”, “IntelliSense”, “scaffolding”, “Emmet”, “linting”, “error checking”, “code formatting”]