VSCode前端开发使用总结

(Updated: )
开发者
VSCode

这是一个 vscode 的使用小 tip，会不定期更新。

之前一直在使用 WebStorm 编辑器，特别好用，但是缺点也有的，内存吃不消。后来接触 vscode，但其间因为各种原因弃奔了几次转回 Webstorm。现在，又回来了…

推荐插件

  • IntelliJ IDEA Keybindings - 支持 intelliJ 快捷键
  • Live Server - 支持本地服务器
  • Material Icon Theme - Material 风格的图标
  • Terminal Tabs - 支持 termial tab，可快速打开 termial
  • Auto Close Tag - html 标签自动关闭
  • Auto Rename Tag - html 修改标签
  • GitLens
  • Markdown Preview Enhanced - Markdown 预览
  • Markdown All in One
  • Open Recent Files - 模拟 Intellij cmd + e
  • Material Icon Theme - material 主题
  • Terminal Tabs

常用快捷键

功能操作
多光标 1cmd + option + ↑
多光标 2option + 鼠标左键
移动行option + option + ↑
光标移动到最顶最底部command + ↑
选择多行shift + ↑
复制行command + D
光标到行首或行尾command + ←
光标以单词为单位移动option + ←
光标以单词为单位选中shift +option + ←
隐藏显示左侧 explorercommand + 1
在 explorer 上定位当前文件位置command + 1 + command + 1
全局搜索command + shift + F
全局替换command + shift + R
文件内搜索command + F
文件内替换command + R
折叠文件夹command + ↓
展开文件夹command + →
创建文件command + N
创建文件夹shift + command + N
修改文件（夹）名shift + F6
删除文件(夹)command + delete
关闭文件command + W
全局搜索文件并跳转shift + command + O
选择最近浏览的文件command + E
退回到上一处光标位置command + U

其他

修改 vscode 样式

有很多可以修改 vscode 样式的参数：

1
2
3
4
5
6
// settings.json
{
  "window.zoomLevel": 1, //设置window的zoom比例
  "editor.fontSize": 12, //设置字体大小
  "terminal.integrated.fontSize": 14 //设置terminal的字体大小
}

比如你想让左侧的 explor 栏变得更窄更小一些的话，可以这样设置：

1
2
3
4
5
// settings.json
{
  "window.zoomLevel": -0.8, //window 整体字体缩小
  "editor.fontSize": 14 //编码区字体再相应设置大一些
}

我的更多设置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{
  "workbench.colorCustomizations": {
    "activityBar.foreground": "#e7e7e7",
    "activityBar.inactiveForeground": "#e7e7e7",
    "titleBar.activeBackground": "#639",
    "titleBar.activeForeground": "#e7e7e7",
    "titleBar.inactiveBackground": "#639",

    "titleBar.inactiveForeground": "#e7e7e7",
    "statusBar.foreground": "#e7e7e7",
    "activityBarBadge.background": "#FF4081",
    "list.activeSelectionForeground": "#FF4081",
    "list.inactiveSelectionForeground": "#FF4081",
    "list.highlightForeground": "#FF4081",
    "scrollbarSlider.activeBackground": "#FF408150",
    "editorSuggestWidget.highlightForeground": "#FF4081",
    "textLink.foreground": "#FF4081",
    "progressBar.background": "#FF4081",
    "pickerGroup.foreground": "#FF4081",
    "tab.activeBorder": "#FF4081",
    "notificationLink.foreground": "#FF4081",
    "editorWidget.resizeBorder": "#FF4081",
    "editorWidget.border": "#FF4081",
    "settings.modifiedItemIndicator": "#FF4081",
    "settings.headerForeground": "#FF4081",
    "panelTitle.activeBorder": "#FF4081",
    "breadcrumb.activeSelectionForeground": "#FF4081",
    "menu.selectionForeground": "#FF4081",
    "menubar.selectionForeground": "#FF4081"
  }
}

设置好之后差不多是这样的：

显示文件面包屑

1
2
3
{
  "breadcrumbs.enabled": true
}

设置好之后文件的顶部会显示当前文件面包屑：