我的VSCode配置和常见插件

本文介绍了我平时的 VSCode 的配置和设置，以及使用频次较多的插件。

配置文件

{
  // 保存的时候自动格式化
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    // 使用eslint来fix，包括格式化会自动fix和代码质量检查会给出错误提示
    "source.fixAll.eslint": true
  },
  // 默认格式化工具选择prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

设置

插件

HTMLCSS

Auto Close Tag （已内置）

标签。

注意：VSCode 不支持在 .vue 文件中原生的自动闭合标签功能。您可以通过安装 Vue Languages Features (Volar) 来启用此功能。

Auto Rename Tag（已内置）

标签。
在 settings.json 文件中增加配置：

// settings.json
"editor.linkedEditing": true

JavaScript

JavaScript (ES6) code snippets

ES6 代码提示。

Vue

Vue - Official

Vue Language Features (Volar) 和 TypeScript Vue Plugin (Volar) 已弃用。改为使用 Vue-Official。

Fast Vue Language Support Extension.

~~Vue Language Features (Volar)~~

~~Vue3 支持。~~
~~打开自动填充 .value 。搜索 @ext:Vue.volar value 勾选，或者~~
"vue.autoInsert.dotValue": true
~~重启 VSCode 。~~

~~TypeScript Vue Plugin (Volar)~~

~~TS 版的 Volar 。~~

Vue VSCode Snippets

vue 初始模板大全，代码片段。

Vue Peek

快速跳转组件定义和跳转路径。

element

Element UI Snippets

element-ui 提示。

element-plus-vue

vue3 的 element-plus 插件，代码片段、跳转至官方文档、标签悬浮提示、标签属性代码补全。

tailwind

Headwind

格式化 class 类名顺序。

Tailwind CSS IntelliSense

官方代码提示。

UnoCSS

输入提示, 悬浮显示样式。

Iconify IntelliSense

预览图标。（并不是特地用于 UnoCSS）

Git

Git Graph

图像化查看提交记录。

Git History

查看某一样/某个文件的修改记录，

Gitlens

查看光标所在行的修改人与记录。

代码

Code Runner

运行各种代码。

ESLint

代码质量校验。

Prettier - Code formatter

代码格式化。

辅助类

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

适用于 VS Code 的中文（简体）语言包。

Code GPT

内置 GPT 。

Code Spell Checker

英语单词拼接检查。
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

Image preview

小图预览图片。

Live Server

自动刷新的本地服务器。

Todo Tree

代码注释里添加 TODO、FIXME、XXX 之一，后跟文本，可以在左侧生成一个 todo-list。

Trailing Spaces（已内置）

将这个配置内容添加到你的 settings.json 文件以启用自动修剪：

{
	"files.trimTrailingWhitespace": true,    
}

有些情况下可能希望关闭这个设置，例如使用 vscode 写 markdown 文档时，因为根据 CommonMark 规范，你必须在行的末尾放置两个或更多空格才能在输出中创建硬行换行。你可以将以下内容添加到你的 settings.json 文件来关闭它：

{    
	"[markdown]": {    
		"files.trimTrailingWhitespace": false    
	}
}

主题图标

Material Icon Theme

摸鱼

Qwerty Learner

敲单词。

首发地址：https://wu-kave.github.io/2024/my-vscode-config-and-common-plugins.html