vscode使用不完全记录

前言

工欲善其事,必先利其器。作为程序员的俺们,有一款适合自己的编辑器当然是非常好的一件事啦!!!前端开发经常使用的编辑器有sublime,webstorm,atom等等等。看的我都眼花缭乱了,这些编辑器各自有自己的优点与缺点,怎么选择还得看自己的实际需求。

vscode

软件下载安装,编辑器对比。

下载地址

编辑器对比

颜值(主题)

写代码的时候有一个好看的主题,就像家里有一个漂亮的女盆友,撸代码的时候自然会有好心情。 😄,所以好看的主题自然不能少.

  1. 如果你使用过atom,一定很熟悉这种配色.
    那么你可以使用One Dark Theme

其它主题可以参看vscode主题

实用插件

有了好看的主题,接下来该安心coding啦,于是我们需要一些比较实用的插件来帮助我们更好的开发。

  1. Path Intellisense (自动补全路径)
  2. auto rename tag (自动修改html标签)
  3. beautify(代码格式化插件)
  4. git history (git 插件)
  5. eslint (强大的代码检查插件)
  6. jQuery Code Snippets (jQuery提示插件)

快捷键

明显使用快捷键丢弃鼠标可以让我们的工作更加高效和快速,所以记住一些常用的快捷键是必要的。

单行编辑

  1. ⇧⌘K - 单行操作,删除光标所在行
  2. ⇧⌥↓ - 复制光标所在行到下一行
  3. ⌥↓ - 将光标所在行移至下一行

多行编辑

  1. ⌥⌘↓ - 向下插入一个光标,或者使用 ⌥ + Click
  2. ⇧⌥ + 鼠标拖动 - 多列区块选择,再配合 ⇧⌘→ 可选中至结尾处
  3. ⇧⌘L - 选择相同文本
  4. ⌘F2 - 选择相同单词,或者使用 ⌘D 依次加入选中

代码定位

  1. ⇧⌘\ - 跳转至对应匹配括号处
  2. ⇧⌘O - 跳转至对象、属性、方法
  3. ⌃G - 跳转至指定行
  4. ⌘↓ - 跳转至文件结尾
  5. ⇧⌘M - 显示当前文件的错误与警告信息
  6. F12 - 跳转至定义行
  7. ⌥F12 - 浮窗打开定义行(可直接修改)
  8. ⌥⌘ + Click - 新开侧边窗口跳转至定义行
  9. ⇧⌘G - 选中上一次的查找结果

代码展示

  1. ⌥Z - 开启/关闭代码自动换行,还可通过 editor.wrappingColumn 配置单行最大字符数
  2. ⇧⌘[ - 代码折叠,⇧⌥⌘[ 为全部折叠
  3. ⇧⌘] - 代码展开,⇧⌥⌘] 为全部展开
  4. ⇧⌥F - 代码格式化

窗口操作

  1. ⌘1 ⌘2 ⌘3 - 切换至对应的子窗口
  2. ⌃Tab - 切换当前子窗口的标签页
  3. ⌃` - 打开内置 Terminal 窗口
  4. ⌘⇧U - 打开/关闭 Output 窗口,可查看 Extensions/Git/Task 输出

推荐几篇比较好的文章


  1. vscode 插件精选 - 献给所有前端工程师