Visual Studio Code 配置

下载小技巧

brew install --cask visual-studio-code

官网下载安装

打开 Visual Studio Code 官网进行下载
打开下载管理，复制下载链接
将链接中的域名部分 az764295.vo.msecnd.net 替换为 vscode.cdn.azure.cn

举个 🌰

https://az764295.vo.msecnd.net/stable/abd2f3db4bdb28f9e95536dfa84d8479f1eb312d/VSCode-darwin-universal.zip

替换结果如下

https://vscode.cdn.azure.cn/stable/abd2f3db4bdb28f9e95536dfa84d8479f1eb312d/VSCode-darwin-universal.zip

扩展插件推荐

点击插件 ID 或在扩展商店搜索插件 ID 即可安装

主题相关

插件名	插件 ID	插件描述
Material Icon Theme	`PKief.material-icon-theme`	图标美化
Bluloco Dark	`uloco.theme-bluloco-dark`	暗黑风格主题（本人常用）
One Dark Pro	`zhuangtongfa.Material-theme`	暗黑风格主题
Dracula Official	`dracula-theme.theme-dracula`	暗黑风格主题
Shades of Purple	`ahmadawais.shades-of-purple`	紫色主题（来自彤姐的推荐：没有什么比骚更重要）
background	`shalldie.background`	自定义背景图

VS Code Themes 在线预览

HTML 相关

插件名	插件 ID	插件描述
Auto Close Tag	`formulahendry.auto-close-tag`	自动添加 HTML / XML 关闭标签
Auto Rename Tag	`formulahendry.auto-rename-tag`	自动重命名配对的 HTML / XML 标签
Highlight Matching Tag	`vincaslt.highlight-matching-tag`	Tag 高亮匹配标记

CSS 相关

插件名	插件 ID	插件描述
Stylelint	`stylelint.vscode-stylelint`	CSS / LESS / SCSS 代码检查
Tailwind CSS IntelliSense	`bradlc.vscode-tailwindcss`	Tailwind CSS 智能提示
Easy LESS	`mrcrowl.easy-less`	保存时自动将 `less` 自动编译为 `css`
language-stylus	`sysoev.language-stylus`	增加对 `stylus` 的支持
px to rem	`sainoba.px-to-rem`	`px` 和 `rem` 互相转换

Markdown 相关

插件名	插件 ID	插件描述
markdownlint	`DavidAnson.vscode-markdownlint`	Markdown / CommonMark 标记和样式检查
Markdown Preview Enhanced	`shd101wyy.markdown-preview-enhanced`	为 Markdown 增加大纲、导出 PDF PNG JPEG HTML、自定义预览样式
Markdown All in One	`yzhang.markdown-all-in-one`	Markdown 增强，支持表格、自动预览、自动补全、格式化等

语法支持与代码格式检查

插件名	插件 ID	插件描述
ESLint	`dbaeumer.vscode-eslint`	将 ESLint 集成到 VSCode 中
Prettier - Code formatter	`esbenp.prettier-vscode`	代码格式化
Code Spell Checker	`streetsidesoftware.code-spell-checker`	代码拼写检查
Error Lens	`usernamehw.errorlens`	突出显示代码错误和警告
Vue 3 Snippets	`hollowtree.vue-snippets`	为 `Vue2` 和 `Vue3` 提供代码片段
Vue Language Features (Volar)	`Vue.volar`	`Vue3` 文件语法高亮、片段整理、错误检查、格式化
TypeScript Vue Plugin (Volar)	`Vue.vscode-typescript-vue-plugin`	用于支持在 `TS` 中 `import *.vue` 文件
Vetur	`octref.vetur`	`Vue2` 文件语法高亮、片段整理、错误检查、格式化
EditorConfig for VS Code	`EditorConfig.EditorConfig`	增加对 `.editorconfig` 的支持
DotENV	`IronGeek.vscode-env`	.env 文件键值字符串高亮和格式化
shell-format	`foxundermoon.shell-format`	`shell` 脚本格式化
WXML - Language Service	`qiu8310.minapp-vscode`	`WXML` 文件语法高亮、片段整理、错误检查、格式化
Sort package.json	`psioniq.psi-header`	对 `package.json` 文件进行排序

AI 代码提示和生成

插件名	插件 ID	插件描述
GitHub Copilot	`GitHub.copilot`	GitHub AI 代码提示和生成
GitHub Copilot Chat	`GitHub.copilot-chat`	GitHub Copilot 聊天对话
CodeGeeX	`aminer.codegeex`	免费的 AI 代码提示和生成、代码翻译、智能问答等

开发体验提升

