Visual Studio Code（VS code）大家都在用嗎？或許大家須要看一下這篇博文 Asp.Net Core + SignalR 實現實時通訊 Net Core 下 Newtonsoft.

時間 2019-11-17

標籤 visual studio code 大家都在或許須要看一下博文 asp.net asp core signalr 實現實時通訊 newtonsoft 欄目 Visual Studio 简体版

原文原文鏈接

Visual Studio Code（VS code）大家都在用嗎？或許大家須要看一下這篇博文

寫在前面

　　　　在前端開發中，有一個很是好用的工具，Visual Studio Code，簡稱VS code。javascript

　　　都不用我安利VS code，你們就會乖乖的去用，無數個大言不慚的攻城獅，都被VS code比德芙還絲滑的強大功能所折服。css

　　　我是來給你們安利插件的，想作個比較全面的插件集合給你們。網上的我也看過一些，可是都比較零散，時間也久了一些，我結合最近的狀況，總結一下html

　　　造福你們，纔是我想作的。手動比心❤。前端

正文

一.平常安利　VS code

　　VS vode特色：html5

開源，免費；
自定義配置
集成git
智能提示強大
支持各類文件格式（html/jade/css/less/sass/xml）
調試功能強大
各類方便的快捷鍵
強大的插件擴展

　　對前端這麼友好，沒理由不用。java

Visual Studio Code（VScode ）官網　：https://code.visualstudio.com/jquery

Visual Studio Code（VScode ）github地址：https://github.com/Microsoft/vscodegit

二.怎麼安裝插件？

方法一：程序員

按F1或Ctrl+Shift+p，輸入extensions，點擊第一個就能夠

方法二：github

ctrl + P 而後輸入 >ext install

方法三：

點擊圖中位置

三.插件合集

插件官網：https://marketplace.visualstudio.com/

　　每個插件名都超連接到官網，注意查看

a.配置類插件：

1.Settings Sync

最好用的插件，沒有之一，一臺電腦配置好以後，其它的幾臺電腦都不用配置。新機器登陸一下就搞定了。不再用折騰環境了，

使用GitHub Gist同步多臺計算機上的設置，代碼段，主題，文件圖標，啓動，鍵綁定，工做區和擴展。

2.Debugger for Chrome

從VS Code調試在Google Chrome中運行的JavaScript代碼。

用於在Google Chrome瀏覽器或支持Chrome DevTools協議的其餘目標中調試JavaScript代碼的VS Code擴展。

3.beautify

格式化代碼工具

美化javascript，JSON，CSS，Sass，和HTML在Visual Studio代碼。

4.Atuo Rename Tag

修改 html 標籤，自動幫你完成頭部和尾部閉合標籤的同步修改

5.中文（簡體）語言包

Chinese (Simplified) Language Pack for Visual Studio Code

將界面轉換爲中文，對英語很差的人，很是友好。例如我。。。

6.Code Spell Checker

代碼拼寫檢查器

一個與camelCase代碼配合良好的基本拼寫檢查程序。

此拼寫檢查程序的目標是幫助捕獲常見的拼寫錯誤，同時保持誤報數量較低。

7.vscode-icons

顯示Visual Studio代碼的圖標，目前該插件已被vscode內部支持："文件" -> "首選項" -> "文件圖標主題"

8.guides

顯示代碼對齊輔助線，很好用

9.Rainbow Brackets

爲圓括號，方括號和大括號提供彩虹色。這對於Lisp或Clojure程序員，固然還有JavaScript和其餘程序員特別有用。

效果以下：

10.Bracket Pair Colorizer

用於着色匹配括號

11.Indent-Rainbow

用四種不一樣顏色交替着色文本前面的縮進

12.filesize

在狀態欄中顯示當前文件大小，點擊後還能夠看到詳細建立、修改時間

13.Import Cost

對引入的計算大小

14.Path Intellisense

可自動填充文件名。

15.WakaTime

從您的編程活動自動生成的度量標準，看法和時間跟蹤。

16.GitLens

git日誌查看插件

