Visual Studio Code 配置

插件推荐

Vue 相关

Vue - Official
- 写 vue 项目必装, Vue官方提供的插件, 提供了对 .vue 文件的语法高亮、智能感知、代码片段、自动修复等功能
- 插件地址
Vue 3 Snippets
- Vue 3 代码片段
- 插件地址

主题相关

One Dark Pro
- 暗色主题
- 插件地址
Vitesse Theme
- 一款简洁的主题, 由 antfu 开发, 提供暗色和亮色两种主题
- 插件地址
Material Icon Theme
- 文件图标美化
- 插件地址
background
- 自定义背景
- 插件地址

HTML 相关

Auto Rename Tag
- 自动重命名配对的 HTML / XML 标签, 适配 vue 和 jsx
- 插件地址

React 相关

ES7 React/Redux/GraphQL/React-Native snippets
- 提供 ES7 中的 JavaScript 和 React / Redux 片段，以及针对 VS Code 的 Babel 插件功能
- 插件地址

Git 相关

GitLens — Git supercharged
- 增强构建在 VS Code 中的 Git 功能
- 插件地址

CSS 相关

Tailwind CSS IntelliSense
- 提供了对 tailwindcss 的智能感知、代码片段、自动修复等功能
- 插件地址
UnoCSS
- 原子化 CSS UnoCSS 的智能感知、代码片段、自动修复等功能, 由 antfu 开发
- 插件地址
Easy LESS
- 保存时自动将 less 自动编译为 css
- 插件地址
px to rem
- px 和 rem 互相转换
- 插件地址

AI 代码提示和生成

GitHub Copilot
- 由 GitHub 和 OpenAI 合作开发的代码提示插件
- 插件地址
Baidu Comate
- 百度的代码提示插件
- 插件地址

Markdown 相关

markdownlint
- Markdown / CommonMark 标记和样式检查
- 插件地址

格式和代码检查相关

ESLint
- 将 ESLint JavaScript 集成到 VS Code 中
- 插件地址
Prettier - Code formatter
- 代码格式化
- 插件地址
Code Spell Checker
- 代码拼写检查
- 插件地址
Error Lens
- 突出显示代码错误和警告
- 插件地址

调试相关

Live Server
- 启动具有实时重新加载功能的本地开发服务，以处理静态和动态页面
- 插件地址

语法支持

EditorConfig for VS Code
- 增加对 .editorconfig 的支持
- 插件地址
ENV
- .env 文件键值字符串高亮和格式化
- 插件地址

开发体验提升

Code Runner
- 代码运行器, 一键运行代码, 快速调试
- 插件地址
Auto Import
- 自动查找，解析并提供所有可用导入的代码操作和代码完成。与 Typescript 和 TSX 一起使用
- 插件地址
Import Cost
- 在编辑器中显示导入/需要包的大小（PS：小内存用户不建议使用，说的就是你这个用 8G 的）
- 插件地址
Image preview
- 在行号边上、悬停时显示图像预览
- 插件地址
Path Intellisense
- 自动补全文件名
- 插件地址
npm Intellisense
- 可自动完成导入语句中的 npm 模块
- 插件地址
Chinese (Simplified) Language Pack for Visual Studio Code
- 适用于 VS Code 的中文（简体）语言包
- 插件地址
es6-string-html
- ES6 模板字符串高亮
- 插件地址
Todo Tree
- 在树视图中显示 TODO FIXME 等注释标记
- 插件地址

微信小程序相关

WXML - Language Service
- 微信小程序标签、属性的智能补全（同时支持原生小程序、mpvue 和 wepy 框架，并提供 snippets）
- 插件地址

antfu 大佬开发的插件

File Nesting Updater
- 文件嵌套更新器
- 插件地址

json

{
// 在 settings.json 中添加以下配置
  "fileNestingUpdater.autoUpdate": true,
  "fileNestingUpdater.autoUpdateInterval": 720,
  "fileNestingUpdater.promptOnAutoUpdate": true,
  "fileNestingUpdater.upstreamRepo": "antfu/vscode-file-nesting-config",
  "fileNestingUpdater.upstreamBranch": "main"
}

i18n Ally
- 国际化插件
- 插件地址
Iconify IntelliSense
- 图标智能感知
- 插件地址
Smart Clicks
- 智能点击
- 插件地址

其他

LeetCode
- LeetCode 插件
- 插件地址

使用小技巧

删除空行

打开替换 Alt + ⌘ + F
输入 ^\s*(?=\r?$)\n
勾选使用正则表达式 Alt + ⌘ + R
全部替换 ⌘ + Enter

