【翻譯】在Mac上使用VSCode建立你的第一個Asp.Net Core應用

Setting Up Your Development Environment

設置你的開發環境

To setup your development machine download and install .NET Core and Visual Studio Code with the C# extension. Node.js and npm is also required. If not already installed visit nodejs.org.

首先在你的機器上下載.Net Core和Visual Studio Code和相應的 C#擴展插件。Node.js和npm也是必須的，若是你的機器上沒有，能夠從Nodejs.org下載安裝。

Scaffolding Applications Using Yeoman

使用Yeoman搭建應用

We will be using [yo aspnet] to generate the Web Application Basic template, you may follow the full instructions in Building Projects with Yeoman to create an ASP.NET Core project which show an Empty Web for reference.

咱們將使用[yo aspnet]去生成Web應用程序的基礎模板，你也能夠按照Building Projects with Yeoman的步驟建立一個空的Asp.Net Core Web應用程序。

Install the necessary yeoman generators and bower using npm.

使用npm安裝必要的yeoman生成器和bower。

npm install -g yo generator-aspnet bower

Run the ASP.NET Core generator

運行Asp.Net Core生成器

yo aspnet

 

• Select Web Application Basic [without Membership and Authorization] and tap Enter

• 選擇Web Application Basic [without Membership and Authorization] 而後回車

• Select Bootstrap (3.3.6) as the UI framework and tap Enter

• UI framework下選擇Bootstrap(3.3.6) 而後回車

• Use "MyFirstApp" for the app name and tap Enter

• 使用「MyFirstApp」做爲引用的名稱，而後回車

When the generator completes scaffolding the files, it will instruct you to restore, build, and run the application.

當生成完成所需的文件後，它會提示你接下來該恢復、構建和運行這個應用程序。

