初探Visual studio code

初探Visual studio code

前言

  最近在查找資料時發現有個跨平台的編輯器Visual studio code，就想到我在Ubuntu一直以來都用Console在建置專案，搞不好可以取代，在此把學習的過程做個紀錄。

內容

  Visual studio code用起來和Atom的感覺滿像的，尤其是把某個資料夾就直接當成專案的資料夾這點，這次會說明如何安裝外掛與如何執行npm的script。

  安裝外掛的部分可以參考下圖

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本身有內建的命令，要透過內建的命令來執行命令，先看下圖

開啟Visual studio code命令列

注意這是Visual studio code的命令列，並不是console，開啟後可以看到下圖

執行命令

如果圖中的"Tasks:Run Task"沒出現在正下選項中可以在上方的輸入"Tasks:Run Task"，該輸入會篩選符合的命令，點選"Tasks:Run Task"後可以看到下圖

執行Target

這裡可以選擇要執行哪個Target，選完後可以看到下圖

選擇執行項目

這裡選"Continue without scanning the task output"，選完後就執行命令。

參考資料

Visual Studio Code Tips and Tricks