# 开发应用

插件 作用
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、代码格式化核心功能其实并不需要它来完成:

  • 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"> 块提供类型检查

更新于 : 7/8/2024, 10:21:14 AM