webpack 项目识别 alias

在项目根目录新建 jsconfig.json 或 tsconfig.json
添加以下代码，其中 paths 字段的值要与你项目配置的 alias 一致

json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"]
}

代码片段

推荐一个快速生成vscode代码片段的插件 snippet-generator

json

{
  "Vue3.2+快速生成模板": {
    "prefix": "Vue3.2+",
    "body": [
      "<script setup lang='ts'>",
      "</script>\n",
      "<template>",
      "\t<div>\n",
      "\t</div>",
      "</template>\n",
      "<style scoped>\n",
      "</style>",
      "$2"
    ],
    "description": "Vue3.2+"
  },
  "Vue3.3+defineOptions快速生成模板": {
    "scope": "vue",
    "prefix": "Vue3.3+",
    "body": [
      "<script setup lang='ts'>",
      "defineOptions({",
      "\tname: ''",
      "})",
      "</script>\n",
      "<template>",
      "\t<div>test</div>",
      "</template>\n",
      "<style lang='scss' scoped>\n",
      "</style>",
      "$2"
    ],
    "description": "Vue3.3+defineOptions快速生成模板"
  },
  "箭头函数": {
    "prefix": "jt",
    "body": [
      "($0) => {",
      "",
      "}"
    ],
    "description": "箭头函数"
  },
  "log": {
    "prefix": "log",
    "body": [
      "console.log(\"🚀 ~ \",$0)"
    ],
    "description": "log"
  },
}

推荐配置

配置参考 antfu

json

