-
官网下载:exe安装程序会有安装步骤,需要选择配置一些选项;zip无需安装,解压即可用。
-
Download Visual Studio Code - Mac, Linux, Windows
-
-
更新日志
-
Visual Studio Code July 2024
-
只有两步需要调整,其余部分点击下一步即可
-
自定义选择安装路径
-
通过可以快速打开的设置面板,
在搜索栏直接输入以下路径可快速定位配置
-
字体大小
-
editor>font-size
-
-
tab大小
-
editor>tab size
-
-
自动保存
-
files>auto save
-
-
空文件夹不折叠
-
compact Folders (取消勾选这个选项)
-
-
-
快捷键 功能 个人喜好(改键) 删除本行左侧所有内容 快速选中相同的词 复制当前行的内容到 (上 / 下) 一行 (可点击, 可选中区块内容) 多鼠标光标同时存在 当前文件搜索 当前文件替换 单行注释 区块 / 多行 注释 打开命令面板 打开设置面板 打开快捷键配置面板 打卡 / 关闭 左侧面板 Ctrl + ` 打开终端 点击左侧扩展程序图标或通过键盘快捷方式打开扩展列表页
1、汉化包 - Chinese (Simplified)
vscode默认语言是英文, 可以通过安装汉化包使其转成中文界面,点击install安装,重启后即可生效。
推荐使用英文界面,多少可以提升一点英语阅读能力,认识一些单词
2、浏览器打开文件 - open in browser
使用快捷键在默认浏览器中打开当前html文件
使用选择浏览器
3、起本地服务 - live server
插件是一个用于前端开发的扩展,它的主要作用是提供一个本地开发服务器,以便实时预览和调试网页应用程序。其最大特点在于热重载,即开发者可实时预览代码效果。 因为允许开发者在浏览器中实时预览您正在编辑的网页。每当保存文件时,该插件会自动刷新浏览器,以便开发者可以立即看到页面的更改效果。
4、打开UI稿 - Figma for VS Code
目前需要figma团队是专业版才可以支持vscode使用此插件
Figma for VS Code允许您在不离开文本编辑器的情况下,直接打开 UI 设计稿,不用频繁切换窗口,复制样式,提升开发效率和体验。
5、编辑器主题 - Material Theme
6、编辑器图标 - Material Icon Theme
7、预览Markdown -
8、快速打开github仓库代码
GitHub Repositories 扩展允许您直接在Visual Studio Code中快速浏览、搜索、编辑和提交到任何远程GitHub存储库, 无需将代码clone至本地。
1、注释颜色分类 - Better Comments
Better Comments扩展将帮助您在代码中创建更人性化的注释。
2、预览图片 - Image preview
在代码行左侧 和 鼠标悬停路径时显示图像预览。
3、错误提示 - Error Lens
代码错误标红,并提示具体错误信息。
4、单词拼写校验 - Code Spell Checker
单词拼写校验,错误提示
5、生成代码图片 - CodeSnap
选中要截图的代码,单击鼠标右键会弹出菜单,点击codesnap选项,即可生成图片
6、代码格式化 - Prettier
-
格式化选中的代码
-
或
-
-
格式化当前文件
-
,然后输入
此插件可以使用专门的格式化配置文件;
在你的项目根目录下创建或检查 文件,并确保其配置正确
1、标签自动闭合, 重命名
-
Auto Close Tag
-
Auto Rename Tag
2、路径提示 - Path Intellisense
自动完成文件路径名代码提示。
3、Docker
扩展使从Visual Studio Code构建、管理和部署容器化应用程序变得容易。它还提供了Node.js、Python和.NET的一键调试
4、自动导入 - auto import
自动查找、解析并为所有可用导入提供代码操作和代码完成。适用于和
1、Typescript React Code Snippets
此插件包含了使用 的 代码片段
2、Vue - Official
3、Vue 3 Snippets
4、Vue VSCode Snippets
5、Javascript (ES6) code snippets
6、Echarts Enhanced Completion
1、git提交记录 - GitLens
查看文件历史commit提交记录,代码行查看commit记录安装即用, 部分功能需要收费。
-
-
-