Mac中安装VS Code并配置git, heroku步骤以及遇到的问题

Posted 2021-03-15 steward-sun

• 1.创建第一个VS Code项目

1. 安装好VS Code, git, heroku以及heroku账号以后，在本地创建文件夹路径命名为项目名。
2. 打开Visual Studio Code并通过单击左上角的“ Explorer”图标（看起来像两个文件）来打开目标文件夹，以展开左侧的“ Explorer”窗格。 您应该看到一个“打开文件夹”按钮-单击此按钮，然后选择到新创建的文件夹。
3. 现在，您会在侧边栏中看到一个空的目标文件夹。 要在此文件夹中开始构建我们的应用，我们必须在Visual Studio Code的“集成终端”中发出一些命令。 要打开此窗口，请使用键盘快捷键（ctrl +`）或从顶部菜单中选择“查看”->“集成终端”。

4. 键入命令npm init并输入以下信息：

   按Enter键输入名称（使用默认值）
   按Enter键获取版本（使用默认值）
   按Enter键进行描述（使用默认值）
   输入server.js作为入口点：
   按Enter键以测试命令（使用默认值）
   按Enter进入git仓库（使用默认值）
   按Enter键输入关键字（使用默认值）
   输入您自己的作者姓名：
   按Enter键获取许可证：（使用默认值）
   最后，按Enter接受您的输入，确定

5. 这将在helloworld文件夹下创建一个package.json文件。 这将有助于我们稍后管理依赖关系，并且始终是创建node.js应用程序的第一步。
6. 接下来，我们必须使用npm检索express模块。 在终端中执行以下命令：npm install express-这将使用我们的新express模块创建一个node_modules文件夹，并使用我们的依赖项更新package.json文件！
7. 下一步是在目标文件夹中创建server.js文件，方法是在“资源管理器”窗格中的HELLOWORLD下方单击鼠标右键，然后选择“新文件”，或者单击目标文件夹旁边的新文件图标。 将此文件命名为server.js
8. 你现在应该编辑server.js文件如下：
   

   var HTTP_PORT = process.env.PORT || 8080;
   var express = require("express");
   var app = express();
   
   // setup a ‘route‘ to listen on the default url path
   app.get("/", (req, res) => {
       res.send("Hello World!");
   });
   
   // setup http server to listen on HTTP_PORT
   app.listen(HTTP_PORT);

9. 接下来，从集成终端发出以下命令：git init-这将在目标文件夹中初始化本地git存储库。 您会注意到，左侧栏中的图标现在带有一个显示数字的蓝色图标。 这代表必须添加到我们本地git repo的所有文件。 单击按钮，然后在“消息”框中键入“首次提交”。 完成此操作后，单击消息框上方的复选标记以提交更改。

   注意：如果此时您收到错误：“ Git：无法执行git”，请尝试在集成终端中执行以下命令：

   git config --global user.email "[e-mail]"
   git config --global user.name "Your Name"
   
   //这里是手动通过命令为gi配置你的目标heroku地址信息

10. 现在我们的本地git repo已经准备就绪，我们必须在Heroku中创建一个应用程序以将代码发送至。 这是通过在集成终端中发出以下命令来完成的：

    heroku login -此命令将提示您输入电子邮件和密码。 成功完成此操作后（通过为您的Heroku帐户提供正确的电子邮件和密码），您将看到一条消息“以…登录”，其中…是您的电子邮件地址。

    heroku create -此命令将在Heroku中创建我们的新应用！ 它给我们的应用程序提供的名称是随机的（您可以稍后更改）。 通过查看创建应用程序旁边的文本，您将知道它为您的应用程序命名的名称…完成，[此处为应用程序名称]。 您还将看到以下形式的网址：https：// [此处为应用名称] .herokuapp.com

我们需要再发出一个命令：git push heroku master -此命令将本地git repo的内容推送到Heroku上的新应用程序中！

• 遇到的问题
  在Mac电脑的环境下进行这些操作，首先需要注意有些涉及权限问题时要用sudo处理.
  接下来，我在通过git上传代码的时候，出现了报错：
  

  error: src refspec master does not match any

• 这是因为mac环境下安装的git路径没有被自动配置，VS Code没有找到git的相应路径，有两种解决办法：

• 
  1.手动git上传，命令如下:
  

  git config --global user.email "[e-mail]"
  git config --global user.name "Your Name"
  git add .
  git commit  -m ‘first commit‘
  git push heroku master

          2. 为VS Code配置git路径：

            在VS Code 的 Settings里搜索git.path, 点击Edit in settings.json, 写入配置：

{

"javascript.implicitProjectConfig.experimentalDecorators": true,

"editor.suggestSelection": "first",

"vsintellicode.modify.editor.suggestSelection":"automaticallyOverrodeDefaultValue",

"git.path": "/usr/bin/git",

"git.enableSmartCommit": true

}

 

其中git.path是git安装在你mac中的地址, 终端输入which git即可获得。

 

现在VS Code左侧的Source Control已经可以使用了。