插件名	插件 ID	插件描述
Chinese (Simplified) Language Pack for Visual Studio Code	`MS-CEINTL.vscode-language-pack-zh-hans`	中文语言包
GitLens — Git supercharged	`eamodio.gitlens`	增强构建在 VSCode 中的 Git 功能
Live Server	`ritwickdey.LiveServer`	启动具有实时重新加载功能的本地开发服务
Code Runner	`formulahendry.code-runner`	运行代码段或代码文件
ES7 React/Redux/GraphQL/React-Native snippets	`dsznajder.es7-react-js-snippets`	提供 ES7 中的 JavaScript 和 React / Redux 片段
Pretty Typescript Errors	`yoavbls.pretty-ts-errors`	使 TypeScript 错误更美观、更易于阅读
Auto Import	`steoates.autoimport`	自动查找，解析并提供所有可用导入的代码
Import Cost	`wix.vscode-import-cost`	在编辑器中显示导入/需要包的大小
Image preview	`kisstkondoros.vscode-gutter-preview`	在行号边上、悬停时显示图像预览
Path Intellisense	`christian-kohler.path-intellisense`	自动补全文件路径
npm Intellisense	`christian-kohler.npm-intellisense`	自动补全导入语句中的 `npm` 模块
es6-string-html	`Tobermory.es6-string-html`	ES6 模板字符串高亮
Todo Tree	`Gruntfuggly.todo-tree`	在树视图中显示 TODO FIXME 等注释标记
change-case	`wmaurer.change-case`	改变选中的文本的大小写

其他

插件名	插件 ID	插件描述
WakaTime	`WakaTime.vscode-wakatime`	统计代码编写时间 (WakaTime 官网)
韭菜盒子	`giscafer.leek-fund`	看股票、基金实时数据

使用小技巧

删除空行

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

安装 `code` 命令

code 命令可以直接打开一个文件或者文件目录

使用 shift + command + p 打开命令面板
输入 shell command 进行搜索
点击 Shell 命令：在 PATH 中安装 “code” 命令

# 在 vscode 中编辑当前目录下的文件
code .

# 在 vscode 中编辑该文件（当文件不存在时会先创建该文件）
code [文件名]

`webpack` 项目识别 `alias`

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

json

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

推荐配置

json

