使用VS Code開發asp.net core (下)

solenovex發表於2018-02-17
ASP.NET

第一部分: https://www.cnblogs.com/cgzl/p/8450179.html

本文是基於Windows10的.

Debugging javascript

開啟wwwroot/js/site.js, 寫一段簡單的js程式碼:

(function ($) {
    $(document).ready(function () {
        $('#myButton').on('click', function() {
            alert('Hello world!');
        });
    });
})(jQuery);

可以設定斷點, 但是由於整個專案是用於伺服器端的. 而js檔案是用於客戶端開發的, 我們需要一種方法來除錯js檔案.

這裡我們就需要安裝一個擴充套件: Chrome Debugger.

然後開啟launch.json, 可以直接開啟檔案, 也可以如下圖方式開啟:

點選右下角的Add Configuration:

修改配置的埠和目錄:

"configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:5000",
            "webRoot": "${workspaceFolder}/wwwroot"
        },

在About.cshtml裡面新增一個button:

<button  id="myButton" class="btn btn-default">My Button</button>

在Debugger中執行Launch Chome:

執行後, 彈出瀏覽器, 但是頁面無法顯示:

這是因為Chrome Debugger僅僅執行客戶端的程式碼. 而伺服器段的程式碼買有執行.

所以還需要在另外的命令列執行dotnet run命令.

然後再次執行Chrome Launch. 這次執行成功了

點選About頁面的My Button, 斷點並沒有響應. 切換到內碼表面:

可以看到斷點被灰掉了, 這是因為debugger並未找到這段程式碼.

這是因為dotnet run執行的是Production環境:

而看下程式碼_Layout.cshtml:

程式只有在Development環境下才會包含site.js.

這時可以開啟bundleconfig.json, 把sourceMap屬性設定成true. 並且安裝這個包: 

dotnet add package BuildBundlerMinifier

執行dotnet clean 和 dotnet build

這是一種辦法, 但是我更想直接除錯site.js, 所以可以在命令列設定一下臨時的環境變數:

set ASPNETCORE_ENVIRONMENT=Development

然後執行dotnet run.

這時重新整理後再點選按鈕, 就可以觸發斷點了:

除此之外還可以使用瀏覽器自帶的debugger.

Debug Typescript

在wwwroot/js裡面新增test.ts:

class Test {
    constructor(private msg: string) {

    }
    show() {
        alert(this.msg);
    }
}

然後需要為專案配置一下Typescript:

建立一個tsconfig.json檔案:

{
    "compileOnSave": true,
    "compilerOptions": {
        "target": "es5",
        "sourceMap": true,
        "module": "commonjs"
    },
    "include": [
        "wwwroot/js/*.ts"
    ]
}

　　這時候, ts檔案還不能編譯, 因為typescript還沒有被安裝. 也就是說tsc命令還不能用.

所以需要安裝typescript:

npm install typescript -g

這時在專案目錄執行tsc命令就可以生成js檔案了:

但是, 如果更改了test.ts檔案, 儲存後. 並沒有生成新的js檔案. 這是因為在儲存的時候vscode不知道應該做什麼.

可以在專案build之前進行tsc這個命令, 所以修改csproj檔案, 新增如下程式碼:

  <Target Name="PrecompileScript" BeforeTargets="BeforeBuild">
    <Exec Command="tsc" />
  </Target>

然後執行dotnet build, 就可以看到生成了新的test.js檔案.

運算元據庫

針對sqlite, 沒有太好的辦法, 到官方網站下載工具, 使用命令列sqlite3.

針對sqlserver, 需要安裝一個mssql擴充套件:

我本機有一個localdb例項的資料庫.

在專案建立一個test.sql檔案, 開啟檔案後會自動安裝sql tools service:

選擇連線字串, MSSQL Connect:

因為現在還沒有建立任何連線字串, 所以這時它會讓你建立一個:

首先輸入Server Name:

然後輸入資料庫名:

選擇登陸方式, 我選擇integrated:

最後輸入這個檔案的名字: SalesDB

確定後, VSCode就會開始嘗試連線該資料庫, 成功後會有提示:

vscode右下角狀態列也會有顯示:

這時再寫sql語句就會有智慧提示:

然後執行這個sql語句: 可以先看看有哪些命令:

Ctrl+Shift+E是執行sql語句的命令. 執行後的結果如圖:

上面所配置的Sql連線字串實際上是儲存在了UserSettings裡面:

對於mysql和postgresql等, 需要安裝vscode-database這個擴充套件. 這裡就先不介紹了.

關於擴充套件

建立新檔案: Advanced New File 擴充套件 

搜尋並安裝advanced new file擴充套件, 這兩個哪個都行. 我安裝的是帶橫線的那個:

通過Command Palette可以看到建立新檔案的快捷鍵是Ctrl+Alt+N.

然後選擇相對的路徑:

選擇後輸入檔名即可, 這時可以帶著目錄結構:

如果目錄結構中的目錄不存在, 那麼它也會自動被建立. 點選Enter就會建立新檔案個所需的目錄.

ESLint擴充套件

首先安裝ESLint:

如果你沒有安裝eslint庫的話還需要通過npm來進行全域性安裝:

npm install -g eslint

然後需要新增一個eslint的配置檔案, 選擇Create .eslintrc.json檔案:

生成的檔案如下:

這時就可以看到eslint擴充套件起作用了:

具體ESLint的內容, 請檢視官方文件.

TSLint擴充套件

安裝tslint擴充套件:

通過npm安裝tslint:

npm install -g tslint

然後看一下tslint有哪些命令:

選擇建立tslint.json檔案:

找一個ts檔案試一下:

tslint也起作用了.

Bower擴充套件

安裝Bower擴充套件

安裝好後, 在Command Palette中輸入並選擇Bower命令會出下如下選項:

如果你使用bower, 那麼這裡的命令你應該比較熟悉.

這裡比較有用的一個命令是Bower Search and Install. 選擇後, 搜尋一個包例如 underscore:

然後選擇Install as Dependency:

安裝後, 該包會出現在bower.json檔案中.

XML格式化擴充套件

vscode在不安裝擴充套件的情況下xml檔案是無法被自動格式化的.

可以安裝擴充套件Xml Tools:

安裝後, 檢視它都有哪些命令:

這時, 如果想格式化xml檔案, 直接使用vscode預設的格式化檔案命令(Shift+Alt+F)即可, 它會按照專案的配置進行格式化.

其他型別的檔案如果需要格式化, 可以在擴充套件市場搜尋安裝, 自行研究一下即可.

Rest Client擴充套件

安裝Rest Client擴充套件:

然後建立一個檔案, 例如叫 httptest, 之後選擇該檔案的language mode:

然後選擇Http:

然後在檔案中寫一個http的地址:

寫完http地址後, 在地址的上方會出現一個連結: Send Request, 點選這個連結, 就會傳送請求, 請求響應後, 在右側可以看到返回的結果:

在這裡還可以新增請求的各種引數:

請求的結果可以儲存到檔案:

同樣這裡可以傳送 POST, PUT, DELETE等請求.

 

VSCode的擴充套件太多了, 可以選擇Poppular Extensions或者Recommend Extensions去安裝並研究一下.

這個文章就寫這些了, 謝謝

相關文章