第一部分: 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去安裝並研究一下.
這個文章就寫這些了, 謝謝