VSCode常用拓展介绍(VS Code)

原创已于 2025-10-19 04:04:42 修改 · 1.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2024-12-26 21:14:31 首次发布

一.vue核心插件

Vetur

介绍:Vetur是vue2的一个核心插件，主要用于为 Vue 单文件组件（.vue 文件）提供了一站式的语言支持功能.

Vetur 的核心功能

语法高亮:

不仅支持 HTML/CSS/JavaScript 在 .vue 文件中的高亮。
还支持许多预处理器，如 Pug、Sass、SCSS、Less、Stylus、TypeScript 等。

代码片段

Vetur 内置了大量实用的代码片段，可以极大提升编写 Vue 代码的速度。

vfor -> 生成 v-for 循环结构
vmodel -> 生成 v-model 双向绑定
vclass -> 生成动态 Class 绑定
vstyle -> 生成动态 Style 绑定
vanimation -> 生成 Vue 过渡动画结构
vcomputed -> 生成计算属性
vwatch -> 生成侦听器

脚手架片段

快速生成一个完整的 Vue 单文件组件基础结构。

代码格式化

Vetur 内置了格式化功能，可以对 .vue 文件中的不同区域分别进行格式化。

你可以为<template>、<script>、<style>分别配置不同的格式化工具（如 Prettier、prettyhtml 等）。

工具集成

集成了 prettier、eslint、stylelint 等工具，让你在编辑 Vue 文件时也能享受这些工具带来的便利。

工具集成:Vetur 是一个“功能提供者”和“桥梁”。Vetur 本身不具备 ESLint 的代码检查能力。它依赖于你项目中已经安装并配置好的 ESLint。

vetur扮演的角色: vetur侦听vue文件,分别提取<template>、<script>、<style>部分,调用eslint进行检查,收到eslint的错误进行展示

`Vue VSCode Snippets`

介绍:它专门为 Vue.js 开发提供大量高效的代码片段

`Vue VSCode Snippets`的核心功能

代码片段：提供大量预定义的 代码片段（Snippets），通过快捷命令快速生成 Vue 组件模板、指令、生命周期钩子等。
适用场景：快速生成 v-for、v-if、methods、computed 等常用代码块。适合需要频繁编写重复代码的开发者。

快捷键展示

快捷键	生成效果
`vbase`	生成 Vue 单文件组件的基本模板（包含 `<template>`, `<script>`, `<style>`）
`vbase-3`	生成 Vue 3 的 `setup` 语法模板
`vbase-css`	带 `scoped` CSS 的基本模板
`vbase-ts`	带 TypeScript 的基本模板

快捷键	生成效果
`vif`	`v-if` 条件渲染
`velse`	`v-else` 分支
`vshow`	`v-show` 显示/隐藏
`vfor`	`v-for` 循环
`vmodel`	`v-model` 双向绑定
`von`	`@click` 事件绑定

快捷键	生成效果
`vdata`	`data()` 函数
`vmethods`	`methods` 对象
`vcomputed`	`computed` 计算属性
`vwatch`	`watch` 监听器
`vprops`	`props` 组件属性
`vemit`	`this.$emit` 触发事件

Vue (Official)

介绍:Vue (Official)是vue3的一个核心插件，将 .vue 文件视为 一种独立的语言,性能显著更好，尤其对于大型项目

Chinese(中文)

安装中文简体VSCode插件,插件库搜索Chinese 安装第一个

2.格式话配置

可以通过 vscode-文件-首选项-设置-用户-文本编辑器-格式化，勾选format on save,

`VueHelper`

占时不介绍了,格式化一般可以配合代码检查使用,配置较为复杂,需要单独研究

Eslint格式化

ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。不管是多人合作还是个人项目，代码规范是很重要的。这样做不仅可以很大程度地避免基本语法错误，也保证了代码的可读性。这所谓工欲善其事，必先利其器，推荐 ESLint+vscode 来写 vue。每次保存，vscode就能标红不符合ESLint规则的地方，同时还会做一些简单的自我修正。

启用Eslint格式化