{
    "explorer.compactFolders": false,
    "explorer.confirmDelete": false,
    "go.toolsManagement.autoUpdate": true,
    "go.languageServerExperimentalFeatures": {
        "diagnostics": false
    },
    "[go]": {
        "editor.formatOnSave": true,
        "editor.codeActionsOnSave": {
            "source.organizeImports": "explicit"
        },
    },
    "[go.mod]": {
        "editor.formatOnSave": true,
        "editor.codeActionsOnSave": {
            "source.organizeImports": "explicit"
        },
    },
    "go.trace.server": "verbose",
    "go.languageServerFlags": [],
    "editor.fontFamily": "JetBrainsMono Nerd Font, Consolas,  monospace",
    "editor.fontSize": 17,
    "gopls": {
        // Add parameter placeholders when completing a function. 
        "usePlaceholders": false,
        // If true, enable additional analyses with staticcheck. 
        // Warning: This will significantly increase memory usage.   "staticcheck": false, 
    },
    "terminal.integrated.defaultProfile.windows": "PowerShell",
    "git.autofetch": true,
    "editor.fontWeight": "normal",
    "git.confirmSync": false,
    "remote.SSH.remotePlatform": {
        "104.243.24.127": "linux",
        "ubuntu": "linux",
        "weason4Ubuntu": "linux",
        "wa": "linux",
        "wa_online": "linux",
        "kali": "linux",
        "Weakali": "linux",
        "weakali_online": "linux",
        "weakali": "linux",
        "thm": "linux"
    },
    "window.zoomLevel": 1,
    "settingsSync.ignoredExtensions": [
        "easycodeai.chatgpt-gpt4-gpt3-vscode",
        "ms-vscode.remote-explorer",
        "ms-vscode-remote.vscode-remote-extensionpack",
        "yuji9511.background",
        "vscjava.vscode-java-pack",
        "lehni.vscode-fix-checksums",
        "ms-vscode-remote.remote-ssh",
        "ms-vscode-remote.remote-ssh-edit",
        "ms-ceintl.vscode-language-pack-zh-hans",
        "ms-azuretools.vscode-docker",
        "ms-vscode-remote.remote-containers",
        "vscjava.vscode-gradle",
        "alibaba-cloud.tongyi-lingma",
        "github.codespaces",
        "eamodio.gitlens",
        "ms-vscode.js-debug-companion",
        "golang.go",
        "ms-azuretools.vscode-containers"
    ],
    "redhat.telemetry.enabled": true,
    "[go][go.mod]": {
        "editor.codeActionsOnSave": {
            "source.organizeImports": "explicit"
        }
    },
    "baidu.comate.username": "紙燈Stay",
    "baidu.comate.license": "db6bcb0c-95a7-4a58-8fe4-55301a6bd66f",
    "baidu.comate.langSuggestion": {
        "css": true,
        "pug": true,
        "batchfile": true,
        "stata": true,
        "stylus": true,
        "agda": true,
        "csharp": true,
        "java": false,
        "xml": true,
        "powershell": true,
        "makefile": true,
        "zig": true,
        "sass": true,
        "solidity": true,
        "python": true,
        "ocaml": true,
        "tex": true,
        "antlr": true,
        "javascript": true,
        "protocolbuffer": true,
        "tcsh": true,
        "groovy": true,
        "cuda": true,
        "scheme": true,
        "clojure": true,
        "pascal": true,
        "isabelle": true,
        "yacc": true,
        "rmarkdown": true,
        "dart": true,
        "jupyter": true,
        "mermaid": true,
        "lean": true,
        "julia": true,
        "assembly": true,
        "markdown": true,
        "thrift": true,
        "typescript": true,
        "graphql": true,
        "haskell": true,
        "coffeescript": true,
        "standardml": true,
        "r": true,
        "cmake": true,
        "stan": true,
        "php": true,
        "sparql": true,
        "smalltalk": true,
        "scss": true,
        "literateagda": true,
        "vue": true,
        "vhdl": true,
        "emacslisp": true,
        "html": true,
        "others": true,
        "ada": true,
        "swift": true,
        "yaml": true,
        "all": true,
        "matlab": true,
        "commonlisp": true,
        "cpp": true,
        "literatecoffeescript": true,
        "visualbasic": true,
        "swan": true,
        "elm": true,
        "less": true,
        "verilog": true,
        "literatehaskell": true,
        "shell": true,
        "javaserverpages": true,
        "alloy": true,
        "elixir": true,
        "scala": true,
        "erlang": true,
        "racket": true,
        "glsl": true,
        "sql": true,
        "rust": true,
        "bluespec": true,
        "fortran": true,
        "applescript": true,
        "fsharp": true,
        "idris": true,
        "mathematica": true,
        "json": true,
        "perl": true,
        "tcl": true,
        "restructuredtext": true,
        "san": true,
        "augeas": true,
        "sas": true,
        "dockerfile": true,
        "systemverilog": true,
        "go": true,
        "kotlin": true,
        "objectivec": true,
        "prolog": true,
        "ruby": true,
        "awk": true,
        "maple": true,
        "lua": true,
        "xslt": true
    },
    "baidu.comate.enableSecurityEnhancement": false,
    "baidu.comate.linePreferMode": "auto",
    "security.workspace.trust.untrustedFiles": "open",
    "backgroundCover.imagePath": "/home/weason/Pictures/demo.png",
    "backgroundCover.opacity": 0.5,
    "winopacity.opacity": 80,
    "background.style": {
        "content": "''",
        "pointer-events": "none",
        "position": "absolute",
        "z-index": "99999",
        "width": "100%",
        "height": "100%",
        "background-position": "100% 100%",
        "background-repeat": "no-repeat",
        "opacity": 1
    },
    "terminal.integrated.fontSize": 16,
    "glassit.alpha": 243,
    "files.autoSave": "afterDelay",
    "files.autoGuessEncoding": true,
    "editor.smoothScrolling": true,
    "workbench.list.smoothScrolling": true,
    "terminal.integrated.smoothScrolling": true,
    "editor.cursorBlinking": "smooth",
    "editor.cursorSmoothCaretAnimation": "on",
    "editor.wordWrap": "on",
    "editor.acceptSuggestionOnEnter": "smart",
    "window.dialogStyle": "custom",
    "debug.showBreakpointsInOverviewRuler": true,
    "editor.minimap.autohide": true,
    "baidu.comate.customizeService": "https://comate.baidu.com",
    "git.enableSmartCommit": true,
    "terminal.integrated.defaultProfile.linux": "zsh",
    "java.imports.gradle.wrapper.checksums": [
        {
            "sha256": "e2b82129ab64751fd40437007bd2f7f2afb3c6e41a9198e628650b22d5824a14",
            "allowed": true
        }
    ],
    "java.configuration.maven.userSettings": "",
    "editor.unicodeHighlight.nonBasicASCII": false,
    "markdown-preview-enhanced.revealjsTheme": "beige.css",
    "markdown-preview-enhanced.enablePreviewZenMode": false,
    "pasteImage.path": "assets",
    "pasteImage.defaultName": "YMMDD_HHmmss",
    "code-runner.runInTerminal": true,
    "window.customTitleBarVisibility": "windowed",
    "terminal.integrated.shellIntegration.enabled": false,
    "terminal.integrated.cursorStyle": "line",
    "[markdown]": {
        "editor.defaultFormatter": "yzhang.markdown-all-in-one"
    },
    "pasteImage.insertPattern": "<div align=left><img width = '400' src = './${imageFilePath}'></div>",
    "github.copilot.advanced": {

    
    },
    "github.copilot.editor.enableInlineChat": false,
    "diffEditor.ignoreTrimWhitespace": false,
    "workbench.editor.enablePreview": false,
    "settingsSync.ignoredSettings": [
        "http.proxyStrictSSL"
    ],
    "editor.overtypeCursorStyle": "line",
    "workbench.layoutControl.enabled": false,
    "markdown-preview-enhanced.previewTheme": "github-light.css",
    "markdown-preview-enhanced.alwaysShowBacklinksInPreview": false,
    "diffEditor.hideUnchangedRegions.enabled": true,
    "launch": {
        "configurations": [
            {
                "name": "Launch Chrome",
                "request": "launch",
                "type": "chrome",
                "url": "http://localhost:8080",
                "webRoot": "${workspaceFolder}"
            }
        ]
    },
    "workbench.sideBar.location": "right",
    "mcp": {

        "inputs": [],
        "servers": {
            // "n8n": {
            //     "command": "npx",
            //     "args": [
            //         "-y",
            //         "supergateway",
            //         "--sse",
            //         "https://n8n-mmplospk.ap-northeast-1.clawcloudrun.com/mcp/54339f77-56de-4cd8-bc54-10c91079857a/sse"
            //     ]
            // },
            // "firecrawl": {
            //     "command": "npx",
            //     "args": [
            //         "-y",
            //         "firecrawl-mcp"
            //     ],
            //     "env": {
            //         "FIRECRAWL_API_KEY":"fc-548e8179ec3b4421a439a38c5a8f1ea6"
            //     }
            // }
        }
    },
    "database-client.autoSync": true,
    "explorer.fileNesting.patterns": {
        "*.ts": "${capture}.js",
        "*.js": "${capture}.js.map, ${capture}.min.js, ${capture}.d.ts",
        "*.jsx": "${capture}.js",
        "*.tsx": "${capture}.ts",
        "tsconfig.json": "tsconfig.*.json",
        "package.json": "package-lock.json, yarn.lock, pnpm-lock.yaml, bun.lockb, bun.lock",
        "*.sqlite": "${capture}.${extname}-*",
        "*.db": "${capture}.${extname}-*",
        "*.sqlite3": "${capture}.${extname}-*",
        "*.db3": "${capture}.${extname}-*",
        "*.sdb": "${capture}.${extname}-*",
        "*.s3db": "${capture}.${extname}-*"
    },
    "workbench.activityBar.location": "top",
    "window.commandCenter": false,
    "inlineChat.hideOnRequest": true,
    "inlineChat.enableV2": true,
    "workbench.editor.empty.hint": "hidden",
    "workbench.iconTheme": "material-icon-theme",
    "docker.extension.dockerEngineAvailabilityPrompt": false,
    "workbench.colorTheme": "Visual Studio Dark",
    "workbench.statusBar.visible": false,
}

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
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310

