vscode代码详解(万字长文把VSCode打造成)

您所在的位置:网站首页 深圳北火车站服务台电话 vscode代码详解(万字长文把VSCode打造成)

vscode代码详解(万字长文把VSCode打造成)

2023-03-24 18:04| 来源: 网络整理| 查看: 265

注:本文列举的是如何在 VSCode 中使用 git,但还是要求开发人员对 git 的命令比较熟悉,VSCode 仅仅是省去了你敲命令的工作,但并不代表如果你不懂 git 就能上手,毕竟下面中菜单列出的选项都是和 git 知识强相关的。注:VSCode 中所有的 git 功能你也可以不用,所有操作使用 git 命令行进行也可以,随你的习惯。笔者 git 日常工作基本全在 VSCode 中进行了。注:VSCode 暂不支持 git clone 自动拉去仓库,因此是需要先手动执行命令行 git clone 下仓库到本地目录中,才能使用 VSCode 进行后续 git 操作。

(1)暂存更改

vscode代码详解(万字长文把VSCode打造成)(25)

暂存更改可以指定某个文件按 暂存,可一个全选,按图中的加号。

(2) 提交暂存、推送、拉取等功能

vscode代码详解(万字长文把VSCode打造成)(26)

签出到主要是首次使用 git 命令 glone 仓库下,用 VSCode 打开后这里不会展示分支名,而是一个一个 commitid,所以要收到签出到对应的分支名,一般来说都是迁出到 master。如上图。

(3) 切换分支、拉取分支

vscode代码详解(万字长文把VSCode打造成)(27)

等等 git 的各种功能都在 VSCode 中有所集成。

上述仅列举了常用高频操作,很多功能需要自行探索。

4.4.4 git 相关其他插件GitLens它会显示有 git 有关的所有代码提交信息,是在 sidebar 上的二叉树图标

vscode代码详解(万字长文把VSCode打造成)(28)

Git Branch WarningsGit Branch Warnings 比较有意思,当你切到 master 分支上时会在最下面的状态栏和弹窗提示。以防你误切 master 分支需要在 User Setting 上加一行配置:【】里是你想提醒的分支

"branchwarnings.protectedBranches": [ "master" ]

vscode代码详解(万字长文把VSCode打造成)(29)

git graph

它会显示有 git 有关的所有代码提交信息,可以方便查看本地分支、远程分支、主干的 commit、push、pull 情况,尤其在版本提测、提发时确认分支代码是否提交很有帮助;具体功能需自行探索,只能说很强大。

vscode代码详解(万字长文把VSCode打造成)(30)

Git (Submodule) Assistant

有些工程使用 submodule 方式引入其他库。如果想在 VSCode 的 git 也能自动拉取这些 submodule 的代码,则需要该插件,对于看代码会十分方便。git 默认是不拉取 submodule 的;

以腾讯开源的 tarscpp 框架为例:https://github.com/TarsCloud/TarsCpp.git

git clone 到本地后(clone 时可不需要--recursive 选项),通过 VSCode 打开后,Git (Submodule) Assistant 插件会自动识别并下载所有 submodule。当然如果你账户没有权限 clone 子模块,则会下载失败,会有详细提示。

vscode代码详解(万字长文把VSCode打造成)(31)

上图中的红框圈起来的目录均为子模块,可以看到右侧还有个s(submodule)的标志。直接 git clone 工程时本地是不会 pull 这些 submodules 的。安装该插件后可以自动下载。

4.5. 其他提高效率的插件(可选)(1) 自动识别文件编码(必做)

针对不同编码的文件,VSCode 也能自动识别。

"files.autoGuessEncoding": true,

(2) 安装图标、颜色主题

推荐使用material icon theme主题,它提供的文件图标比较漂亮。推荐使用solarized Light颜色主题。更多主题可以通过 VSCode 右下角的颜色主题和文件图标主体来选择更多:

vscode代码详解(万字长文把VSCode打造成)(32)

之后可以选择喜欢的主题。本小节推荐的主题和颜色主题均可以在 sidebar 的 extensions 中下载。

(3) 缩小小地图

VSCode 自带的小地图太宽,写代码时太占用可编辑区域,所以可以调小

"editor.minimap.maxColumn": 40,

(4) 字符分割

editor.wordSeparators,是指在写代码时,VSCode如何区分每个词(token)。加入以下设置,在双击选中一串字符序列时,VSCode就会依此来区分词,此配置包含了很多中文字符。

"editor.wordSeparators": "`~!@#$%^&*()-= [{]}\\|;:'\",./?·~!¥…()—【】、;:‘’“”,。《》? ",

(5) 让标题能够显示完整的文件路径名

有时候代码中有些项目文件名相同,默认的标题只显示文件名,看不出是哪个目录的,最好设置让他全显示

"window.title": "${dirty}${activeEditorLong}${separator}${rootName}${separator}${appName}",

(6) 括号通过不同颜色区分

安装Bracket Pair Colorizer2插件,会通过不同颜色来展示匹配的括号,这样代码不容易遗漏括号。

vscode代码详解(万字长文把VSCode打造成)(33)

例如上图中if有多重括号,分别用蓝色和黄色标记,这样很容易看出代码有没有遗漏括号

(7) 展示对齐层级深度

安装Indenticator插件,会将同一级的深度用竖线对齐展示,这样很容易看出来块结构,比如下图中就for语句块内的代码就有一条竖线,而内部的if和else则分别还有一条竖线。这些竖线只是帮助你看代码更容易。上一小节的截图中外层 if、内层 if 间都有竖线,便于观察

