「Visual Studio Code」安裝與擴充工具安裝

-

一、介紹

Visual Studio Code 是微軟開發且跨平台的原始碼編輯器。

二、 安裝

  1. 進入「官網」，點擊 Download


  1. 安裝 下載的檔案


  1. 選 我同意，再按 下一步


  1. 選 建立桌面圖示，再按 下一步


  1. 按 安裝


  1. 安裝中


  1. 按 完成


三、擴充套件安裝

      1. 按 紅色框起來的 extions 圖示

      2. 搜尋 HTML，安裝 HTML Snippets

      3.  安裝 HTML Preview


      4.  搜尋 Vetur，安裝 Vetur

四、相關連結

  1. 「Visual Studio Code」安裝與擴充工具安裝
  2. 快速開發 Vue.js 工具「Vue CLI」安裝教學
  3. 快速的套件管理工具「Yarn」
  4. 讓 JavaScript 能在伺服器端執行的環境 「node.js」
  5. 使用「Vue Cli」建立、打包、安裝 專案

五、參考連結

  1. Visual Studio Code

留言

張貼留言

這個網誌中的熱門文章

使用「Visual Studio 2019」建置 Windows 服務

-
圖片
一、開發環境 整合開發環境：Visual Studio 2019 語言：C# .net framework：4.6.2 二、建置 Windows 服務專案 圖、開啟 Visual Studio 2019 ，點 建立新的專案 圖、選擇 Windows 服務(.net framework) 圖、輸入相關資訊 圖、選擇 Service1.cs > 滑鼠右鍵 > 檢視原始碼，即可看到 Windows 服務 起初的原始碼 圖、對 專案 > 滑鼠右鍵 > 重建，即可在 bin 資料夾底下見到建置好的結果 三、登錄 Windows 服務 圖、輸入登錄指令 指令 sc create 服務名稱 binpath=D:\服務路徑\XXX.exe start=auto 圖、Windows 服務畫面即可看到剛剛的服務 四、相關連結 使用「SC」指令 登錄、刪除 Windows 服務 五、參考 sc 指令
閱讀完整內容

在「Visual Studio 2019」使用「Markdown」撰寫文章

-
圖片
一、介紹 「Markdown」介紹請參照之前文章 使用「Markdown」簡易的語法表達出複雜的HTML文件 「Visual Studio 2019」是微軟的軟體開發整合環境(IDE)產品，詳細用途與介紹請參照 Visual Studio 2019 官網 二、在「Visual Studio 2019」安裝「Markdown」 圖一、打開「延伸模組」 圖二、下載「Markdown」後即可在「Visual Studio 2019」用「Markdown」撰寫文章 三、使用「Markdown」撰寫文章 圖一、新增 md 檔案 圖二、在 md 檔用「Markdown」撰寫文章 四、參考 使用「Markdown」簡易的語法表達出複雜的HTML文件 Visual Studio 2019 官網 IDE wiki
閱讀完整內容

如何傳送訊息至「Teams」的 Channel

-
圖片
一、介紹 Microsoft Teams 為微軟旗下的通訊軟體，它整合聊天、視訊、Office 365、Execel、Word、OneNote…等功能。 比爾蓋茲提出 Skype for Business 的想法，因此有了 Microsoft Teams 這個產品，為了與 Slack…等商用軟體相抗衡。 二、 Nuget 安裝 Newtonsoft.Json 12.0.3 三、Incoming WebHook 設定 訊息可藉由 Teams 的應用程式 Incoming WebHook 傳輸訊息 圖、點擊 … > 搜尋 Incoming WebHook > 點擊 Incoming WebHook 圖、點擊 新增至團隊 圖、選擇 你的頻道 > 點擊 設定連結器 圖、輸入 WebHook 名稱 > 點擊 建立 圖、複製 WebHook Url > 點擊 完成 四、操作步驟 圖、貼上範例碼，修改成你的 WebHook Url，執行後即可在 Teams 看到 測試訊息 的訊息 範例碼 using (var wc = new WebClient()) { wc.Headers.Add("Content-Type", "application/json"); var data = new { text = "測試訊息" }; var jsonStr = JsonConvert.SerializeObject(data); var bytes = System.Text.Encoding.UTF8.GetBytes(jsonStr); var res = wc.UploadData("https://你的 WebHook Url", bytes); Console.WriteLine(System.Text.Encoding.UTF8.GetString(res)); } 圖、執行結果 五、相關連結 使用「Visual Studio 2019」建置 主控台 Console 應用程式 使用「LINE Messaging API」發送 line 訊息 ...
閱讀完整內容

「Katalon Recorder」簡化測試腳本撰寫的工具