快捷键

json

// Place your key bindings in this file to override the defaultsauto[]
[
    {
        "key": "ctrl+shift+k",
        "command": "workbench.view.debug",
        "when": "viewContainer.workbench.view.debug.enabled"
    },
    {
        "key": "ctrl+shift+d",
        "command": "-workbench.view.debug",
        "when": "viewContainer.workbench.view.debug.enabled"
    },
    {
        "key": "ctrl+shift+d",
        "command": "editor.action.deleteLines",
        "when": "textInputFocus && !editorReadonly"
    },
    {
        "key": "ctrl+shift+k",
        "command": "-editor.action.deleteLines",
        "when": "textInputFocus && !editorReadonly"
    },
    {
        "key": "ctrl+shift+oem_2",
        "command": "editor.action.triggerParameterHints",
        "when": "editorHasSignatureHelpProvider && editorTextFocus"
    },
    {
        "key": "ctrl+shift+space",
        "command": "-editor.action.triggerParameterHints",
        "when": "editorHasSignatureHelpProvider && editorTextFocus"
    },
    {
        "key": "alt+oem_2",
        "command": "editor.action.triggerSuggest",
        "when": "editorHasCompletionItemProvider && textInputFocus && !editorReadonly"
    },
    {
        "key": "ctrl+space",
        "command": "-editor.action.triggerSuggest",
        "when": "editorHasCompletionItemProvider && textInputFocus && !editorReadonly"
    },
    {
        "key": "ctrl+alt+t",
        "command": "workbench.action.toggleMaximizedPanel"
    },
    {
        "key": "shift+alt+r",
        "command": "editor.action.sourceAction"
    },
    {
        "key": "ctrl+h",
        "command": "-editor.action.startFindReplaceAction",
        "when": "editorFocus || editorIsOpen"
    },
    {
        "key": "ctrl+h",
        "command": "workbench.action.previousEditor"
    },
    {
        "key": "ctrl+l",
        "command": "workbench.action.nextEditor"
    },
    {
        "key": "ctrl+i",
        "command": "-editor.action.triggerSuggest",
        "when": "editorHasCompletionItemProvider && textInputFocus && !editorReadonly && !suggestWidgetVisible"
    },
    {
        "key": "ctrl+i",
        "command": "-focusSuggestion",
        "when": "suggestWidgetVisible && textInputFocus && !suggestWidgetHasFocusedSuggestion"
    },
    {
        "key": "shift+alt+b",
        "command": "workbench.action.toggleStatusbarVisibility"
    }
]