GitLens 加強了 Visual Studio Code 中內置的 Git 功能。例如 commits 搜索，歷史記錄和和查看代碼做者身份，還能經過強大的比較命令得到有價值的看法等等

17..REST Client

REST客戶端容許您直接發送HTTP請求並在Visual Studio Code中查看響應。

18.Npm Intellisense

用於在 import 語句中自動填充 npm 模塊

require 時的包提示（最新版的vscode已經集成此功能）

19.Azure Storage

VS Code的Azure存儲擴展容許您部署靜態網站並瀏覽Azure Blob容器，文件共享，表和隊列。按照本教程從VS Code部署Web應用程序到Azure存儲。

20.Project Manager

它能夠幫助您輕鬆訪問項目，不管它們位於何處。不要再錯過那些重要的項目了。您能夠定義本身的收藏項目，或選擇自動檢測VSCode項目，Git，Mercurial和SVN存儲庫或任何文件夾。

從版本8開始，您就有了專門的項目活動欄！

如下是Project Manager提供的一些功能：

將任何項目保存爲收藏夾
自動檢測VSCode，GIT中，水銀或SVN存放區
在相同或新窗口中打開項目
識別已刪除/重命名的項目
一個狀態欄標識當前項目
專門的活動欄

21.Language Support for Java(TM) by Red Hatredhat.java

這個插件，這個下載次數，安裝就對了。

22.Todo Tree

此擴展能夠快速搜索（使用ripgrep）您的工做區以獲取TODO和FIXME等註釋標記，並在資源管理器窗格的樹視圖中顯示它們。單擊樹中的TODO將打開文件並將光標放在包含TODO的行上。

找到的TODO也能夠在打開的文件中突出顯示。

b.VS code 主題集合

1.Night Owl

一個很是適合夜貓子的 VS Code 主題。像是爲喜歡深夜編碼的人精心設計的。

2.Atom One Dark Theme

一個基於Atom的黑暗主題

3.Dracula Official

官方吸血鬼主題，博主用的就是這款，很漂亮

4.One Dark Pro

Atom標誌性的One Dark主題，也是VS Code下載次數最多的主題之一！

5.Bimbo

簡約而現代的神奇海洋主題

c.代碼提示提示類

1.HTML Snippets

完整的HTML代碼提示，包括HTML5

2.HTML CSS Support

在 html 標籤上寫class 智能提示css樣式

3.jQuery Code Snippets

jQuery代碼提示

超過130個用於JavaScript代碼的jQuery代碼片斷。

只需鍵入字母'jq'便可得到全部可用jQuery代碼片斷的列表。

4.HTMLHint

html代碼檢測，支持html5

d.語言相關

1.C＃

適用於.NET Core的輕量級開發工具。
偉大的C＃編輯支持，包括語法突出顯示，智能感知，轉到定義，查找全部引用等。
調試支持.NET Core（CoreCLR）。注意：不支持單聲道調試。桌面CLR調試支持有限。
支持Windows，macOS和Linux上的project.json和csproj項目。

2.CodeMetrics

計算TypeScript / JavaScript文件的複雜性。

3.VUE插件

　　vetur 語法高亮、智能感知、Emmet等

　　VueHelper snippet代碼片斷

4. Java Extension Pack

它是一組流行的擴展，能夠幫助在Visual Studio Code中編寫，測試和調試Java應用程序。查看VS Code中的Java以開始使用。

Visual Studio Code的插件功能真的是強大到爆裂，還有仕麼有意思的插件，歡迎你們在評論區補充，

以爲有用，記得點推薦哦，讓別人也能看到；

大家都在用IntelliJ IDEA嗎？或許大家須要看一下這篇博文

Asp.Net Core + SignalR 實現實時通訊

1、搭建項目

一、建立一個ASP.NET Core MVC 項目

二、nuget 下載和安裝 MicroSoft.AspNetCore.SignalR

vs提示版本衝突

這時咱們選擇低版本便可

2、SignalR配置

