Skip to content

鼓励作者:欢迎 star 或打赏犒劳

Visual Studio Code 配置

下载小技巧

mac 可直接使用 brew 下载安装

sh
brew install --cask visual-studio-code

官网下载安装

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

举个 🌰

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

替换结果如下

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

扩展插件推荐

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

主题相关

插件名插件 ID插件描述
Material Icon ThemePKief.material-icon-theme图标美化
Bluloco Darkuloco.theme-bluloco-dark暗黑风格主题(本人常用)
One Dark Prozhuangtongfa.Material-theme暗黑风格主题
Dracula Officialdracula-theme.theme-dracula暗黑风格主题
Shades of Purpleahmadawais.shades-of-purple紫色主题(来自彤姐的推荐:没有什么比骚更重要)
backgroundshalldie.background自定义背景图

VS Code Themes 在线预览

HTML 相关

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

CSS 相关

插件名插件 ID插件描述
Stylelintstylelint.vscode-stylelintCSS / LESS / SCSS 代码检查
Tailwind CSS IntelliSensebradlc.vscode-tailwindcssTailwind CSS 智能提示
Easy LESSmrcrowl.easy-less保存时自动将 less 自动编译为 css
language-stylussysoev.language-stylus增加对 stylus 的支持
px to remsainoba.px-to-rempxrem 互相转换

Markdown 相关

插件名插件 ID插件描述
markdownlintDavidAnson.vscode-markdownlintMarkdown / CommonMark 标记和样式检查
Markdown Preview Enhancedshd101wyy.markdown-preview-enhanced为 Markdown 增加大纲、导出 PDF PNG JPEG HTML、自定义预览样式
Markdown All in Oneyzhang.markdown-all-in-oneMarkdown 增强,支持表格、自动预览、自动补全、格式化等

语法支持与代码格式检查

插件名插件 ID插件描述
ESLintdbaeumer.vscode-eslint将 ESLint 集成到 VSCode 中
Prettier - Code formatteresbenp.prettier-vscode代码格式化
Code Spell Checkerstreetsidesoftware.code-spell-checker代码拼写检查
Error Lensusernamehw.errorlens突出显示代码错误和警告
Vue 3 Snippetshollowtree.vue-snippetsVue2Vue3 提供代码片段
Vue Language Features (Volar)Vue.volarVue3 文件语法高亮、片段整理、错误检查、格式化
TypeScript Vue Plugin (Volar)Vue.vscode-typescript-vue-plugin用于支持在 TSimport *.vue 文件
Veturoctref.veturVue2 文件语法高亮、片段整理、错误检查、格式化
EditorConfig for VS CodeEditorConfig.EditorConfig增加对 .editorconfig 的支持
DotENVIronGeek.vscode-env.env 文件键值字符串高亮和格式化
shell-formatfoxundermoon.shell-formatshell 脚本格式化
WXML - Language Serviceqiu8310.minapp-vscodeWXML 文件语法高亮、片段整理、错误检查、格式化
Sort package.jsonpsioniq.psi-headerpackage.json 文件进行排序

AI 代码提示和生成

插件名插件 ID插件描述
GitHub CopilotGitHub.copilotGitHub AI 代码提示和生成
GitHub Copilot ChatGitHub.copilot-chatGitHub Copilot 聊天对话
CodeGeeXaminer.codegeex免费的 AI 代码提示和生成、代码翻译、智能问答等

开发体验提升

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

其他

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

使用小技巧

删除空行

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

安装 code 命令

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

  1. 使用 shift + command + p 打开命令面板
  2. 输入 shell command 进行搜索
  3. 点击 Shell 命令:在 PATH 中安装 “code” 命令
sh
# 在 vscode 中编辑当前目录下的文件
code .

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

webpack 项目识别 alias

  1. 在项目根目录新建 jsconfig.jsontsconfig.json
  2. 添加以下代码,其中 paths 字段的值要与你项目配置的 alias 一致
json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"]
}

推荐配置

