VS Code使用笔记
记录一些在使用VS Code过程中，遇到的有用的开发技巧。
“温馨提示：笔记内容为了方便查阅，已经经过简化，只留下了价值较高的信息。
操作
1.快捷键（macOS）
“Tips：macOS与Win按键对应：
Command=>Ctrl；Option=>Alt
| 快捷键 | 效果 |
|---|---|
Command + P |
快速打开文件 |
Command + B |
打开/关闭侧边栏 |
Command + D |
选中多个相同内容 |
Command + J |
打开终端 |
Command + \ |
编辑器拆分 |
Control + J |
合并行 |
Shift + Option + F |
格式化 |
Command + Option +[ |
折叠代码 |
Command + Option +] |
展开代码 |
Shift + Option + ⬇️ |
复制一行代码 |
2.指令
“Tips：由
Command+P进入
| 指令 | 效果 |
|---|---|
> |
编辑器命令 |
: |
跳转特定行 |
@ |
文件内跳转指定变量、方法名、类名 |
# |
项目内跳转指定变量、方法名、类名 |
3.其他
- 修改指定变量、方法名、类名：选中要修改的内容并按
F2 - 编辑器布局
View
插件
1.可视化
Prettier
Material Theme
Material Icon Theme
indent-rainbow
Color Hightlight
Bracket Pair Colorizer 2
2.效率
cdnjs
Auto Rename Tag
Bookmarks
CSS Peek
Debugger for Chrome
ESLint
HTML CSS Support
open in browser
Path Intellisense
3.辅助工具
- px to rem
- Git History
- Git Project Manager
- GitLens
- Live Server
- Live Sass Compiler
setting.json
“Tips：通过
Command+P输入setting.json
1.修改字体
"editor.fontFamily": "Menlo, Monaco, 'Courier New', monospace" //VS Code默认字体
macOS可以在Font Book.app里查看本机已安装的字体，编程时推荐使用“固定宽度”的字体。
彩蛋
写笔记的时候想把插件里的icon都拿出来，结果发现vs code并没有直接保存插件icon的功能，在无意间我发现，VS Code也是有开发者工具的！
在Help或者帮助菜单里打开开发者工具，即可看到和chrome一样的开发者工具！这下抠资源就方便多了～
本文使用 mdnice 排版