// settings.json
{
  // ========== Visuals 视觉效果 ==========
  "editor.cursorSmoothCaretAnimation": "on", // 平滑光标动画
  "editor.guides.bracketPairs": "active", // 括号对的引导线
  "editor.lineNumbers": "interval", // 每10行显示一行行号
  "editor.renderWhitespace": "boundary", // 渲染空白字符
  "window.autoDetectColorScheme": true, // 自动检测系统主题
  "workbench.colorTheme": "Vitesse Light Soft",
  "workbench.editor.tabActionLocation": "left", // 标签页操作位置
  "workbench.fontAliasing": "antialiased", // 进行像素而不是次像素级别的字体平滑。可能会导致字体整体显示得更细
  "workbench.iconTheme": "material-icon-theme", // 图标主题
  "workbench.list.smoothScrolling": true, // 平滑滚动
  "workbench.preferredDarkColorTheme": "Vitesse Dark Soft", // 工作台首选暗色主题
  "workbench.preferredLightColorTheme": "Vitesse Light Soft", // 工作台产品图标主题
  "workbench.sideBar.location": "right", // 侧边栏位置
  "workbench.startupEditor": "newUntitledFile", // 启动时打开的编辑器
  "workbench.tree.expandMode": "singleClick", // 树视图单击展开
  "workbench.tree.indent": 10, // 树视图缩进

  // ========== Editor 编辑器 ==========
  "debug.onTaskErrors": "debugAnyway", // diff 的时候是否忽略空格
  "editor.wordSeparators": "`~!@#%^&*()=+[{]}\\|;:'\",.<>/?", // 词分隔符
  "editor.find.addExtraSpaceOnTop": false, // 搜索时不在顶部添加额外空间
  "editor.inlineSuggest.enabled": true, // 启用内联建议
  "editor.multiCursorModifier": "alt", // 多光标 alt: 映射为 Alt (Windows 和 Linux) 或 Option (macOS)。
  "editor.suggestSelection": "first", // 建议列表中如何预先选择建议 first: 选择第一个建议
  "editor.tabSize": 2, // tab键的宽度
  "editor.unicodeHighlight.invisibleCharacters": false, // 是否高亮不可见字符
  "editor.stickyScroll.enabled": true, // 启用粘性滚动
  "editor.hover.sticky": true, // 启用粘性悬停
  // 保存时执行的代码操作
  "editor.codeActionsOnSave": {
    "source.fixAll": "never", // 保存时自动修复 (never: 从不)
    "source.fixAll.eslint": "explicit", // 保存时自动修复 (explicit: 显式)
    "source.organizeImports": "never" // 保存时自动排序 (never: 从不)
  },
  "explorer.confirmDelete": false, // 禁用删除文件时的确认提示
  "explorer.confirmDragAndDrop": false, // 禁用拖拽文件时的确认提示
  "files.eol": "\n", // 换行符
  "files.insertFinalNewline": false, // 插入最后一行的换行符
  "files.simpleDialog.enable": true, // 启用简单对话框
  "git.autofetch": true, // 若设置为 true，则自动从当前 Git 仓库的默认远程仓库提取提交。若设置为“全部”，则从所有远程仓库进行提取。
  "git.confirmSync": false, // 禁用同步时的确认提示
  "git.enableSmartCommit": true, // 启用智能提交
  "git.untrackedChanges": "separate", // 未跟踪的更改
  "scm.diffDecorationsGutterWidth": 2, // 差异装饰的边距宽度
  "terminal.integrated.cursorBlinking": true, // 光标闪烁
  "terminal.integrated.cursorStyle": "line", // 光标样式
  "terminal.integrated.fontWeight": "300", // 终端字体粗细
  "terminal.integrated.persistentSessionReviveProcess": "never", // 终端会话恢复
  "terminal.integrated.tabs.enabled": true, // 启用终端标签页
  "workbench.editor.closeOnFileDelete": true, // 删除文件时关闭编辑器
  "workbench.editor.highlightModifiedTabs": true, // 高亮修改过的标签页
  "workbench.editor.limit.enabled": true, // 启用编辑器组中的编辑器数量限制
  "workbench.editor.limit.perEditorGroup": true, // 启用编辑器组中的编辑器数量限制
  "workbench.editor.limit.value": 5, // 编辑器组中的编辑器数量限制 5
  // 搜索时排除的文件
  "search.exclude": {
    "**/*.snap": true,
    "**/*.svg": true,
    "**/.git": true,
    "**/.github": false,
    "**/.nuxt": true,
    "**/.output": true,
    "**/.pnpm": true,
    "**/.vscode": true,
    "**/.yarn": true,
    "**/assets": true,
    "**/bower_components": true,
    "**/dist/**": true,
    "**/logs": true,
    "**/node_modules": true,
    "**/out/**": true,
    "**/package-lock.json": true,
    "**/pnpm-lock.yaml": true,
    "**/public": true,
    "**/temp": true,
    "**/yarn.lock": true,
    "**/CHANGELOG*": true,
    "**/LICENSE*": true
  },

  // ==========  Global Level Config, needs to put in User Settings 全局级别配置，需要放入用户设置 ==========
  "window.dialogStyle": "custom", // 自定义对话框
  "window.nativeTabs": true, // 原生标签页 (macOS)
  // "window.title": "${rootName}", // 标题
  "window.titleBarStyle": "custom", // 自定义标题栏
  "extensions.autoUpdate": false, // 禁用自动更新

  // ========== Extension configs 扩展配置 ==========
  // Extension configs
  "emmet.showSuggestionsAsSnippets": true, // Emmet 提示
  "emmet.triggerExpansionOnTab": false, // Emmet 触发展开
  "errorLens.enabledDiagnosticLevels": ["warning", "error"], // 错误镜头启用诊断级别

  // ESLint config: https://github.com/antfu/eslint-config
  // ESLint 代码操作显示文档
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "eslint.quiet": true, // ESLint 静默模式
  "eslint.experimental.useFlatConfig": true, // ESLint 使用扁平配置

  // Silent the stylistic rules in you IDE, but still auto fix them 静默 IDE 中的样式规则，但仍会自动修复它们
  "eslint.rules.customizations": [
    { "rule": "style/*", "severity": "off" },
    { "rule": "format/*", "severity": "off" },
    { "rule": "*-indent", "severity": "off" },
    { "rule": "*-spacing", "severity": "off" },
    { "rule": "*-spaces", "severity": "off" },
    { "rule": "*-order", "severity": "off" },
    { "rule": "*-dangle", "severity": "off" },
    { "rule": "*-newline", "severity": "off" },
    { "rule": "*quotes", "severity": "off" },
    { "rule": "*semi", "severity": "off" }
  ],
  // ESLint 验证
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "vue", "html", "markdown", "json", "jsonc", "yaml", "toml"],

  // GitHub Copilot
  "github.copilot.enable": {
    "*": true,
    "plaintext": false,
    "markdown": true,
    "scminput": false,
    "typescript": true
  },

  "cSpell.allowCompoundWords": true, // cSpell 允许复合词
  "cSpell.language": "en,en-US", // cSpell 语言
  "css.lint.hexColorLength": "ignore", // CSS 颜色长度
  "gitlens.codeLens.authors.enabled": false, // GitLens 作者
  "gitlens.codeLens.enabled": false, // GitLens 代码镜头
  "gitlens.codeLens.recentChange.enabled": false, // GitLens 最近更改
  // GitLens 菜单
  "gitlens.menus": {
    // 编辑器
    "editor": {
      "blame": false, // 提交历史
      "clipboard": true, // 剪贴板
      "compare": true, // 比较
      "history": false, // 历史
      "remote": false // 远程
    },
    // 编辑器组
    "editorGroup": {
      "blame": true, // 提交历史
      "compare": false // 比较
    },
    // 编辑器标签页
    "editorTab": {
      "clipboard": true, // 剪贴板
      "compare": true,
      "history": true,
      "remote": true
    },
    // 资源管理器
    "explorer": {
      "clipboard": true,
      "compare": true,
      "history": true,
      "remote": true
    },
    // 源代码管理
    "scm": {
      "authors": true
    },
    // 源代码管理组
    "scmGroup": {
      "compare": true,
      "openClose": true,
      "stash": true
    },
    // 源代码管理组内
    "scmGroupInline": {
      "stash": true
    },
    // 源代码管理项
    "scmItem": {
      "clipboard": true,
      "compare": true,
      "history": true,
      "remote": false,
      "stash": true
    }
  },
  "i18n-ally.autoDetection": false, // i18n-ally 自动检测 (false: 关闭)
  "i18n-ally.displayLanguage": "zh-CN", // i18n-ally 显示语言 (zh-CN: 简体中文)
  "i18n-ally.ignoredLocales": [], // i18n-ally 忽略的语言
  "iconify.annotations": true, // 图标注释
  "iconify.inplace": true, // 图标内置
  "svg.preview.mode": "svg", // SVG 预览模式

  // ========== prettier ==========
  //  I only use Prettier for manually formatting 我只使用 Prettier 手动格式化代码
  // "prettier.enable": false, // 禁用 Prettier
  "prettier.printWidth": 200, // 指定每行代码的最佳长度，如果超出该长度则格式化
  "prettier.semi": false, // 在所有代码语句的末尾添加分号
  "prettier.singleQuote": false, // 使用单引号而不是双引号 (true: 单引号, false: 双引号)
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 默认格式化程序

  // ========== 文件嵌套 File Nesting ==========
  // 最新仓库代码: https://github.com/antfu/vscode-file-nesting-config
  "fileNestingUpdater.autoUpdate": true,
  "fileNestingUpdater.autoUpdateInterval": 720,
  "fileNestingUpdater.promptOnAutoUpdate": true,
  "fileNestingUpdater.upstreamRepo": "antfu/vscode-file-nesting-config",
  "fileNestingUpdater.upstreamBranch": "main",
  // ------------- 外观字体 ------------
  "editor.fontSize": 13, // 字体大小
  "editor.fontFamily": "Input Mono, monospace", // 字体
  // "editor.fontFamily": "Fira Code, Input Mono, monospace", // 字体
  "terminal.integrated.fontFamily": "Hack Nerd Font Mono", // 终端字体 (Hack Nerd Font Mono) => 使用这个字体是为了在终端中显示图标
  // "editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss06', 'zero'", // 字体连字
  // "editor.fontFamily": "Operator Mono",
  // "editor.fontLigatures": true, // 这个控制是否启用字体连字，true启用，false不启用，这里选择启用

  // ========== 其他个人配置 ==========
  "extensions.ignoreRecommendations": true, // 忽略扩展推荐
  // ...
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222

