初探Visual studio code
前言
最近在查找資料時發現有個跨平台的編輯器Visual studio code,就想到我在Ubuntu一直以來都用Console在建置專案,搞不好可以取代,在此把學習的過程做個紀錄。
內容
Visual studio code用起來和Atom的感覺滿像的,尤其是把某個資料夾就直接當成專案的資料夾這點,這次會說明如何安裝外掛與如何執行npm的script。
安裝外掛的部分可以參考下圖
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQP3sAE0zpm7KfjjrAeF33d2Bmuw4S8m29IQ8SIkUb6gf3SXuSa2umcUZtuWl8ErLPuiuybj3KWfbulfRvsJe6qW-aCYbu3gcbyp1Q_Hj1UuQmYURN7wrfLIRs2TJMo9eWJKTvZyJSm-c/s320/2019_02_04_1.png) |
Visual studio code安裝外掛 |
先點選最左側的Icon(圖中被圈起來的),接著可以在Icon右邊看到已安裝的外掛,下方的視窗(圖中被箭頭所指)可以選擇要安裝的外掛,用起來相當直觀簡單。
執行npm的script的部分,先建一個專案,範例如下
{
"name": "mylib",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"mytest2":"echo \"This is my test!\" "
},
"author": "",
"license": "ISC"
}
基本上就是用"npm init"來建,紅字的部分是新增的。建完後如何跑呢?本以為是透過外掛來達成的,所以google了一陣子後才發現不是,Visual studio code本身有內建的命令,要透過內建的命令來執行命令,先看下圖
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOYg9g9oGkZEgFgiIDNgD9lk3dqduSe8KDzdi3ET_WNAQ01ErSLTfo2j5_upnPzph1gDEBXp-_8JuoTJpsc1S1u0y-HqEzpggfsqK5KpAVpjUnoEtP6BVNDIzFATt2Vt_ZClMcA8ehR_4/s320/2019_02_04_2.png) |
開啟Visual studio code命令列 |
注意這是Visual studio code的命令列,並不是console,開啟後可以看到下圖
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKQX9Dsdq9a5MMxQkZCE6huAcwZqTBnEAIdqQnm5CrPB72fqh2Y7LjCgsSA-yYwRp4P8c0FsP9Nc_7e0XXOv3HCi2eGMc2_zfeQPd-7xsmvrJErjjnd-7nnKEsu9p3UnnzW_TB-XHXka8/s320/2019_02_04_3.png) |
執行命令 |
如果圖中的"Tasks:Run Task"沒出現在正下選項中可以在上方的輸入"Tasks:Run Task",該輸入會篩選符合的命令,點選"Tasks:Run Task"後可以看到下圖
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Ak3QrFXnD5WeWmusgXtpB-GKlwPiGqhp19cDwCaxji5w5LY6mzOjNNRNhjj5-XOpjiAMOhdtUHNjb3JtMB7pSpSy4gZbnvG7AXCCefKnp_xok3LwIImYyp3A7NEFEKSr8_l1AA4sY0E/s320/2019_02_04_4.png) |
執行Target |
這裡可以選擇要執行哪個Target,選完後可以看到下圖
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU_22SOCIqrBkl5Jg56zmASzwvU8f7rtIeeVWqCyOIeh4GuSURNUyeEu4rHPrg8vOzbTkkdwIsYXzQJl6CKsVA5TNtitSMbGILa_dpTe3RHcBsPJxB5wuK47wi5QIj4GB4AXQ4ZlPZ7q4/s320/2019_02_04_5.png) |
選擇執行項目 |
這裡選"Continue without scanning the task output",選完後就執行命令。
參考資料
Visual Studio Code Tips and Tricks
沒有留言:
張貼留言