VS Code 介绍-基础使用，常用快捷键及插件

王 茂南
王 茂南
王 茂南
3129
文章
75
评论
2018年8月17日08:27:05
评论2 8859字阅读29分31秒
摘要总结一下 VS Code 常用的快捷键，也是方便自己之后的查找和使用吧。最近在听民国那些事的电台，深感自己现在读书内容很狭隘，需要各种种类的书都看一下，之后有空会分享在这里，也是对自己的一种督促。

前言

这一篇文章介绍一下 VS Code 的一些基础使用的方法，会包括使用 vscode 调试代码，vscode 的常用的快捷键，和 vscode 的常用的插件。VS Code 我自己很常用，在文章Python入门教程[0]–教程说明中，我也是推荐了 VS Code。所以，这一篇，我会介绍一下常用的快捷键，增加使用的效率。

VS Code 介绍-基础使用，常用快捷键及插件

下面是几个我参考的链接：

VS Code 常用快捷键介绍

下面就介绍一下常用的快捷键，就慢慢更新，写一些我自己用到的。

多光标

Alt + 鼠标点击 ：可以进行多光标操作

Alt + Ctrl + Shift + 方向键 (十分推荐)： 如果觉得上面进行鼠标点击太麻烦，可以使用这一种方式，看一下下面演示效果：

VS Code 介绍-基础使用，常用快捷键及插件

Ctrl + D (十分推荐)：点击一次选中当前关键词，点击两次选中两个相同的关键词，并在关键词处有多光标，依次类推（下面gif是摁多次Ctrl + D的结果，做gif帧率调的低了，没能显示出过程）；

VS Code 介绍-基础使用，常用快捷键及插件

Ctrl + D ，Ctrl + F2 ：选中所有相同的关键词，并在关键词处有多光标；

VS Code 介绍-基础使用，常用快捷键及插件

选中一行

ctrl +i ： 选择一行

移动到行尾，行首

ctrl + 方向键(上下左右)：ctrl+右移到行末，其他类比；

 

VS Code 插件介绍

一些通用的插件

拼写检查, SpellRight (十分推荐), VS Code拼写检查插件–SpellRight, 这个和 latex 结合使用十分好。

Excel Viewer (十分推荐), 可以非常方便的查看 csv 文件。这个只能进行预览，不能修改，不过预览的功能已经非常足够了。

VS Code 介绍-基础使用，常用快捷键及插件

Error Lens (十分推荐), 在使用vscode调试的时候, 可以直接将报错显示在文件中. 这样看报错信息真的十分清楚. 包括下面语法检查, 哪些变量没有使用也会直接在代码后面标注出来.

VS Code 介绍-基础使用，常用快捷键及插件

Bracket Pair Colorizer 2 (十分推荐), 对不同的括号使用不同颜色显示, 并有连接线进行显示. 可以看到下图, 不同的括号有不同的颜色显示, 同时点击到一个括号的位置, 会有下标线连接.

VS Code 介绍-基础使用，常用快捷键及插件

indent-rainbow (一般推荐), 可以使得不同的缩进有不同的颜色效果. 大致效果如下所示. 我是因为不喜欢太多的颜色, 所以自己是没有使用的.

VS Code 介绍-基础使用，常用快捷键及插件

Python Docstring Generator (十分推荐), 可以自动帮助我们生成要写的函数的说明的格式. 可以根据我们定义的函数的参数, 和return生成相应的说明的格式.

VS Code 介绍-基础使用，常用快捷键及插件

vscode-icons (十分推荐), 可以是的vscode侧边栏的文件显示有图标. 这个在找文件的时候真的特别特别的方便.

VS Code 介绍-基础使用，常用快捷键及插件

Power Mode (十分推荐), 可以在vscode中出现打字特效. 在安装完毕之后, 需要进入在settings.json中进行编辑, 在最后一行加入"powermode.enabled": true, 进行插件的开启. 如果窗口有出现抖动, 可以在settings.json中添加, "powermode.shakeIntensity": 0. 最后, 不同的可以通过设置来设置不同的效果"powermode.presets": "fireworks". 参考资料, Vscode 打字特效插件Power Mode安装使用说明

下图可以看到, 在打字的时候, 会出现烟花的特效.

VS Code 介绍-基础使用，常用快捷键及插件

