Maoyl's blog Maoyl's blog
首页
  • 前端基础

    • HTML
    • CSS
    • CSS动画
    • JavaScript文章
    • stylus
  • 性能优化

    • 《性能优化》笔记
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《JavaScript设计模式》笔记
    • 《TypeScript 从零实现 axios》
    • TypeScript笔记
    • JS设计模式总结笔记
  • 前端框架

    • Vue相关
    • React相关
  • 前端监控

    • 前端监控简介
  • 学习笔记

    • 《Vue》笔记
    • 《React》笔记
    • 小程序学习笔记
  • 后端基础

    • Nodejs
  • 学习笔记

    • 数据结构
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • 网页性能
  • 学习笔记

    • 《Git》学习笔记
    • 《Vim》学习笔记
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

maoyln

日日行,不怕千万里
首页
  • 前端基础

    • HTML
    • CSS
    • CSS动画
    • JavaScript文章
    • stylus
  • 性能优化

    • 《性能优化》笔记
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《JavaScript设计模式》笔记
    • 《TypeScript 从零实现 axios》
    • TypeScript笔记
    • JS设计模式总结笔记
  • 前端框架

    • Vue相关
    • React相关
  • 前端监控

    • 前端监控简介
  • 学习笔记

    • 《Vue》笔记
    • 《React》笔记
    • 小程序学习笔记
  • 后端基础

    • Nodejs
  • 学习笔记

    • 数据结构
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • 网页性能
  • 学习笔记

    • 《Git》学习笔记
    • 《Vim》学习笔记
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 简介

  • vim

  • vscode

    • 文本与窗口的基本操作
    • vscode多窗口操作
    • 全局搜索命令
    • 开发常用小技巧
      • 代码提示命令
        • 显示代码操作
        • 触发函数参数提示
        • 触发建议
      • 行操作命令
        • 移动行
        • 增加行
      • 删除前面的单词
        • 删除完整单词
        • 按小驼峰分割的单词删除
      • 跳转错误与单词
      • 选中所用单词
    • vscode挖掘快捷键场景
    • vscode git 操作
    • snippet 代码片段
    • 代码重构工具
    • VSpaceCode 插件
  • 《Vim》学习笔记
  • vscode
maoyln
2022-07-02
目录

开发常用小技巧

# 先利其器:vscode 开发常用小技巧

论语有曰:“工欲善其事,必先利其器”。而对于我们开发用的 “器” ———— vscode (或其他 whatever),我们要会了解怎么使用它,才能把它变成一个利器。

故而我们今天来了解一下 vscode 在开发中的一些使用小技巧,虽然它们很 “小”,但却与我们的日常开发息息相关。

# 代码提示命令

# 显示代码操作

我们在前面的训练中了解到了如何通过 vim 的命令模仿鼠标划过激活悬浮提示,但还有一种情况我们没有说:当我们输入一些有问题的代码语法比如未引入的模块函数,该行的行首会有个小灯泡移入会有 “显示代码操作” 字样(英文为 show code action),点击会有待选框弹出让我们可以快速导入(如果检测到项目中的其他模块有同名的模块),这就是我们常常会看到和用到的 [代码操作] 选项框(在鼠标划过的悬浮提示框底部带有可点击的 "快速修复 quick fix" 字样也同样会激活 [代码操作]);

但是对于键盘侠的我们,怎么能忍得了用鼠标点点点呢?可能你已经注意到,无论是在小灯泡提示的 “显示代码操作” 的旁边,还是 “快速修复” 的旁边,其实已经标明了这里要讲的快捷键:command + .;这时候只要我们按下该组合键,可以激活 [代码操作] 待选框。

而在后面的关于[重构]的章节中,我们会更加详细地学习和拓展这个[快速修复]这个功能。

代码操作 Code action

vscode 文档中提到: Code Actions = Quick Fixes and refactorings 即:代码操作是快速修复功能和重构功能;快速修复功能涵盖了许多内容,如导入模块、添加行内 eslint 跳过检查注释等。

# 触发函数参数提示

在使用函数的时候,拼写函数名称或者输入(的时候都会自动提示函数的参数名称和类型,但是我们如果不小心给取消了该怎么办呢,我经常就是删除几个单词重新输入(显而易见:很蠢的方法);

下面我给大家介绍一个快速触发函数参数提示的快捷键: Shift + command + space,很香。

# 触发建议

当我们编码过程中,单词输入一部分之后编辑器vscode会给我们提示,当我们不小心取消的时候,再想找回,还是删除单词重新编写,很费时间;

下面介绍一个快速触发建议的快捷键:command + i。

提示

  • 显示代码操作、触发函数参数提示、触发建议 快捷键最好是在insert模式下使用

  • 如果在normal模式下:

    • 显示代码操作没发现有什么影响
    • 触发函数参数提示必须光标必须在(上,继续编辑还要回到insert模式下,不太方便
    • 触发建议不包含最后一个单词,不好用

# 行操作命令

# 移动行

此处介绍的快捷键:option + up/down(向下移动个或者向上移动一行),因为该快捷键是用vscode提供的,顾在任何模式下都可以使用

当然用vim的方法也可以做到: 使用删除dd,然后使用j/k移动到指定行使用p粘贴,也可以做到移动行; 可以看出使用vim移动行的效率大大不如vscode快捷键方便; 顾移动行操作放弃使用vim的方式,选择使用vscode自带的快捷方式。

# 增加行

我们在前面的vim课程中学习了在normal模式下:在当前行下方增加行快捷键o和在当前行上方增加行快捷键O,并且进入insert模式;

本次课程是vscode快捷键:command + enter在当前行下方增加行,shift + command + enter在当前行上方添加快捷键; 与vim快捷操作不同的是:vscode快捷键不受模式约束,在normal模式、insert模式和visual模式下都生效

# 删除前面的单词

# 删除完整单词

当我们删除光标前单词是使用快捷键option + delete;

提示

  • normal模式: 删除内容不包含光标所在单词
  • insert模式: 删除光标前的一个单

# 按小驼峰分割的单词删除

我们使用给函数或者变量起名的的时候使用小驼峰方式,当我们想以小驼峰分割单词,删除单个单词的时候使用快捷键control + option + delete;

提示

  • normal模式: 删除内容不包含光标所在单词,到小驼峰结束
  • insert模式: 删除光标前的一个单词,到小驼峰结束

# 跳转错误与单词

我们在编码过程中会经常遇到报错,快捷键F8快速定位到报错位置,并切给出错误提示。

提示

该错误提示不受文件限制【作用于整个工作区】,当该文件的错误提示完了,再按F8则会跳转到下一个文件

# 选中所用单词

之前我们在vim课程中学过选中所选单词快捷键:gb,输入一个gb则多选择一个重复单词,当有很多重复单词的时候,使用该方法就不太适合了;

下面介绍vscode提供的一个快捷键:command + F2, 该快捷键可以选中文件中选中的所有相同单词

提示

给文件中全局变量或者函数重命名的快捷键F2

编辑 (opens new window)
#Vim
上次更新: 2025/04/18, 01:42:12
全局搜索命令
vscode挖掘快捷键场景

← 全局搜索命令 vscode挖掘快捷键场景→

最近更新
01
GSAP动画库——如何高效写动画
04-17
02
自适应方案PxToRem
09-10
03
性能优化-requestAnimationFrame
08-10
更多文章>
Theme by Vdoing | Copyright © 2019-2025 备案号:京ICP备19058102号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式