代码片段

json

{
    "markdown code block": {
        "scope": "markdown",
        "prefix": "code",
        "body": [
            "```${1:js}",
            "$2",
            "```"
        ],
        "description": "markdown 块级代码"
    },
    "vitepress custom containers info": {
        "scope": "markdown",
        "prefix": "info",
        "body": [
            "::: info $1",
            "$2",
            ":::"
        ],
        "description": "vitepress 自定义容器 info"
    },
    "vitepress custom containers tip": {
        "scope": "markdown",
        "prefix": "tip",
        "body": [
            "::: tip $1",
            "$2",
            ":::"
        ],
        "description": "vitepress 自定义容器 tip"
    },
    "vitepress custom containers warn": {
        "scope": "markdown",
        "prefix": "warn",
        "body": [
            "::: warning $1",
            "$2",
            ":::"
        ],
        "description": "vitepress 自定义容器 warning"
    },
    "vitepress custom containers danger": {
        "scope": "markdown",
        "prefix": "danger",
        "body": [
            "::: danger $1",
            "$2",
            ":::"
        ],
        "description": "vitepress 自定义容器 danger"
    },
    "vitepress custom containers details": {
        "scope": "markdown",
        "prefix": "details",
        "body": [
            "::: details $1",
            "$2",
            ":::"
        ],
        "description": "vitepress 自定义容器 details"
    },
    "Large Bold Context Span": {
        "scope": "markdown",
        "prefix": "lcontent",
        "body": [
            "<span style=\"font-size: 23px;\">**${1:content}**</span>"
        ],
        "description": "Inserts a span with large, bold 'content' text"
    },
    "superscript": {
        "scope": "markdown",
        "prefix": "sup",
        "body": [
            "${1:content}<sup>${2:content}</sup>"
        ],
        "description": "math superscript"
    },
    "typescript challenges": {
        "scope": "markdown",
        "prefix": "challenge",
        "body": [
            "### $1",
            "",
            "$2",
            "",
            "```ts",
            "type result$3",
            "```",
            "",
            "**实现**:",
            "",
            "```ts",
            "$4",
            "```"
        ],
        "description": "typescript 类型体操"
    }
}

其他

emmet 语法说明

Visual Studio Code 配置 ​

下载小技巧 ​

扩展插件推荐 ​

主题相关 ​

HTML 相关 ​

CSS 相关 ​

Markdown 相关 ​

语法支持与代码格式检查 ​

AI 代码提示和生成 ​

开发体验提升 ​

其他 ​

使用小技巧 ​

删除空行 ​

安装 code 命令 ​

webpack 项目识别 alias ​

推荐配置 ​

快捷键 ​

代码片段 ​

其他 ​

扩展插件开发 ​

Visual Studio Code 配置

下载小技巧

扩展插件推荐

主题相关

HTML 相关

CSS 相关

Markdown 相关

语法支持与代码格式检查

AI 代码提示和生成

开发体验提升

其他

使用小技巧

删除空行

安装 `code` 命令

`webpack` 项目识别 `alias`

推荐配置

快捷键

代码片段

其他

扩展插件开发