Visual Studio Code 配置

下载小技巧

mac 可直接使用 brew 下载安装

brew install --cask visual-studio-code

官网下载安装

1. 打开 Visual Studio Code 官网进行下载
2. 打开下载管理，复制下载链接
3. 将链接中的域名部分 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	自定义背景图
Peacock	johnpapa.vscode-peacock	巧妙地改变工作空间的颜色。当你有多个 VS Code 实例并想要快速识别哪个是哪个时

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 高亮匹配标记
open in browser	techer.open-in-browser	这允许您在默认浏览器或应用程序中打开当前文件。

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	突出显示代码错误和警告
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 文件进行排序

Vue

插件名	插件 ID	插件描述
Vue 3 Snippets	hollowtree.vue-snippets	为 Vue2 和 Vue3 提供代码片段
Vue - Official	Vue.volar	Vue3 文件语法高亮、片段整理、错误检查、格式化
TypeScript Vue Plugin (Volar)	Vue.vscode-typescript-vue-plugin	用于支持在 TS 中 import *.vue 文件
Vetur	octref.vetur	Vue2 文件语法高亮、片段整理、错误检查、格式化

Angular

插件名	插件 ID	插件描述
angularAngular Language Service	Angular.ng-template	angular 语法高亮、错误检查
Angular Snippets	johnpapa.Angular2	angular 提示命令
NG-ZORRO Snippets	cipchk.ng-zorro-vscode	NG-ZORRO 组件

AI 代码提示和生成

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

开发体验提升

插件名	插件 ID	插件描述
Chinese (Simplified) Language Pack for Visual Studio Code	MS-CEINTL.vscode-language-pack-zh-hans	中文语言包
GitLens — Git supercharged	eamodio.gitlens	增强构建在 VSCode 中的 Git 功能
Git Graph	mhutchie.git-graph	查看存储库的 Git 图，并从图中执行 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	改变选中的文本的大小写
Code Spell Checker	streetsidesoftware.code-spell-checker	检查变量词汇是否有误
Dictionary Completion	yzhang.dictionary-completion	字典补全允许用户根据光标处的当前单词获得关键字列表。
Guides	spywhere.guides	更多的指导线的扩展
indent-rainbow	spywhere.oderwat.indent-rainbow	更多的指导线的扩展
Guides	spywhere.guides	使缩进更容易阅读

其他

插件名	插件 ID	插件描述
WakaTime	WakaTime.vscode-wakatime	统计代码编写时间 (WakaTime 官网)
韭菜盒子	giscafer.leek-fund	看股票、基金实时数据
Better Comments	aaron-bond.better-comments	Better Comments 扩展将帮助您在代码中创建更人性化的注释。

使用小技巧

删除空行

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” 命令

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

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

webpack 项目识别 alias

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

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

推荐配置

代码片段

{
  /********** 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 行内代码"
  }
}

其他

• emmet 语法说明

扩展插件开发

• VS Code 插件开发文档-中文版
• VSCode 插件开发全攻略配套 demo