Partial diff, 比较两段文本有哪些地方不同. 使用方法为, 选中要进行比较的内容, 右键, 选择进行比较, 或是与之前选择的进行比较.

VS Code 介绍-基础使用，常用快捷键及插件

change-case, 可以将函数名改成不同的格式. 在vscode中, 使用Ctrl+Shift+P, 输入change-case command, 然后选择需要改变的样式即可. 下面是一些可以修改的样式.

VS Code 介绍-基础使用，常用快捷键及插件

 

git commit 模板生成

使用插件，VSCode Git Commit Message (十分推荐) 可以自动生成 commit 的模板。

VS Code 介绍-基础使用，常用快捷键及插件

在使用的时候：首先在 vscode 左侧点击 Message，下图数字 1 的部分；

VS Code 介绍-基础使用，常用快捷键及插件

接着 Ctrl+Alt+Enter，选择一个需要的模板：

VS Code 介绍-基础使用，常用快捷键及插件

最后编辑好 commit 的内容，点击上面图中 2 的钩就可以上传了。

 

自动生成 gitignore 文件-gitignore 插件

通过vscode的插件, gitignore (十分推荐)来完成gitignore文件的生成.

VS Code 介绍-基础使用，常用快捷键及插件

安装完毕之后, 使用Ctrl+Shift+P打开命令, 搜索Add gitignore.

VS Code 介绍-基础使用，常用快捷键及插件

之后选择语言, 进行添加即可.

VS Code 介绍-基础使用，常用快捷键及插件

 

自动生成文件头部注释和函数注释-KoroFileHeader

使用插件 koroFileHeader (十分推荐), 自动生成文件头部注释和函数注释的插件. 这款插件还是国人做的, 也做得非常好, 所以强烈推荐. 详细的文档链接为, koroFileHeader的相关说明文档. 下面简单看一下相关的使用说明.

使用之前需要进行简单的配置. 我们在setting中搜索fileheader, 有如下的显示:

VS Code 介绍-基础使用，常用快捷键及插件

进入设置之后, 我们就可以按照配置文件进行修改, 完整的配置文件说明可以查看链接, 配置字段. 注意修改想要的语言.

关于想要的头部设置, 可以增加如下的配置:

  1. // 头部注释
  2. "fileheader.customMade": {
  3.     // 头部注释默认字段
  4.     "Author": "WANG Maonan",
  5.     "Date": "Do not edit", // 设置后默认设置文件生成时间
  6.     "Description": "",
  7.     "LastEditTime": "Do not edit", // 设置后，保存文件更改默认更新最后编辑时间
  8. },