(8) 移动控制栏的位置

由于编辑的习惯,右手持鼠标时,最好把控制栏也放置到右边,这样操作控制栏时头和眼睛不用来回转。

"workbench.sideBar.location": "right",

vscode代码详解(万字长文把VSCode打造成)(34)

(9) 移动全局搜索框的位置

vscode 老版本的全局搜索框是放在 sidebar 上的,和 git、扩展等并列,新版本后,放在了底部,官方理由是搜索结果视野更加宽阔,不过不太习惯,可以配置成老板的方式。选择 sidebar,而不是 panel:

vscode代码详解(万字长文把VSCode打造成)(35)

vscode代码详解(万字长文把VSCode打造成)(36)

(10) 自动删除文件行尾空格

写代码时,免不了会导致文件行尾出现很多空格,该命令可在文件保存时,自动去掉行尾所有空格。

"files.trimTrailingWhitespace": true,

该命令还可配合插件Trailing Spaces,该插件会将行尾空格高亮。

vscode代码详解(万字长文把VSCode打造成)(37)

(11)TabNine

TabNine 是一个智能的代码自动补全工具。最重要的是,零配置,开箱即用(不用购买 license,也可以使用)。

(12)terminal

terminal 是一个能够在 vscode 内自动打开终端命令该行的插件,大家可以尝试。

(13) 项目管理

当 VSCode 打开多个项目时,默认是每个项目开 1 个窗口,所以会导致窗口较多,通过安装插件Project Manager来管理,可以只打开 1 个小窗口。

安装插件后,在每个工程中窗口中,Ctrl Shift P,输入 Project Manager Save Project ,意思是将当前工程命名成 1 个 project,它会默认取当前根目录的文件名为 project name。我们采用默认方式即可。

vscode代码详解(万字长文把VSCode打造成)(38)

注意 当你想把这些窗口都放置到 1 个窗口中时,需要再每个窗口都执行 1 次。不过也仅 1 次。执行完成后,会在 sidebar 上生成 1 个文件夹图标,点击后,会出现你刚才Save Project的所有项目,通过这里切换即可。

(14) VIM 插件

喜欢 VIM 的可以下载 vim 插件。

(15) 安装字体相关插件(可忽略)

字体可以选择自己喜欢的,我推荐 source code pro 等宽字体。可从 google 搜索 source code pro 关键字下载。首选项中配置,我这里指定了多个字体,VSCode 会优先使用最前面的。找不到的话使用后面的。

"editor.fontFamily": "'Source Code Pro', Consolas, 'Courier New', monospace",

(16) 安装 shellman 脚本模板

shellman 插件本质上是个插件模板。shell 的语法格式比较多,有时候多个空格,少个空格,就不能用了。对于不会经常写 shell 的人来说,每次写 shell 可能都要靠谷歌写 shell。shellman 自带各种模板,很省心。

5. 附上我的 User Settings.json

{ "editor.fontSize": 13, "editor.minimap.maxColumn": 40, "editor.wordSeparators": "`~!@#$%^&*()-= [{]}\\|;:'\",./?·~!¥…()—【】、;:‘’“”,。《》? ", "editor.fontFamily": "'Source Code Pro', Consolas, 'Courier New', monospace", "editor.suggest.localityBonus": true, "window.title": "${dirty}${activeEditorLong}${separator}${rootName}${separator}${appName}", "window.zoomLevel": 1, "window.titleBarStyle": "custom", "workbench.iconTheme": "material-icon-theme", "workbench.colorTheme": "Solarized Light", "workbench.sideBar.location": "right", //"git.path": "D:\\Program Files\\Git\\cmd\\git.exe", "git.path": "/usr/bin/git", "git.autofetch": true, "git.ignoreMissingGitWarning": true, "git-assistant.checkConfigVariables": "disabled", "git-assistant.pushBeforeClosingIDE": "disabled", "diffEditor.ignoreTrimWhitespace": false, //"terminal.integrated.shell.windows": "C:\\windows\\System32\\cmd.exe", "http.proxy": "http://公司代理地址IP:端口/", "http.proxyStrictSSL": false, "files.trimTrailingWhitespace": true, "files.autoGuessEncoding": true, "files.watcherExclude": { "**/.git/objects/**": true, "**/.git/subtree-cache/**": true, "**/node_modules/*/**": true }, "C_Cpp.updateChannel": "Insiders", "C_Cpp.default.intelliSenseMode": "gcc-x64", "C_Cpp.default.includePath": [ "/usr/include", "/usr/local/include", "${workspaceFolder}/**" ], "terminal.integrated.fontFamily": "Hack Nerd Font", "terminal.integrated.fontSize": 14, }

6. 附上我的插件列表

vscode代码详解(万字长文把VSCode打造成)(39)

7. 常见问题

Q:VSCode 不知道为啥一直提示未找到 xxx 的任何定义,之前都是好好的,[流泪],CTRL 左键或者 F12 都不能跳转。A:VSCode_cpptools 插件官网有更新,需要重新执行 3.1 操作,下载最新版,更新插件。https://github.com/Microsoft/VSCode-cpptools/releases

Q: VSCode 在 windows10(7)、linux、mac 上体验如何?A:VSCode 在 win 上使用时,主要受限于 git 是,操作较慢,且对于 C 的系统库文件跳转无法正常解析,还需另外通过 wsl 或者安装其他工具来设置,但在 linux、mac,则可以使用系统自带的 git 和系统库,系统库文件跳转容易很多,且 git 速度很快。

,


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3