-
圖片
一、介紹 「Katalon Recorder」 是一款錄製 Web UI 測試 工具，安裝於 Chrome、FireFox 瀏覽器。 Katalon Recorder 錄製瀏覽器的操作過程，並可產生 C#, Java, Python 的測試原始碼，讓工程師更易撰寫 WEB UI 測試。 此文章將介紹使用 Katalon Recorder 錄製腳本，並把腳本移至 Visual Studio 2019 做單元測試。 二、腳本內容 開啟 Google 搜尋關鍵字 測試 ，檢視第二筆搜尋結果的描述是否為 「這是一個根據弗洛伊德焦慮類型理論…」 。 三、 Nuget 套件 MSTest.TestAdapter ( 測試專案預設會安裝 ) MSTest.TestFramework ( 測試專案預設會安裝 ) Selenium.WebDriver Selenium.WebDriver.ChromeDriver 四、教學步驟 圖一、安裝套件。 圖二、 Chrome 瀏覽器安裝 Katalon Recorder 。 圖三、開啟 Katalon Recorder ( 注意右上角的 ICON ) 圖四、開始錄製腳本 圖五、操作瀏覽器(此時 Katalon Recorder 就會錄製腳本) 圖六、停止錄製 圖七、產生 C# 程式碼 圖八、將程式碼貼到 測試專案 圖九、將 FirefoxDriver 改成 ChromeDriver ，讓單元測試使用 Chrome 瀏覽器。 圖十、執行 測試 。 圖十一、測試結果。 四、相關連結 Selenium 前端 UI 自動化測試、爬蟲程式 最佳利器 五、參考 Katalon Recorder Katalon Recorder 下載 ( Chrome 擴充功能 )
閱讀完整內容

使用「Markdown」簡易的語法表達出複雜的HTML文件

-
圖片
一、介紹 Markdown 是一種標記語言，它的主要目的是用來作為網路的「 寫作用語言 」， 不是取代 HTML 。 Markdown 的重點在於讓文件更「 易讀易寫 」，因此Markdown只涵蓋純文字可涵蓋的範圍。Markdown 詳細 介紹 與 語法 可參考 Markdown 台灣網站 。 二、dillinger dillinger 即時將「Markdown」語言編譯成「HTML」的線上工具。 圖一、左邊為 Markdown 語法，右邊為對應的HTML文件   圖二、Markdown與HTML對比 三、參考連結 Markdown 台灣網站 dillinger 網站 四、總結 如果需要大量撰寫文件的需求可以考慮使用 Markdown ，它讓你可以編寫的更快速且易閱讀。
閱讀完整內容

asp.net 下的 JSON 套件最佳利器「Newtonsoft.Json」

-
圖片
一、前言 筆者很常使用 Newtonsoft.Json 於 JSON 資料的序列化與反序列化，因為好用且有名因此介紹筆者常用的寫法給讀者。 二、開發環境 整合開發環境：Visual Studio 2019 語言：C# .net framework：4.6.2 三、Newtonsoft.Json 的常用類別 JArray：代表 JSON array JObject：代表 JSON 物件 JProperty：代表 JSON 屬性 JToken：代表 JSON Token，可為 JArray、JObject、JProperty、JValue …等 JValue：代表一個 JSON 值，可能是 string、integer、date …等 四、反序列化 圖、反序列化 程式碼 var jsonStr = "{'a':'a1', 'b': 'b1'}"; return JsonConvert.DeserializeObject<JToken>(jsonStr); 圖、執行結果 五、序列化 圖、序列化 程式碼 var jsonObj = new { a = "a1", b = "b1" }; return JsonConvert.SerializeObject(jsonObj); 圖、執行結果 六、參考 Newtonsoft.Json
閱讀完整內容

使用「LINE Messaging API」發送 line 訊息