json
{
  /********** 工作台相关配置 **********/
  "workbench.colorCustomizations": {
    // "editor.selectionBackground": "#1e000000"
    "editor.lineHighlightBackground": "#00000080"
  },
  "workbench.colorTheme": "Bluloco Dark",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.editor.closeOnFileDelete": true,
  "workbench.editor.enablePreview": false, // 新开标签页查看文件而不是覆盖当前标签页
  "workbench.editor.highlightModifiedTabs": true,
  "workbench.editor.limit.enabled": true,
  "workbench.editor.limit.perEditorGroup": true,
  "workbench.editor.limit.value": 8,
  "workbench.fontAliasing": "antialiased",
  "workbench.list.smoothScrolling": true,
  "workbench.startupEditor": "newUntitledFile",
  "workbench.tree.enableStickyScroll": true,
  "workbench.tree.indent": 14,

  /********** 编辑器相关配置 **********/
  "editor.acceptSuggestionOnEnter": "smart",
  "editor.suggestSelection": "recentlyUsedByPrefix",
  "editor.accessibilitySupport": "off",
  "editor.smoothScrolling": true,
  "editor.cursorBlinking": "expand",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.detectIndentation": false,
  "editor.fontFamily": "Input Mono, Fira Code, monospace",
  "editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss06', 'zero'",
  "editor.fontSize": 13.5,
  "editor.glyphMargin": true,
  "editor.inlineSuggest.enabled": true,
  "editor.lineNumbers": "on",
  "editor.minimap.enabled": true,
  "editor.renderWhitespace": "boundary",
  "editor.stickyScroll.enabled": true,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.wordSeparators": "`~!@%^&*()=+[{]}\\|;:'\",.<>/?(),。;:",
  // 保存格式化
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.fixAll.eslint": "explicit"
  },
  "editor.unicodeHighlight.allowedLocales": {
    "zh-hans": true
  },
  "editor.guides.bracketPairs": true,
  "editor.bracketPairColorization.enabled": true,

  /** 全局配置 */
  "window.dialogStyle": "custom",
  "window.title": "${rootName}",
  "window.titleBarStyle": "custom",

  /** 终端配置 */
  "terminal.external.osxExec": "iTerm.app",
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.cursorStyle": "line",
  "terminal.integrated.persistentSessionReviveProcess": "never",
  "terminal.integrated.tabs.enabled": true,
  "terminal.integrated.env.osx": {
    "Q_NEW_SESSION": "1"
  },
  "terminal.integrated.inheritEnv": false,
  // p10k 主题字体
  "terminal.integrated.fontFamily": "MesloLGS NF",
  "terminal.integrated.defaultProfile.osx": "zsh",

  /********** 针对指定语言的编辑器配置 **********/
  // 如需要开发微信小程序,需要注释这段代码,不然会和 minapp-vscode 插件冲突
  // "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[yaml]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 有注释的 json
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[code-snippets]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[wxml]": {
    "editor.defaultFormatter": "qiu8310.minapp-vscode"
  },
  "[shellscript]": {
    // "editor.defaultFormatter": "foxundermoon.shell-format"
    "editor.defaultFormatter": null
  },
  "[github-actions-workflow]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "shellformat.path": "/opt/homebrew/bin/shfmt",

  /** 文件配置 */
  "files.autoGuessEncoding": true,
  "files.eol": "\n",
  "files.associations": {
    ".gitrepo": "jinja",
    ".zshrc": "shellscript",
    "*.cjson": "jsonc",
    "*.json": "jsonc",
    "*.env.*": "dotenv",
    "*.toml": "yaml",
    "*.vue": "vue",
    "*.wxml": "wxml",
    "*.svg": "html",
    "*.wxs": "javascript",
    "*.wxss": "css"
  },
  "files.exclude": {
    "**/.idea": true
  },
  "files.insertFinalNewline": true,
  "files.simpleDialog.enable": true,

  /** 搜索配置 */
  "search.followSymlinks": false,
  "search.exclude": {
    // 配置文件
    "**/.vscode": true,
    "**/.git": true,
    "**/.github": false,
    "**/.nuxt": true,
    "**/.yarn": true,
    // 依赖文件
    "**/node_modules": true,
    "**/bower_components": true,
    "**/miniprogram_npm": true,
    // lock 文件
    "**/package-lock.json": true,
    "**/yarn.lock": true,
    "**/pnpm-lock.yaml": true,
    // 编译文件
    "**/temp": true,
    "**/dist": true,
    "**/.umi": true
  },
  "scm.defaultViewMode": "tree",

  /** git 相关 */
  "git.autofetch": true,
  "git.ignoreMissingGitWarning": true,
  "git.untrackedChanges": "separate",

  /** 资源管理器配置 */
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "security.workspace.trust.untrustedFiles": "open",

  /********** 第三方扩展配置 **********/
  "update.mode": "manual",
  "extensions.autoCheckUpdates": false,
  "extensions.autoUpdate": "onlyEnabledExtensions",

  /** javascript / typescript 配置 */
  "typescript.locale": "zh-CN",
  "typescript.inlayHints.enumMemberValues.enabled": true,
  "javascript.inlayHints.enumMemberValues.enabled": true,
  "javascript.inlayHints.functionLikeReturnTypes.enabled": false,
  "javascript.inlayHints.parameterNames.enabled": "none",
  "typescript.preferences.preferTypeOnlyAutoImports": true,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "typescript.preferences.includePackageJsonAutoImports": "on",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.suggest.autoImports": true,
  "javascript.suggest.autoImports": true,

  /** eslint 配置 */
  "eslint.format.enable": true,
  "eslint.options": {
    "extensions": [".js", ".jsx", ".ts", ".tsx", ".vue"]
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
    "markdown",
    "json",
    "jsonc",
    "json5"
  ],

  /** prettier 配置 */
  // 是否每行末尾添加分号
  "prettier.semi": false,
  // 是否使用单引号
  "prettier.singleQuote": true,
  "prettier.printWidth": 100,
  "prettier.trailingComma": "none",

  /** errorLens 配置 */
  "errorLens.excludeBySource": ["cSpell", "Grammarly", "eslint"],

  /** Code Spell Checker 配置 */
  "cSpell.allowCompoundWords": true,
  "cSpell.language": "en,en-US",
  "cSpell.ignoreWords": [
    /** 个人 */
    "mmplayer",
    "femm",
    /** 库相关 */
    "yalc",
    "vetur",
    "vuex",
    "vuepress",
    "vitepress",
    "antd",
    "ahooks",
    "weui",
    "weapp",
    "craco",
    "execa",
    "shiki",
    "initer",
    "formily",
    "gsap",
    "zinit",
    /** 文件后缀 */
    "npmrc",
    "wxml",
    "xmind",
    /** 品牌 */
    "weixin",
    "chatgpt",
    "pixiv",
    "jsdelivr",
    "civitai",
    /** 常用简写 */
    "btns"
  ],

  /** material icon 配置 */
  "material-icon-theme.folders.associations": {
    // https://github.com/PKief/vscode-material-icon-theme/blob/main/src/icons/folderIcons.ts
    "sites": "public"
  },

  /** emmet 配置 */
  "emmet.showSuggestionsAsSnippets": true,
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "vue-html": "html",
    "javascript": "javascriptreact",
    "wxml": "html"
  },

  /** vetur 配置 */
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
      "printWidth": 80, // No line exceeds 100 characters
      "singleQuote": false // Prefer double quotes over single quotes
    },
    "prettier": {
      // 是否添加分号
      "semi": false,
      // 是否使用单引号
      "singleQuote": true,
      "eslintIntegration": true,
      "parser": "babylon"
    }
  },

  /** volar 配置 */
  "volar.autoCompleteRefs": false,
  "volar.completion.preferredTagNameCase": "pascal",

  /** css 相关配置 */
  "css.lint.unknownAtRules": "ignore",
  "scss.lint.unknownAtRules": "ignore",
  "less.lint.unknownAtRules": "ignore",
  "less.compile": {
    "out": false
  },

  /** tailwindCSS 配置 */
  "tailwindCSS.experimental.classRegex": [["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]],

  /** gitlens 配置 */
  "gitlens.keymap": "alternate",

  // 标签高亮
  "highlight-matching-tag.styles": {
    "opening": {
      "left": {
        "custom": {
          "borderWidth": "0 0 0 4px",
          "borderStyle": "solid",
          "borderColor": "LightSkyBlue",
          "borderRadius": "5px"
        }
      },
      "right": {
        "custom": {
          "borderWidth": "0 4px 0 0",
          "borderStyle": "solid",
          "borderColor": "LightSkyBlue",
          "borderRadius": "5px"
        }
      }
    }
  },

  /** markdown 配置 */
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.quickSuggestions": {
      "comments": "on",
      "strings": "on",
      "other": "on"
    }
  },
  "markdown-preview-enhanced.codeBlockTheme": "one-dark.css",
  "markdown-preview-enhanced.previewTheme": "one-dark.css",
  "markdownlint.config": {
    "MD001": false,
    "MD024": false,
    "MD029": false,
    // 内联 HTML
    "MD033": false,
    // 使用强调而不是标题
    "MD036": false,
    // 第一行应该是顶级标题(默认是 h1)
    "MD041": false
  },

  /** 微信小程序配置 */
  "minapp-vscode.disableAutoConfig": true,

  /** Live Server 配置 */
  "liveServer.settings.donotShowInfoMsg": true,
  "liveServer.settings.donotVerifyTags": true,

  /** Todo Tree 配置 */
  "todo-tree.highlights.defaultHighlight": {
    "type": "whole-line",
    "gutterIcon": false,
    "background": "#8c959f40"
  },
  "todo-tree.highlights.customHighlight": {
    "TODO": {
      "iconColour": "#fe9600",
      "foreground": "#fe9600"
    },
    "FIXME": {
      "iconColour": "#c4202b",
      "foreground": "#c4202b"
    }
  },

  /** background 配置 */
  "background.fullscreen": {
    "images": [
      "https://maomao-picture.netlify.app/vscode-background/001.webp",
      "https://maomao-picture.netlify.app/vscode-background/002.webp",
      "https://maomao-picture.netlify.app/vscode-background/003.webp",
      "https://maomao-picture.netlify.app/vscode-background/004.webp"
    ],
    "opacity": 0.91,
    "size": "cover",
    "position": "contain",
    "interval": 0
  },

  /** Turbo Console Log 配置 */
  "turboConsoleLog.quote": "`"
}

代码片段

json
{
  /********** markdown 相关 **********/
  "markdown code block": {
    "scope": "markdown",
    "prefix": "code",
    "body": ["```${1:js}", "$2", "```"],
    "description": "markdown 块级代码"
  },
  "markdown code inline": {
    "scope": "markdown",
    "prefix": "code",
    "body": ["`$1`"],
    "description": "markdown 行内代码"
  }
}

其他

扩展插件开发

如有转载或 CV 的请标注本站原文地址