下面是完整的配置文件, 可以对照着setting文件, 哪里不懂看哪里.

  1. // 头部注释
  2. "fileheader.customMade": {
  3.     // 头部注释默认字段
  4.     "Author": "your name",
  5.     "Date": "Do not edit", // 设置后默认设置文件生成时间
  6.     "LastEditTime": "Do not edit", // 设置后，保存文件更改默认更新最后编辑时间
  7.     "LastEditors": "your name", // 设置后，保存文件更改默认更新最后编辑人
  8.     "Description": "",
  9.     "FilePath": "Do not edit", // 设置后，默认生成文件相对于项目的路径
  10.     "custom_string_obkoro1": "可以输入预定的版权声明、个性签名、空行等"
  11. },
  12. // 函数注释
  13. "fileheader.cursorMode": {
  14.   // 默认字段
  15.   "description":"",
  16.   "param":"",
  17.   "return":""
  18. },
  19. // 插件配置项
  20. "fileheader.configObj": {
  21.     "autoAdd": true, // 检测文件没有头部注释，自动添加文件头部注释
  22.     "autoAddLine": 100, // 文件超过多少行数 不再自动添加头部注释
  23.     "autoAlready": true, // 只添加插件支持的语言以及用户通过`language`选项自定义的注释
  24.     "supportAutoLanguage": [], // 设置之后，在数组内的文件才支持自动添加
  25.    // 自动添加头部注释黑名单
  26.    "prohibitAutoAdd": [
  27.       "json"
  28.     ],
  29.     "prohibitItemAutoAdd": [ "项目的全称禁止项目自动添加头部注释, 使用快捷键自行添加" ],
  30.     "wideSame": false, // 头部注释等宽设置
  31.    "wideNum": 13,  // 头部注释字段长度 默认为13
  32.    // 头部注释第几行插入
  33.     "headInsertLine": {
  34.       "php": 2 // php文件 插入到第二行
  35.     },
  36.     "beforeAnnotation": {}, // 头部注释之前插入内容
  37.     "afterAnnotation": {}, // 头部注释之后插入内容
  38.     "specialOptions": {}, // 特殊字段自定义
  39.     "switch": {
  40.       "newlineAddAnnotation": true // 默认遇到换行符(\r\n \n \r)添加注释符号
  41.     },
  42.     "moveCursor": true, // 自动移动光标到Description所在行
  43.     "dateFormat": "YYYY-MM-DD HH:mm:ss",
  44.     "atSymbol": "@", // 更改所有文件的自定义注释中的@符号
  45.     "atSymbolObj": {}, //  更改单独语言/文件的@
  46.     "colon": ": ", // 更改所有文件的注释冒号
  47.     "colonObj": {}, //  更改单独语言/文件的冒号
  48.     "filePathColon": "路径分隔符替换", // 默认值： mac: / window是: \
  49.      "showErrorMessage": false, // 是否显示插件错误通知 用于debugger
  50.     "CheckFileChange": false, // 单个文件保存时进行diff检查
  51.     "createHeader": true, // 新建文件自动添加头部注释
  52.     "useWorker": false, // 是否使用工作区设置
  53.     "typeParam": true, // 选项用于控制函数注释参数是否需要{type}, 默认需要
  54.     "designAddHead": false, // 添加注释图案时添加头部注释
  55.     "headDesignName": "random", // 图案注释使用哪个图案
  56.     "headDesign": false, // 是否使用图案注释替换头部注释
  57.      // 自定义语言注释符号，覆盖插件的注释格式
  58.     "language": {
  59.         "java": {
  60.             "head": "/$$",
  61.             "middle": " $ @",
  62.             "end": " $/"
  63.         },
  64.        // 一次匹配多种文件后缀文件 不用重复设置
  65.        "h/hpp/cpp": {
  66.           "head": "/*** ", // 统一增加几个*号
  67.           "middle": " * @",
  68.           "end": " */"
  69.         },
  70.         // 针对有特殊要求的文件如：test.blade.php
  71.         "blade.php":{
  72.           "head": "<!--",
  73.           "middle": " * @",
  74.           "end": "-->",
  75.         }
  76.     },
  77.  // 默认注释  没有匹配到注释符号的时候使用。
  78.  "annotationStr": {
  79.       "head": "/*",
  80.       "middle": " * @",
  81.       "end": " */",
  82.       "use": false
  83.     },
  84. }

设置好配置文件之后, 我们摁住Ctrl+Shift+P, 选择fileheader即可.

VS Code 介绍-基础使用，常用快捷键及插件

最后的效果如下所示:

VS Code 介绍-基础使用，常用快捷键及插件

 

Python 代码格式化

使用 yapf 来对 Python 代码进行格式话. 首先安装 yapf：

  1. pip install yapf

接着在vscode中, 依次点击, File—Preferences—Settings. 接着搜索框中搜索python.formatting.provider, 之后选择yapf即可.

VS Code 介绍-基础使用，常用快捷键及插件

之后, 选择要格式话的文本, 右键选择Format Selection即可. 我们也可以对整个文本进行格式话, 选择Format Document即可.

VS Code 介绍-基础使用，常用快捷键及插件

 

特殊功能的插件

hexdump for vscode：用来查看二进制文件

VS Code 介绍-基础使用，常用快捷键及插件

Graphviz Interactive Preview: 用来预览dot文件.

我们可以对生成的dot文件进行修改, 首先下载VS Code插件, Graphviz Interactive Preview. 这个插件可以预览dot文件的信息. 安装完毕之后, 使用Ctrl+Shitf+P, 打开命令, 输入Graphviz Interactive即可.

VS Code 介绍-基础使用，常用快捷键及插件

之后我们的dot文件就能够可视化进行显示:

VS Code 介绍-基础使用，常用快捷键及插件

 

VS Code 调试 Python 代码 (DEBUG)

下面会介绍使用 VS Code 来进行 Python 代码的调试。在调试别人的代码的时候，debug 会是一个帮助我们快速上手的方式。

设置 DEBUG 的配置文件

