提示

vscode 的插件市场 (opens new window)

开发应用

插件	作用
Prettier (opens new window)、Sass (opens new window)、language-stylus (opens new window)	（代码格式化）
Vue VSCode Snippets (opens new window)	（语法片段）
vscode 自带的代码片段功能	（Template 片段）

1、Prettier 插件

  -Prettier (opens new window) 是一款强大的代码格式化工具，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具。

发展历程

  Prettier 插件目前支持格式化支 HTML、JavaScript、JSX、CSSLess、、TypeScript、SCSS、JSON、jsonc、postcss、vue、Markdown、GraphQL 等语言

  根据 Prettier 的发展历程，我简单记录了一些重点改变：

• 开始实验性的支持 vue 文件格式化（[1.1.3]） --> （当时默认为禁用状态）
• 弃用 ESLint、TSLint、Styleint 支持（[2.1.0]）
• 新增 prettier.useEditorConfig（[3.10.0]） --> （默认为 true）
• 新增 prettier.configPath (opens new window) （[3.2.0]）

安装使用

• settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // 本地
  "prettier.configPath": "~/.prettierrc"
  // "prettier.configPath": "C:\\Users\\xxx\\.prettierrc",
}

• .prettierrc

官方配置说明：Options (opens new window)

{
  "useTabs": false, // 使用tab缩进还是空格缩进
  "tabWidth": 2, // tab是空格的情况下，是几个空格

  "trailingComma": "none", // 在多行输入的尾逗号是否添加（默认为all）
  "semi": false, // 语句末尾是否要加分号（默认为true）
  "singleQuote": true, // 使用单引号还是双引号（默认为false）
  "printWidth": 100 // 当行字符的长度（默认80）
}

2、Vetur 插件

  -Vetur (opens new window)：VS Code 的 Vue 工具，由 vls 提供支持

基本介绍

  Vetur 的 vue 官方维护的一个 vscode 插件，在 vue2 时期大量使用。它提供了 语法高亮、Snippet 片段、Emmet 语法支持、代码格式化 等功能。

  虽然 Vetur 绑定了很多格式化程序（插件），用于格式化html/pug/css/scss/less/postcss/stylus/js/ts文件。但个人感觉格式化交给 Prettier 比较纯粹 😂。

Vetur 的使用 ✍ 理解

  官方提供 Vetur 插件是让编辑器可以更好的识别 vue 文件、适配 vue 项目，我想这才该是该插件产生的初衷。

  其中的 Snippet、代码格式化核心功能其实并不需要它来完成：

• Prettier (opens new window)、Sass (opens new window)、language-stylus (opens new window)（代码格式化）
• Vue VSCode Snippets (opens new window)（语法片段）
• vscode 自带的代码片段功能（Template 片段）

• settings.json

官方配置说明：Settings (opens new window)

{
  "vetur.format.enable": false // 禁用Vetur格式化功能
}

安装使用

• eslint 检测

// setting.json
{
  "eslint.validate": ["javascript", "javascriptreact", "vue"]
}

• 项目开发中

create a jsconfig.json or tsconfig.json, which will include all Vue files and files that they import from

// tsconfig.json
{
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

• TS 支持（vue3 中）

如果使用了 Volar 插件，这个就不用配置了

// shims-vue.d.ts
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

3、Volar 插件

  -Volar (opens new window) 插件是一个专门用于 Vue 3 开发的 Visual Studio Code 插件，它提供了对 Vue 3 项目的语法高亮、智能感知、类型检查和模板编辑等功能。

提示

  Volar 插件本身并不提供代码格式化功能。

Volar 取代了我们之前为 Vue 2 提供的官方 VSCode 扩展 Vetur。如果你之前已经安装了 Vetur，请确保在 Vue 3 的项目中禁用它。

TypeScript Vue Plugin 用于支持在 TS 中 import *.vue 文件，Volar 插件也能够为 <script lang="ts"> 块提供类型检查