- 本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。
前言
VS Code在前端开发人员中是用的比较多的，其他开发人员也有在用的。它的功能无疑也是非常的强大，可扩展性非常的高，哪些是可以提高我们开发效率、质量以及编码体验的功能呢？
快捷键
- 提升开发效率的常用快捷键。
查看所有快捷键
Mac：Command + K + S
Windows：Ctrl + K + S
搜索当前文件夹中某个文件
Mac：Command + P
Windows：Ctrl + P
打开执行命令的输入框
Mac：Shift + Command + P
Windows：Shift + Ctrl + P
终端使用 code 命令打开文件或文件夹
Mac：
打开 VS Code -> Shift + Command + P -> 输入 shell command ->
选择 install 'code' command in PATH
Windows：
1. 找到VS Code 安装位置，进入 bin 文件夹，复制路径（eg：D:\Microsoft VS Code\bin）
2. 回到桌面，右键我的电脑 -> 属性 -> 高级系统设置 -> 环境变量，
编辑用户变量中 path 值，在原来的 path 后面添加英文的分号 + VS Code 的 bin 路径（eg：";E:\Microsoft VS Code\bin"）
Vue 等模版中调用的方法快速跳转到定义的位置
Mac：选中方法名 -> Command + d
Windows：选中方法名 -> Ctrl + d
mixins混入或多个调用地方会有些问题。
多个编辑区域
Mac：Command + 2/3/4...
Windows：Ctrl + 2/3/4...
- 不能使用当前存在的编辑区域个数
+1的数值。
关闭/打开左侧侧边栏
Mac：Command + B
Windows：Ctrl + B
关闭/打开内置终端
Mac：Command + `
Windows：Ctrl + `
代码格式化，可配合插件等使用
Mac: Shift + Option + F
Windows：Shift + Alt + F
去除当前行或选中区域每行结尾多余空格
Mac: Command + K + X
Windows：Ctrl + K + X
选中所有当前文件中鼠标所在位置的单词
Mac: Command + Shift + L
Windows：Ctrl + Shift + L
插件
- 好的插件可以提高我们代码的质量、效率已经编码体验。
中文汉化包
Chinese (Simplified) Language Pack for Visual Studio Code // 中文简体
Chinese (Traditional) Language Pack for Visual Studio Code // 中文繁体
配置同步
Setting Sync
文件浏览器调试并同步刷新
Live Server
编程语言支持
Auto Close Tag
Auto Complete Tag
Auto Rename Tag
Easy LESS
Live Sass Compiler
ES7 React/Redux/GraphQL/React-Native snippets
Typescript React code snippets
Babel JavaScript
Volar
Vetur
Vue 3 Snippets
GraphQL
GitLens — Git supercharged // git
编辑器/代码美化
ESLint
TSLint
Prettier
beautify
Bracket Pair Colorizer2 // 括号匹配高亮
Highlight Matching Tag
scode-icon // 左侧侧边栏文件类型图标
file-icon // 左侧侧边栏文件类型图标
Dracula Official // 代码主题
Shades of Purple // 代码主题
其他
Version Lens // package.json 中可查看所有包的最新版本
KoroFileHeader // 添加文件头/函数注释
番外
插件离线安装包
- 打开
VS Code的插件官网 Extensions for the Visual Studio family of product，下载想要安装的插件，得到对应的.vsix结尾的文件。
Mac 安装
- 访达 -> 前往 -> 前往文件夹 -> 输入
~-> 进入文件夹使用shift + command + .打开隐藏文件 -> 将离线插件(.vsix)拷贝到.vscode/extensions中即可。
Windows 安装
- 将离线安装包拷贝到
VS Code的安装目录的bin目录下 - 在
bin目录下右键点击 在此处打开命令窗口，输入以下命令即可：
code --install-extension [plugin name]
结语
- 欢迎在评论区讨论，掘金官方将在掘力星计划活动结束后，在评论区抽送
100份掘金周边，抽奖详情见活动文章。
往期精彩
- 金九前端面试总结！
- 前端开发基本规范
- 从0搭建Vite + Vue3 + Element-Plus + Vue-Router + ESLint + husky + lint-staged
- 「前端进阶」JavaScript手写方法/使用技巧自查
- 公众号打开小程序最佳解决方案（Vue）
- Axios你可能不知道使用方式
「点赞、收藏和评论」
❤️关注+点赞收藏+评论+分享❤️，手留余香，谢谢🙏大家。