首先点击 VS Code 左侧，打开Run and Debug，第一次需要创建一个 launch.json 的文件，这个文件会生成在 .vscode 目录下，

VS Code 介绍-基础使用，常用快捷键及插件

生成的 launch.json 文件格式如下所示，最后两行是我新增的：

  1. {
  2.     // Use IntelliSense to learn about possible attributes.
  3.     // Hover to view descriptions of existing attributes.
  4.     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  5.     "version": "0.2.0",
  6.     "configurations": [
  7.         {
  8.             "name": "Traffic Classification",
  9.             "type": "python",
  10.             "request": "launch",
  11.             "program": "${file}",
  12.             "console": "integratedTerminal",
  13.             "stopOnEntry": true,
  14.             "envFile": "${workspaceFolder}/.vscode/dev.env",
  15.             "justMyCode": true
  16.         }
  17.     ]
  18. }

下面解释一下上面的配置文件：

  • name， 当前 DEBUG 配置的名称；
  • type， 指什么语言；
  • request，它能选择两种类型，一个是 launch 模式，一个是 attach 模式：
    • launch模式：由 VS Code 来启动一个独立的具有 debug 功能的程序；
    • attach模式：监听一个已启动的程序（其必须已经开启 debug 模式）；
    • 大多数情况下，调试 Python 都是用 launch 模式。少数情况下，你无法通过新建独立程序来调试（如要与浏览器相结合的程序，launch 模式会导致你大部分浏览器插件失效），这时候就需要 attach 模式。
  • program: 调试文件的绝对路径，默认就是选中哪一个文件，就是对哪一个文件进行调试；
  • stopOnEntry，在进入程序的时候就执行停止，相当于在程序的第一行就放置了断点；这个设置为 True 会便于我们进行调试；
  • envFile，添加额外的 python path 到项目中去。我们会将额外的路径写在文件 dev.env 中，之后在该配置文件中引用即可。
  • justMyCode，是否进入第三方库的源码进行调试。这个选择默认是 true，这个时候是无法进入第三方库进行调试的。只有改成 false 才可以进入第三方库进行调试。

 

开始调试-设置断点，单步调试，查看变量

我们在点击 DEBUG 模式下，绿色的按钮开始进行调试，

VS Code 介绍-基础使用，常用快捷键及插件

之后会在最上面出现下面的 6 个按钮：

VS Code 介绍-基础使用，常用快捷键及插件

这 6 个按钮的含义分别如下所示：

  • 按钮1：运行/继续 F5，在断点处会停止；
  • 按钮2：单步跳过(又叫逐过程) F10，按语句单步执行。当有函数时，不会进入函数。
  • 按钮3：单步调试（又叫逐语句） F11：当有函数时，点击这个按钮，会进入这个函数内。
  • 按钮4：单步跳出 Shift+F11:如果有循环，点击该按钮，会执行到循环外面的语句。
  • 按钮5：重启 Ctrl+Shift+F5：
  • 按钮5：停止 Shift+F5：

我们可以在一行的左侧，打断点，程序会在断点处停止：

VS Code 介绍-基础使用，常用快捷键及插件

开始调试之后，在左侧就可以看到变量的一些信息了。

VS Code 介绍-基础使用，常用快捷键及插件

 

交互型调试

除了上面在调试过程中，查看变量，我们可以点击下面的「DEUBUG CONSOLE」来进行可交互型调试，可以查看已经运行的一些函数，和打印变量。

VS Code 介绍-基础使用，常用快捷键及插件

 

添加额外的 Python Path 到项目

有的时候，因为我们运行的文件的目录不正确，会出现 ModuleNotFoundError 的错误，如下所示：

VS Code 介绍-基础使用，常用快捷键及插件

这个时候需要将是本项目要使用到的一些包添加到 Python 的环境里。这里使用加载 env 文件的方式进行，它在编辑器的检查和运行时都生效的方式。

首先，在.vscode目录下建一个 dev.env 文件，这个文件其实可以在任何地方，但为了统一管理，最好是和 launch.json （这个配置文件是在 debug 的时候生效）和 setting.json （这个配置文件是在编写 python 代码的时候生效）放一起。内容如下，是一个完整的路径：

  1. PYTHONPATH = "D:\\Traffic-Classification"