Your project is now created, you can use the following commands to get going
       cd "MyFirstApp"
       dotnet restore
       dotnet build (optional, build will also happen with it's run)
       dotnet run

Developing ASP.NET Core Applications on a Mac With Visual Studio Code

在Mac上使用Visual Studio Code開發Asp.Net Core應用程序

• Start Visual Studio Code

• 打開Visual Studio Code

• Tap File > Open and navigate to your ASP.NET Core app

• 點擊 File > Open，導航到你的Asp.Net Core應用目錄

When the application is opened, Visual Studio Code will prompt to restore the needed project dependencies as well as add build and debug dependencies.

當應用程序被打開時，Visual Studio Code會提示恢復所需的項目依賴項以及添加構建和調試所需的依賴項。

Tap "Yes" to add the build and debug assets.

點擊「Yes」添加所需構建和調試的部件。

Tap "Restore" to restore the project dependencies. Alternately, you can enter ⌘⇧P in Visual Studio Code and then type dot as shown:

點擊「Restore」恢復項目所需依賴項。在開發中，你也能夠在Visual Studio Code中按⌘⇧P進行恢復：

You can run commands directly from within Visual Studio Code, including dotnet restore and any tools referenced in the project.json file, as well as custom tasks defined in .vscode/tasks.json. Visual Studio Code also includes an integrated console ⌃ where you can execute these commands without leaving the editor.

你能夠直接在Visual Studio Code中運行包括恢復和使用 project.json中的項目引用，也能夠在.vscode/tasks.json中自定義任務。Visual Studio Code還包括集成的控制檯，你能夠在不離開編輯器的狀況下執行這些命令。

If this is your first time using Visual Studio Code (or just Code for short), note that it provides a very streamlined, fast, clean interface for quickly working with files, while still providing tooling to make writing code extremely productive.

若是這是你第一次使用Visual Studio代碼(或剛用不久),你會發現它提供了一個很是精簡,快速、乾淨的界面,快速處理文件,同時還提供了不少工具讓編寫代碼很是富有成效。

In the left navigation bar, there are five icons, representing four viewlets:

在左邊的導航欄中，有5個小圖標，分別是：

• Explore
• Search
• Git
• Debug
• Extensions

The Explorer viewlet allows you to quickly navigate within the folder system, as well as easily see the files you are currently working with. It displays a badge to indicate whether any files have unsaved changes, and new folders and files can easily be created (without having to open a separate dialog window). You can easily Save All from a menu option that appears on mouse over, as well.

這個瀏覽視圖可以快速瀏覽你的文件目錄，以及你如今正在處理的文件。它能夠清晰得顯示哪些文件沒有保存，能夠輕鬆得建立新文件夾和新文件（不須要打開一個新的對話框）。你也能夠試用鼠標點擊保存全部打開須要保存得文件。

The Search viewlet allows you to quickly search within the folder structure, searching filenames as well as contents.

這個搜索視圖容許你在文件目錄中快速得搜索文件名和文件內容。

Code will integrate with Git if it is installed on your system. You can easily initialize a new repository, make commits, and push changes from the Git viewlet.

VSCode已經集成了Git，你的系統若是已經安裝好的話，可直接使用。你能夠在Git視圖裏輕鬆的create repository，commits，和push。

 

The Debug viewlet supports interactive debugging of applications.

Debug視圖支持與應用的交互式調試。

Code's editor has a ton of great features. You'll notice unused using statements are underlined and can be removed automatically by using ⌘ . when the lightbulb icon appears. Classes and methods also display how many references there are in the project to them. If you're coming from Visual Studio, Code includes many of the same keyboard shortcuts, such as ⌘KC to comment a block of code, and ⌘KU to uncomment.

VSCode編輯器界面也有不少很是棒的功能。當有黃色燈泡小圖標時，你會發現沒有在沒有引用的聲明下有下劃線，可使用⌘.自動修復。你的類和方法上會顯示它們在項目中有多少次被引用。若是你曾經使用過Visual Studio，你會發現VSCode擁有不少相同的快捷鍵，好比⌘KC來註釋代碼，⌘KU來取消註釋等等。

More on editor in Visual Studio Code.

更多功能查看Visual Studio Code。

Running Locally Using Kestrel

使用Kestrel在本地運行

The sample is configured to use Kestrel for the web server. You can see it configured in the project.json file, where it is specified as a dependency.

示範已經使用Kestrel配置好Web Server了。你能夠在project.json文件中看到它被配置成依賴項。

"Microsoft.AspNetCore.Server.Kestrel":

Using Visual Studio Code Debugger

使用Visual Studio Code調試

If you choose to have the debug and build assets added to the project:

若是須要調試的和構建的已經添加到項目中：

• Tap the Debug icon in the View Bar on the left pane

• 點擊左側面板中的Debug圖標

• Tap the "Play (F5)" icon to launch the app

• 點擊「Play(F5)」圖片，運行應用。

Your default browser will automatically launch and navigate to http://localhost:5000

你的默認瀏覽器將自動運行並打開http://localhost:5000

• To stop the application, close the browser and hit the "Stop" icon on the debug bar
• 關閉瀏覽器點擊調試條上的「Stop」圖標，能夠中止應用。

Using the dotnet commands

使用dotnet命令

• Run dotnet run command to launch the app from terminal/bash

• 在terminal/bash中運行dotnet命令

• Navigate to http://localhost:5000

• 瀏覽器打開http://localhost:5000

• To stop the web server enter ⌃+C.

• ⌃+C中止web服務器

Publishing to Azure

發佈到Azure

Once you've developed your application, you can easily use the Git integration built into Visual Studio Code to push updates to production, hosted on Microsoft Azure.

在你開發你的應用的時候，你能輕鬆的使用VSCode集成的Git更新到在Microsoft Azure上的生產環境。

Initialize Git

初始化Git

Initialize Git in the folder you're working in. Tap on the Git viewlet and click the Initialize Git repository button.

在你工做的文件中初始化Git。點擊Git視圖，再點擊Initialize Git repository按鈕。

Add a commit message and tap enter or tap the checkmark icon to commit the staged files.

添加一個提交信息，敲擊回車或點擊選擇相應的小圖標進行提交文件。

Git is tracking changes, so if you make an update to a file, the Git viewlet will display the files that have changed since your last commit.

Git會跟蹤更改，若是你更新了一個文件，Git視圖會顯示這個文件自最後一次提交後有更改。

Initialize Azure Website

初始化Azure Web站點

You can deploy to Azure Web Apps directly using Git.

你可使用Git把應用程序部署到Azure。

• If you don't have an Azure account, you can create a free trial.
• 若是你尚未Azure帳號，你能夠點擊查看create a free trial

Create a Web App in the Azure Portal to host your new application.

在Azure後臺建立一個Web應用部署你的新應用程序。

Configure the Web App in Azure to support continuous deployment using Git.

在Azure上配置Web應用以使其支持Git。

Record the Git URL for the Web App from the Azure portal.

從Azure後臺記錄你的Git Url

In a Terminal window, add a remote named azure with the Git URL you noted previously.

在終端窗口中，添加一個名爲azure提交到以前你記錄的Git Url上。

git remote add azure https://shayneboyer@myfirstappmac.scm.azurewebsites.net:443/MyFirstAppMac.git

Push to master. git push azure master to deploy.

推送到master，git會推送到azure上相應的master。

Browse to the newly deployed web app.

打開瀏覽器瀏覽您的應用。

Looking at the Deployment Details in the Azure Portal, you can see the logs and steps each time there is a commit to the branch.

在Azure後臺你能夠查看開發的詳細信息，包括每次提交到分支的日誌和步驟。

原文連接

https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/your-first-mac-aspnet