-
圖片
一、介紹 LINE 是由LINE株式會社所開發的即時通訊平台，也是目前台灣目前最高使用率的社群平台。 二、登入 LINE console 圖、打開瀏覽器，進到 LINE Developers Console 登入頁 三、建立 Provider 和 Channel 圖、按下 Create ，輸入 Provider name ，再按下 Create 圖、按下 Create a Message API Channel 圖、輸入 Channel name 圖、Channel 資訊 四、webhook 每當LINE用戶加您的 Channel 為好友或是發送訊息，LINE平台透過 HTTP POST 發送 webhook 事件資訊 至您 LINE Developers Console 中所指定的 webhook URL 。 圖、點 Messaging API ，往下拉即可看到 webhook 相關設定 webhook 事件資訊 webhook 事件資訊為JSON格式的資料 點 webhook 的 Verify 按鈕，則會收到如下格式的 webhook 事件資訊。 圖、Verify 按鈕 {“events”:[],“destination”:“XXX”} 被加入好友，則會收到如下格式的 webhook 事件資訊。 {“events”:[{“type”:“follow”,“replyToken”:“XXX”,“source”:{“userId”:“XXX”,“type”:“user”},“timestamp”:XXX,“mode”:“active”}],“destination”:“XXX”} 其中 userId 為 加入您好友的用戶ID，此ID會使用於發送訊息。 發送訊息時，則會收到如下格式的 webhook 事件資訊。 {“events”:[{“type”:“message”,“replyToken”:“XXX”,“source”:{“userId”:“XXX”,“type”:“user”},“timestamp”:XXX,“mode”:“active”,“message”:{“type”:“sticker”,“id”:“XXX”,“stickerId”:“XXX”,“packageId”:“XXX”,“stic...
閱讀完整內容

使用「IMAP」讀取「Gmail」信件的主旨

-
圖片
一、開發環境 整合開發環境：Visual Studio 2019 語言：C# .net framework：4.6.2 二、 Nuget 圖、套件 MailSystem.NET 二、允許低安全性應用程式 要使用 IMAP 讀取 Gmail 的信，需啟用 允許低安全性應用程式 未啟用 允許低安全性應用程式 會發生底下錯誤 [AUTHENTICATIONFAILED] Invalid credentials 圖、AUTHENTICATIONFAILED Invalid credentials 啟用 允許低安全性應用程式 圖、登入 Gmail > 按下 管理你的 Google 帳戶 > 進入 Google Console 頁面 圖、按下 安全性 > 按下 開請存取權(不建議) 圖、啟用 允許低安全性應用程式 三、讀取信件主旨的範例 原始碼 c# using (var imap = new Imap4Client()) { var rets = new List<string>();      //imap.gmail.com 為 Google 的 IMAP Server imap.ConnectSsl("imap.gmail.com", 993); imap.Login("你的Gmail", "你的Gmail密碼"); var inboxs = imap.AllMailboxes.Cast<Mailbox>().Select(x => x.Name).ToList(); if (inboxs.IndexOf("INBOX") > -1) { var inbox = imap.SelectMailbox("INBOX"); for (var i = 1; i <= inbox.MessageCount; i++) { //讀取信件 var m = inbox.Fetch.MessageObject(i); ...
閱讀完整內容

「Apache Maven」安裝步驟

-
圖片
一、介紹 「Apache Maven」 是Apache軟體基金會所開發的軟體，被廣泛應用於 JAVA 自動化編譯、發佈、管理的工具。 二、安裝 圖一、安裝 Apache Maven 前須先安裝 OpenJDK 。 圖二、下載 Apache Maven 。 圖三、解壓縮 Apache Maven 至路徑 F:\maven 。( 解壓縮位置可選擇其他路徑。 ) 圖四、系統變數 Path 於尾端加入 ;F:\maven\bin 。( 注意有分號。 ) 圖五、開啟 命令提示字元 輸入 mvn -ver ，出現以下畫面則代表安裝成功。 三、相關連結 OpenJDK 安裝步驟 四、參考 Apache Maven Wiki Apache Maven 官網 Apache Maven 下載頁面
閱讀完整內容

如何取得 FaceBook 的「應用程式編號」、「應用程式密鑰」。

-
圖片
一、介紹 本文章將會介紹如何取得 FaceBook 的「應用程式編號」、「應用程式密鑰」。 二、OAuth 2.0 「OAuth 2.0」 是一個開放標準，允許使用者讓第三方應用程式取得該使用者在某個應用程式上的資訊，無須取得該用戶的密碼、帳號。 三、取得FaceBook的「應用程式編號」、「應用程式密鑰」 圖一、使用瀏覽器進入到 facebook developer ，點選 下一步 圖二、輸入 電話號碼 、 確認碼 圖三、點選 開發人員 圖四、點選 建立首款應用程式 圖五、選取 管理企業管理工具 ，再點選 繼續 圖六、輸入 應用程式顯示名稱 、應用程式用途選取 你自己或你的商家 、再點選 繼續 圖七、點選 提交 圖八、FaceBook 登入選擇 設定 圖九、選擇左邊選單的 設定 圖十、輸入 有效的 OAuth 重新導向 URI 圖十一、點選 設定 > 基本資料 ，即可取得 應用程式編號 、 應用程式密鑰 三、取得FB的「存取權杖工具 」 圖一、點選 上方 工具 ，再點選 存取權杖工具 圖二、取得FaceBook應用程式的 存取權杖工具 四、參考 facebook developer OAuth 2.0 facebook 存取權杖 建置一個使用「FaceBook」、「Google」帳號登入的「Asp.net MVC」 網站。
閱讀完整內容