一、在model中建立一個類MyHub 代碼以下

 public class MyHub:Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user+"["+DateTime.Now.ToLongTimeString()+"]", message);
        }
        public async Task SendMessageToUser(string user, string message)
        {
            await Clients.Client(Context.ConnectionId).SendAsync("ReceiveMessage", user + ":" + DateTime.Now.ToLongTimeString()+"]", message);
        }
    }

二、在Startup中注入SignalR並在Configure中配置路由

三、右鍵項目名=>添加=>添加客戶端庫

對於「提供程序」選擇unpkg。
對於「庫」輸入 @aspnet/signalr@1.0.4 （@1.0.4 是根據 nuget SignalR的本本定的）。

選擇「選擇特定文件」，展開「dist/browser」文件夾，而後選擇「signalr.js」和「signalr.min.js」。
將「目標位置」設置爲 wwwroot/lib/signalr/，而後選擇「安裝」。

配置完畢。

3、編碼實現

一、修改Views/Home中的Index.cshtml以下

<div class="container">
    <div class="row">&nbsp;</div>
    <div class="row">
        <div class="col-6">&nbsp;</div>
        <div class="col-6">
            User..........<input type="text" id="userInput" />
            <br />
            Message...<input type="text" id="messageInput" />
            <input type="button" id="sendButton" value="Send Message" />
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <hr />
        </div>
    </div>
    <div class="row">
        <div class="col-6">&nbsp;</div>
        <div class="col-6">
            <ul id="messagesList"></ul>
        </div>
    </div>
</div>
<script src="~/lib/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>

二、在js文件見建立一個js文件 chat.js

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

connection.on("ReceiveMessage", function (user, message) {
    var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    var encodedMsg = user + " says " + msg;
    var li = document.createElement("li");
    li.textContent = encodedMsg;
    document.getElementById("messagesList").appendChild(li);
});

connection.start().catch(function (err) {
    return console.error(err.toString());
});

document.getElementById("sendButton").addEventListener("click", function (event) {
    var user = document.getElementById("userInput").value;
    var message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

三、Ctrl+F5 運行出兩個網頁

Net Core 下 Newtonsoft.Json 轉換字符串 null 替換成string.Empty

 public class NullToEmptyStringResolver : DefaultContractResolver
    {
        /// <summary>
        /// 建立屬性
        /// </summary>
        /// <param name="type">類型</param>
        /// <param name="memberSerialization">序列化成員</param>
        /// <returns></returns>
        protected override IList<JsonProperty> CreateProperties(Type type, MemberSerialization memberSerialization)
        {
            return type.GetProperties()
                .Select(x =>
                {
                    var property = CreateProperty(x, memberSerialization);
                    property.ValueProvider = new NullToEmptyStringValueProvider(x);
                    return property;
                }).ToList();
        }

        /// <inheritdoc />
        /// <summary>
        /// 小寫
        /// </summary>
        /// <param name="propertyName"></param>
        /// <returns></returns>
        protected override string ResolvePropertyName(string propertyName)
        {
            return propertyName.ToLower();
        }
    }

public class NullToEmptyStringValueProvider : IValueProvider
    {
        private readonly PropertyInfo _memberInfo;

        /// <summary>
        /// 構造函數
        /// </summary>
        /// <param name="memberInfo"></param>
        public NullToEmptyStringValueProvider(PropertyInfo memberInfo)
        {
            _memberInfo = memberInfo;
        }

        /// <inheritdoc />
        /// <summary>
        /// 獲取Value
        /// </summary>
        /// <param name="target"></param>
        /// <returns></returns>
        public object GetValue(object target)
        {
            var result = _memberInfo.GetValue(target);
            if (_memberInfo.PropertyType == typeof(string) && result == Convert.DBNull)
            {
                result = string.Empty;
            }

            return result;

        }

        /// <inheritdoc />
        /// <summary>
        /// 設置Value
        /// </summary>
        /// <param name="target"></param>
        /// <param name="value"></param>
        public void SetValue(object target, object value)
        {
            _memberInfo.SetValue(target, value);
        }
    }