其他

emmet 语法

emmet 语法说明

emmet 语法是一种快速生成代码的语法，可以快速生成 html、css、js 代码片段

eg:

html

<!-- 输入 -->
ul>li*5

html

<!-- 输出 -->
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Visual Studio Code 配置 ​

插件推荐 ​

Vue 相关 ​

主题相关 ​

HTML 相关 ​

React 相关 ​

Git 相关 ​

CSS 相关 ​

AI 代码提示和生成 ​

Markdown 相关 ​

格式和代码检查相关 ​

调试相关 ​

语法支持 ​

开发体验提升 ​

微信小程序相关 ​

antfu 大佬开发的插件 ​

其他 ​

使用小技巧 ​

删除空行 ​

webpack 项目识别 alias ​

代码片段 ​

推荐配置 ​

其他 ​

emmet 语法 ​

扩展插件开发 ​

Visual Studio Code 配置

插件推荐

Vue 相关

主题相关

HTML 相关

React 相关

Git 相关

CSS 相关

AI 代码提示和生成

Markdown 相关

格式和代码检查相关

调试相关

语法支持

开发体验提升

微信小程序相关

antfu 大佬开发的插件

其他

使用小技巧

删除空行

webpack 项目识别 alias

代码片段

推荐配置

其他

emmet 语法

扩展插件开发