怎么在vscode編寫HTML代碼

scode怎么運行代碼HTML?vscode是一款源代碼編輯器軟件，能夠用于windows、macOS以及Linux系統，具有豐富的其他語言。網站html編寫也需要使用到vscode，但是很多小伙伴們不知道如何運行編寫html代碼，那么今天就來教大家vscode怎么運行代碼HTML以及怎么在vscode編寫HTML代碼，一起來看看吧。

VS Code中運行

代碼有兩種方法：

1.自動打開HTML文件

步驟如下：

1）在VS Code中搜索并安裝Live Server插件；

2）打開HTML文件；

3）右鍵單擊編輯器中的HTML代碼，選擇“Open with Live Server”；

4）瀏覽器將自動打開并顯示HTML頁面。

2.手動打開HTML文件

步驟如下：

1）打開HTML文件；

2）右鍵單擊編輯器中的HTML代碼，選擇“Open with Default Application”；

3）瀏覽器將自動打開并顯示HTML頁面。

、使用dotnet new grpc -o GrpcGreeter && cd GrpcGreeter && code . ，進入項目文件中，使用code .使用vscode打開。

　　[注]你可能會遇到'code' command not found?

　　解決辦法：1）首次使用打開vscode -> command+shift+p -> 輸入shell -> 提示Shell Command:Install 'code' in PATH -> 點擊安裝

　　　　　　　2）額外知識點：mac在命令行中可以使用open .打開文件夾

2、項目文件打開了，這個時候我們使用dotnet run運行項目。

　　[注]你可能會遇到

　　1）https certificate not found

　　解決辦法：一般的解決辦法是直接按照提示運行dotnet dev-certs https --trust就可以了，但是我遇到了一個很奇葩的事情

　　2）cannot create developer certificate on Mac

　　解決辦法：我重啟了下電腦shutdown -r now，然后運行dotnet dev-certs https --trust，輸入驗證密碼，然后ok了　　　

　　3）無法綁定到 IPv4 環回接口上的 https://localhost:5001：在 macOS 上不支持 HTTP/2，因為缺少 ALPN 支持。 "。

　　解決辦法：無法在macOS啟動ASP.NET Core gRPC應用

 1 public static IHostBuilder CreateHostBuilder(string[] args) =>
 2 　　Host.CreateDefaultBuilder(args)
 3 .ConfigureWebHostDefaults(webBuilder =>
 4 {
 5 webBuilder.ConfigureKestrel(options =>
 6 {
 7 options.ListenLocalhost(5000, o => o.Protocols = HttpProtocols.Http2);
 8 });
 9 webBuilder.UseStartup<Startup>();
10 });

3、創建客戶端項目dotnet new console -o GrpcGreeterClient，并引入以下三個包：

　　dotnet add GrpcGreeterClient.csproj package Grpc.Net.Client

　　dotnet add GrpcGreeterClient.csproj package Google.Protobuf

　　dotnet add GrpcGreeterClient.csproj package Grpc.Tools

4、將服務端的Protos/greet.proto拷貝到客戶端Protos/greet.proto下，并在GrpcGreeterClient.csproj項目文件中添加元素項組

<ItemGroup>
 <Protobuf Include="Protos\greet.proto" GrpcServices="Client" />
</ItemGroup>

5、在客戶端程序中

using System;
using System.Net.Http;
using System.Threading.Tasks;
using GrpcGreeter;
using Grpc.Net.Client;

namespace GrpcGreeterClient
{
 class Program
 {
 static async Task Main(string[] args)
 {
 var channel = GrpcChannel.ForAddress("http://localhost:5000");
 var client = new Greeter.GreeterClient(channel);
 var reply = await client.SayHelloAsync(
 new HelloRequest { Name = "GreeterClient" });
 Console.WriteLine("Greeting: " + reply.Message);
 }
 }
}

6、運行客戶端程序，發現報錯

于是我們想到可能是我們為了解決http2問題引起的，如何解決呢？

　　解決辦法：允許客戶端進行不安全連接，添加下行代碼

AppContext.SetSwitch("System.Net.Http.SocketsHttpHandler.Http2UnencryptedSupport", true);

7、客戶-服務端正常通信

原文地址：https://www.cnblogs.com/az4215/p/11961331.html

沒看現場的發布會，我是睡覺突然醒了直接看到微博上刷屏的信息，從床上跳下來，下載，試用，然后冒著猝死的風險來寫下這篇試用體驗。

首先對Visual Studio Code做一個大概的介紹。首先明確一下，這個Visual Studio Code（以下簡稱vscode）是一個帶GUI的代碼編輯器，也就是只能完成簡單的代碼編輯功能，并不是一個集成開發環境（IDE）。而Visual Studio、WebStorm這類的開發工具是IDE，功能強大，這兩個是不一樣的概念。

有些答案在討論配置文件是JSON格式的，這個已經是Sublime、Atom這一類編輯器的標配了。另外，關于Web云端開發的支持，第一版本也沒有相關的功能。目前僅僅就是一個編輯器而已，跟連接微軟的后端云服務沒啥關系。當然，可能以后的版本會加入直接連接云端進行開發吧。

目前市場上比較常見的一些GUI編輯器的產品：Sublime、Notepad++、Atom、H5 Builder、Brackets等等，包括終端下的Vim、Emacs等等，都是這個vscode的競品。我個人比較常用Sublime，Atom少用，所以只能對比下Sublime。

以下從剛剛的試用情況來大概談一談編輯器獨特的地方，僅供參考。

1、外觀：