之后在 launch.json 文件夹内，添加下面的一行（我们在最上面的 json 文件中已经进行了添加），

  1. "envFile": "${workspaceFolder}/.vscode/dev.env"

之后我们可以在 .vscode 目录下，新建一个 setting.json 文件夹，写入下面的内容：

  1. {
  2.     "python.autoComplete.extraPaths": ["${workspaceFolder}"],
  3.     "python.analysis.extraPaths": ["${workspaceFolder}/.vscode/dev.env"],
  4.     "python.envFile": "${workspaceFolder}/.vscode/dev.env"
  5. }

这个时候就可以正常进行调试了，所有的 packet 也可以被正常的 import 了。下面是 .vscode 文件夹下的三个文件，为了方便这三个文件都可以放在这个项目的文件中。

VS Code 介绍-基础使用，常用快捷键及插件

参考资料

 

VS Code 完成 Python 代码自动测试 - 结合 pytest 的使用

这一部分参考自, Python testing in Visual Studio Code. 这里有一份中文的说明也可以参考, 用 VS Code 进行 Python 单元测试.

在使用 vscode 的时候, 当安装了 Python 的插件之后, 我们就可以进行单元测试了. 首先打开setting.json 文件, 在里面添加下面的设置 (需要确保pytest是安装的)

  1. "python.testing.pytestEnabled": true,

之后返回主界面, vscode会自动检测出所有文件名有test_的文件, 包括里面的测试函数. 我们可以每一个单独进行测试, 测试通过之后会有绿色的小勾.

VS Code 介绍-基础使用，常用快捷键及插件

同时测试函数的上面也有快捷按钮, 可以点击进行测试.

VS Code 介绍-基础使用，常用快捷键及插件

 

VS Code与Jupyter Notebook结合

我们在vscode的任意位置, 输入#%%即可对某个位置直接进行运行.

VS Code 介绍-基础使用，常用快捷键及插件

现在 vscode 已经可以直接打开 jupyter notebook 了。当安装好 Python 插件最新版后，使用快捷键 Ctrl+Shift+P 调出 Command Palette，然后输入 "Python: Create New Blank Jupyter Notebook" ，就能创建一个新的 Jupyter Notebook。

 

VS Code 对比文件

VSCode 可以比较两个文件的差异。首先将两个文件放在同一个文件夹下，打开项目。接着选中一个文件，右键选择「Select for Compare」：

VS Code 介绍-基础使用，常用快捷键及插件

接着选中另外一个等待比较的文件，右键点击「Compare with Selected」：

VS Code 介绍-基础使用，常用快捷键及插件

最后就可以看到两个文件的差异，差异的地方被高亮出来了。

VS Code 介绍-基础使用，常用快捷键及插件

 

VS Code 的同步

当我们更换电脑的时候，我们希望我们的 VS Code 的设置也可以自动同步。这个时候就可以点击右下角，登陆账号之后，即可对 VS Code 自定进行同步了。

VS Code 介绍-基础使用，常用快捷键及插件

 

VS Code 使用可能遇到的问题

关于 VSCode 使用 tab 无法缩进问题

点击File-->Preferences-->Key board shortcuts页面中点击打开 keybindings.json 文件，把所有的内容进行注释。可以点击下面的按钮进行 json 格式的文件。

VS Code 介绍-基础使用，常用快捷键及插件

接着在 setting 中搜索 Detect Indentation，取消勾选这一项即可。

VS Code 介绍-基础使用，常用快捷键及插件

参考链接: vscode tab不能缩进

 

消除 Import [module] could not be resolved in Pylance

有的时候如果是自己的安装包，会出现警报 Import [module] could not be resolved in Pylance，我们可以手动将项目路径设置在 VSCode 里面。

首先打开设置，搜索 python.analysis.extraPaths，然后点击「添加项」，输入项目地址即可：

VS Code 介绍-基础使用，常用快捷键及插件

 

结语

上面是一些关于 VS Code 的使用方式。之后关于 VS Code 的相关内容，我也是都会补充在这一篇文章中，包括一些新的快捷键和新的插件。

  • 微信公众号
  • 关注微信公众号
  • weinxin
  • QQ群
  • 我们的QQ群号
  • weinxin
王 茂南
  • 本文由 发表于 2018年8月17日08:27:05
  • 转载请务必保留本文链接：https://mathpretty.com/9488.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: