如何在VSCode中同步代码到github (on Mac)

在VSCode中使用git,将本地code提交到github,这本是一件非常容易的事情,就像你在本地开发,然后将代码同步到github上面一样,可是我几乎没往github提交过代码,虽然会在上面查问题,[打脸][打脸][打脸][打脸][打脸]。

先在VSCode中初始化一个本地Repo,这个Repo就会存放从github pull 下来的代码,怎么创建呢?先点出最左侧导航栏的分支图标,在『源代码管理』的后面有个git的logo,点下就会出现了:

我这里创建的Repo名字:testVSCodeSynchr
先添加远程仓库:

git remote add origin https://github.com/stanbers/git-tutorial

再去把这个远程的仓库pull到local:

git pull origin master

这个时候看下本地有没有远程仓库中的README.md(我的远程仓库中目前只有这一个文件):

➜  testVSCodeSynchr git:(master) ls -al
total 8
drwxr-xr-x   4 Stan  staff   136 11 28 15:25 .
drwx------+ 30 Stan  staff  1020 11 28 15:22 ..
drwxr-xr-x  13 Stan  staff   442 11 28 15:26 .git
-rw-r--r--   1 Stan  staff   179 11 28 15:25 README.md

可以看到已经pull下来了,把这个文件update 一下:

➜  testVSCodeSynchr git:(master) git status
On branch master
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   README.md

no changes added to commit (use "git add" and/or "git commit -a")
➜  testVSCodeSynchr git:(master) ✗

其中添加了一句『coded in my local』,然后提交:

➜  testVSCodeSynchr git:(master) ✗ git add .
➜  testVSCodeSynchr git:(master) ✗ git commit -m 'update in my local'
[master d4c1b12] update in my local
 1 file changed, 2 deletions(-)
➜  testVSCodeSynchr git:(master)

再去push到github:

➜  testVSCodeSynchr git:(master) git push origin master
Counting objects: 3, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 269 bytes | 0 bytes/s, done.
Total 3 (delta 1), reused 0 (delta 0)
remote: Resolving deltas: 100% (1/1), completed with 1 local object.
To https://github.com/stanbers/git-tutorial
   834d1ea..d4c1b12  master -> master
➜  testVSCodeSynchr git:(master)

这个时候去刷新一下github,不出意外就可以看到更新的内容了:

没毛病,这时候在github上面更新这个README.md, 添加一行『coded in github』,然后再到VSCode中去重新pull下,不出意外应该也可以看到刚才github上面更新的那一行内容:

没毛病,实现了同步,以上都是直接通过命令行来完成的,可以看到我安装了oh my zsh。

在使用 Visual Studio Code(简称 VSCode)进行开发时,代码片段(Snippets)功能可以显著提升编码效率。通过配置自定义代码片段,可以快速插入常用的代码模板,避免重复书写相同的代码结构。以下是 VSCode代码片段的使用和配置方法: ### 配置用户代码片段 1. 打开 VSCode,使用快捷键 `Ctrl + Shift + P`(Windows/Linux)或 `Cmd + Shift + P`(Mac)打开命令面板[^4]。 2. 输入命令 `Preferences: Configure User Snippets`,选择该命令后,可以选择全局配置或针对特定语言进行配置。 3. 如果选择特定语言(例如 Vue),VSCode 会自动生成一个以该语言扩展名为后缀的 JSON 文件(如 `vue.json`),用于存储该语言的代码片段定义。 4. 在 JSON 文件中,可以定义多个代码片段。每个代码片段包含以下关键字段: - `prefix`:触发代码片段的关键词。 - `body`:代码片段的具体内容,支持多行文本。 - `description`:代码片段的描述,用于提示用户。 ### 示例:Vue 3 模板代码片段 以下是一个用于生成 Vue 3 模板结构的代码片段配置示例,通过输入关键词 `vue3` 并按下回车键即可快速生成模板代码: ```json { "Print vue3 template": { "prefix": "vue3", "body": [ "<template>", "</template>", "", "<script lang=\"ts\" setup>", "</script>", "", "<style lang=\"scss\" scoped>", "</style>" ], "description": "生成 Vue 3 的默认模板结构" } } ``` 上述配置将生成一个包含 `<template>`、`<script>` 和 `<style>` 标签的基本 Vue 3 文件模板,适用于使用 TypeScript 和 SCSS 的项目[^3]。 ### 使用代码片段 1. 在编辑器中打开一个文件,输入代码片段的触发关键词(例如 `vue3`)。 2. 从自动提示列表中选择对应的代码片段,或直接按下回车键。 3. 代码片段会自动插入到当前文件中,并且可以使用 Tab 键在预设的占位符之间切换,方便快速修改。 ### 自定义代码片段的优势 - **提升开发效率**:通过代码片段功能,可以快速插入常用代码结构,减少重复劳动。 - **减少错误**:使用预设的代码模板,避免手动输入时可能出现的语法错误。 - **统一代码风格**:团队协作中,通过共享代码片段配置,可以确保代码风格的一致性。 通过合理配置和使用代码片段,可以在日常开发中节省大量时间,尤其是在编写固定结构的代码时(如 Vue 文件模板、函数定义等)。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值