典型的VS風格的UI，支持light和dark兩種theme切換。旁邊按鈕分別是新建、搜索、git和調試。不過功能布局情況，完全類似Atom。

2、性能：

Mac Air上將近300萬行代碼的文件，打開需要5、6秒，瀏覽無卡頓，無崩潰現象，繼續coding也不卡頓，Go to Line也不卡頓，粘貼代碼會卡頓、問題不大。Sublime3的最新版連打開這個文件，都要將近2分鐘，根本不比了。

3、用戶體驗細節

這個我一點一點來說

（1）可以直接點擊GUI按鈕或者右鍵進行新建File、Folder這樣的操作。（以前的Sublime這方面比較差）

（2）直接分離tab和關閉tab

左邊的按鈕可以直接split窗口。。比Sublime方便多了。右邊的x可以直接關閉標簽。

然后左側還可以看到一個大的藍色按鈕，可以直接Open Folder，也比較爽。。這里也就直接暗示了以Folder為項目，不然很多新手弄不清楚打開文件、打開Folder什么的。

（3）無插件化的代碼diff

非常強大的一個功能，目前發現兩個方式可以啟動diff功能。

第一種是在左側，右鍵文件select to compare，然后再右鍵一個文件Compare with 'xx'，就可以出現diff。第二種是git的模式下，點擊右上角的switch to changes file，就可以啟動diff。

然后左上角點擊...按鈕，會出現

然后點擊switch to Inline View，可以并到一個tab diff。

（4）代碼補全支持Angular標簽、支持函數說明提示

然后簡單試了一下HTML和JS的代碼補全（C#試了貌似沒有補全，具體的再看）

HTML的補全算不錯的，還支持Angular的標簽補全。

JS的代碼補全太帥了，直接看圖吧，每個函數屬性都有說明。支持Node補全。。

（5）自動提示覆蓋配置文件&懸浮提示

這種編輯器，自己改配置文件也是很常見的。目前，不支持對不同語言進行獨立配置，都是集成在一個配置文件里面；不過支持對不同項目有不同的配置文件，支持快捷鍵配置。

配置的時候有兩點很nice：

1. 會自動打開Default Settings和User Settings，提示讓你在右側修改覆蓋自己的配置文件。這個對新手很友好、也很方便。

2. 另外鼠標放到配置文件（JSON格式）的key上，會自動懸浮提示。

（6）語法錯誤提示&格式化代碼&無插件化的代碼Debug

內置了語法錯誤提示，很方便。

右鍵代碼區域支持自動格式化代碼，挺不錯的。

編輯器還帶了原生的Debug功能。

目前來看，配置文件主要是前端開發方面的配置，Debug支持Node和Mono（.Net）。

開啟Debug功能，必須要Mono3.0安裝好，我光調試Node也要安裝，不清楚為什么。

點擊左側的Debug按鈕，會自動在目錄下生成Debug的配置文件

按照自己所需修改好，然后左側選擇要Debug的配置，然后就跑起來了。

（7）支持簡單的多行選擇

在單詞上右鍵Change All Occurrences，然后就可以選擇多行了。

現在唯一的問題就是不支持大家最關心的插件化，但是這只是剛開始，只是第一版，插件化對微軟來說也應該只是分分鐘。而且第一版放出來就支持插件化意義也不大，因為開發者們也都不知道微軟要做這個東西，第一版放出來也沒啥插件。我要是微軟，第一版也不放，后續版本趕緊加進來就好，只要用戶多，都不是事兒。而且右下角直接有一個笑臉可以拿來反饋信息，所以大家有什么想反饋的，直接點那個按鈕。

綜上，說完了一些吸引人的feature，放上我個人對其的初步評價，一個預期。

首先，免費開放肯定是非常好的消息，Sublime畢竟是收費的，Sublime 3連無限期免費試用都不行了。

其次，插件化、語言獨立配置要趕緊加到日程里面，搞出來，這才是大炮。不過，以微軟的水平，這個應該完全不是問題，而且官方文檔里面也已經說了，這個是在日程上的事情。

再其次，用戶體驗的細節上，微軟肯定是完爆Sublime的，見上文。

最后，對前端開發、Node、C#比較友好。以前搞前端開發的，特別是Mac和Linux的開發者，應該會比較傾向于這個了，估計很多都會把常用編輯器從Sublime換到這個了。C#開發者的話，應該還是在Windows上的開發者才會用的多，對他們而言，當做一個快速的編輯器不錯，比VS本身打開方便多了。

其他語言方向的，如果之前用Sublime的，可能會比較多轉到這個。如果這款編輯器微軟真的比較重視的來發展、推廣，支持插件化、語言獨立配置之后，應該喜歡用Sublime來開發Python、Ruby、Go等等那批開發者都會切換到vscode。

如果說，你比較急切，上面的話都懶得看，那么我主要濃縮總結三點特性：

1. 免費

2. 用戶體驗細節好，IDE版的智能特性

3. 流暢，完全不卡。（Atom估計哭了，不知道微軟為啥把自己改造的不卡了）

推出這個vscode對微軟來說，就是標志著他們要開始席卷了，先讓你們用上這種編輯器再說。當然對開發者來說，不管喜不喜歡用，反正不花錢多了一個選擇，挺好的。

PS：話說到Atom，確實到現在我都沒再用過。（經過評論指正）不過微軟vscode好像是Atom Shell套層殼子，應該是自己改了，不知道怎么改的這么快，具體情況不敢亂下結論。不過不管怎么樣，你好歹改下二進制文件的名字吧。。。