VSCode Vue3.x 项目Git版本控制(Gitblit仓库),常用快捷键、插件、及VSCode中文化
编者: wRitchie(吴理琪) 来源:http://www.bj9420.com
概述:作为一个团队开发的项目,版本管理是必备的,本文主要在VSCode使用Git版本控制工具,Git版本服务器搭建采用的是Gitblit,服务器的搭建可参见《CentOS使用Gitblit快速搭建git服务器》。附带常用的几个快捷键,常用的插件,以及VSCode开发工具的中文化。
一、 Git(gitblit)仓库版本管理
1、登录gitblit服务器,形如: http://bj9420.com:10101/
2、版本库->创建版本库
![d8b7cb24d2052747f8f4ca5eb70cf3ba.png](https://i-blog.csdnimg.cn/blog_migrate/5787b103aad4d672218a6f7c41a27e3a.jpeg)
3、输入项目名称
![19ae8af0e69325fb31d23a9d538ede29.png](https://i-blog.csdnimg.cn/blog_migrate/f80dda7a1a1eaeea6789d8f50356b5de.jpeg)
4、点击创建
![2a0c9e2994cf86d0d2bd646a09c8e28f.png](https://i-blog.csdnimg.cn/blog_migrate/6949d28b58210ecb761d273216e8e829.jpeg)
5、复制URL,形如http://writchie@bj9420.com:10101/r/bj9420.git
6、打开VSCode 开发工具,点击"文件",选择"打开项目文件夹"
![a9528e996189bca5b9e06aef93a65e2c.png](https://i-blog.csdnimg.cn/blog_migrate/7a0dccbf7ec6c631c0f4ef4ac8fb7d24.jpeg)
7、选择项目文件夹
![bf607593d296b6ade9712509778e6b82.png](https://i-blog.csdnimg.cn/blog_migrate/0697935f8f438c8cd88a800d3e764deb.jpeg)
8、在终端中,可使用git命令
![22c1052970b7543390f245f19a784345.png](https://i-blog.csdnimg.cn/blog_migrate/71f6b266a17d6ee113d39f09dae04e06.jpeg)
#A:初始化本地库(会生成 .git 文件)
git init
![3a8f6359f8ab77506f955ddb6af4e4b8.png](https://i-blog.csdnimg.cn/blog_migrate/39afb974cedd024f7489de19ac81c7da.jpeg)
#B:关联远程gitblit仓库
#(粘贴复制URL,如http://writchie@bj9420.com:10101/r/bj9420.git)git remote add origin +仓库地URL地址
![f8e244d004d36d0b346f2f044baa95f0.png](https://i-blog.csdnimg.cn/blog_migrate/5a2745594e49fec65946086169868e1c.jpeg)
#C:填邮箱
git config --global user.email "wRitchie@bj9420.com"
![5b8cb76bf2473675b9c7c206fbfa8d58.png](https://i-blog.csdnimg.cn/blog_migrate/d577b9637bc3aea2cdf2e064f557e12e.jpeg)
#D:填用户名(至止.git文件夹中就有账户、邮箱等连接信息)
git config --global user.name "bj9420"
![225aa60d5c91e5e167dbba189e46f61c.png](https://i-blog.csdnimg.cn/blog_migrate/a0446e28fe33304a945736b8986d2920.jpeg)
#E:查看状态
git status
![d548a0ec677717225e212eecf4d34afe.png](https://i-blog.csdnimg.cn/blog_migrate/21363ff3341b94d21eb2052003efa1f1.jpeg)
#F跟踪所有改动过的文件
git add .
![71428c324a9ccea872a66fe745e1e766.png](https://i-blog.csdnimg.cn/blog_migrate/ab264f0e8b2260a70dbff8a03e4af4a9.jpeg)
#G:提交所有更新过的文件
git commit -m "init project"
![c8cfd20e9fe3f61bb7f956a758668647.png](https://i-blog.csdnimg.cn/blog_migrate/a13d5419d6df4d81d25de8436397c0c8.jpeg)
#H:上传代码至远程master主分支
git push -u origin master
![cbb263899f93bf8bbbae650984a8531c.png](https://i-blog.csdnimg.cn/blog_migrate/9940a9e7122bdd89114f5d342f329921.jpeg)
或直接git push
![736b880f12a6457df5c6d8f718b15b3d.png](https://i-blog.csdnimg.cn/blog_migrate/48f32de658b28cdef02cfb589b2c7274.jpeg)
注:根据提示输入gitblit用户密码。
这样,基本完成了在VSCode中,项目代码用DOS命令的版本管理,最后增代码的变化,在Git的管理就是重复F、G、H三步骤。
附:DOS命令提交外,也可以使用VSCode图形界面工具完成部分步骤
1、点击右侧Source Control图标,在Changes下,列表所有变化的代码文件
![fb7d15ba8d7929d9e6b16b1a782c9924.png](https://i-blog.csdnimg.cn/blog_migrate/643f38404be68d21ad6d0f656f3787cc.jpeg)
2、点击commit,即√
![8cb9924bdf5cbc59770fe0b4e186adfa.png](https://i-blog.csdnimg.cn/blog_migrate/6366a5d7a9e1d345e082811748c52806.jpeg)
3、弹出提示
![01a82590acbc2fe84e822207ff1cb0c2.png](https://i-blog.csdnimg.cn/blog_migrate/befa11713b9ac2839d685501381be4c8.jpeg)
4、点击Yes,在顶部输入提交的注释
![57831c0cf62231a586aebdb804edb0fe.png](https://i-blog.csdnimg.cn/blog_migrate/c560600a71ab533910d9959767419fce.jpeg)
5、回车,即完成代码的提交,但要提交到远程Gitblit的Git仓库,还是需要使用命令来完成
git push
三、 常用快捷键
格式化代码:alt+shift+f
代码行注释:ctrl+/
代码块注释:alt+shift+a
复制一行:alt+shift+↓
整行代码下移:alt+↓
整行代码上移:alt+↑
三、 常用插件
1、中文插件:Chinese (Simplified) Language Pack for Visual Studio Code
中文插件安装后,切换可用快捷键ctrl+shit+p,输入lang,在下拉中选择Configure Display Language
![c01d1a4351c462aec79bea6516924d38.png](https://i-blog.csdnimg.cn/blog_migrate/9770c4c10ae3e6ee76faff00c28f4462.jpeg)
点击Configure Display Language,弹出语言选择
![053e5db39616b4ee6f5ef41c96bcaf1b.png](https://i-blog.csdnimg.cn/blog_migrate/9c540b2b3c0b68ea894e73c726bc0dce.jpeg)
弹出提示重启
![e5b02a90186c9cfaa43a45a154ce7b89.png](https://i-blog.csdnimg.cn/blog_migrate/dbfb4fba23f244f47e8294e420394bc8.jpeg)
重启后即生效
![700b9af091387f57527ccb8aba85d9c9.png](https://i-blog.csdnimg.cn/blog_migrate/a7be92f8797293e41fbaf3379c3ce108.jpeg)
2、Vue相关插件
Vue tooling for VS Code
Vue VSCode Extension Pack
VueHelper
四、 yarn和npm命令对比
![86a9d38f53ff58e3e53c36bc927f0530.png](https://i-blog.csdnimg.cn/blog_migrate/405dd0ee9aeacc9a271aeca16af1a5f1.jpeg)
![d231c4fef519ac218e24b9ec4f36aecc.png](https://i-blog.csdnimg.cn/blog_migrate/3c818a2d6f1502193a29730e713d57f4.jpeg)