網站首頁 學習教育 IT科技 金融知識 旅遊規劃 生活小知識 家鄉美食 養生小知識 健身運動 美容百科 遊戲知識 綜合知識
當前位置:趣知科普吧 > 綜合知識 > 

visual studio code怎麼使用

欄目: 綜合知識 / 發佈於: / 人氣:1.96W

visual studio code怎麼使用

演示機型:華爲MateBook X

系統版本:win10

APP版本:visual studio codev1.61.0

visual studio code怎麼使用共有4步。以下是華爲MateBook X中使用visual studio code的具體操作步驟: 操作/步驟

1、點擊Explorer

visual studio code怎麼使用 第2張

開啟visual studio code軟件,第一個常用功能是Explorer,即瀏覽器功能。

2、點擊File選單

visual studio code怎麼使用 第3張

第二個常用功能是File選單,即檔案選單。

3、點擊Debug選單

visual studio code怎麼使用 第4張

第三個常用功能是Debug選單,即調試功能。

4、點擊Terminal

visual studio code怎麼使用 第5張

第四個常用的功能是Terminal選單,即命令行功能。 END 總結:以上就是關於visual studio code怎麼使用的具體操作步驟,希望對大家有幫助。

小編還爲您整理了以下內容,可能對您也有幫助:

visual studio code怎麼用

Microsoft 今天在其 Build 開發者大會上正式宣佈了 Visual Studio Code 項目:一個執行於 OS X,Windows 和 Linux 之上的,針對於編寫現代 web 和雲應用的跨平臺編輯器。該應用仍然處於預覽版階段,但是你現在就可以在這裏下載體驗。

這標誌着 Microsoft 第一次向開發者們提供了一款真正的跨平臺編輯器。雖然完整版的 Visual Studio 仍然是隻能執行在 Windows 之上,但是今天的聲明向我們展示了這家公司對於支援其他計算機平臺的承諾。

逗很多人都使用 Windows 作爲他們的開發環境,但是我們也注意到了,還有很多人使用 Linux 和 Mac逗,Somasegar,Microsoft 公司的開發者事業部總裁在這周稍早時候對筆者如是說道。地我們想讓他們能夠在他們習慣的平臺上使用我們公司的產品,而不是非要遷徙到 Windows 上逗。這些平臺上的很多開發者們也更樂意於使用像 Sublime Text 這種輕量級的代碼編輯器,而非像 Visual Studio 這種全特性的 IDE。

Visual Studio Code 爲開發者們提供了對多種編程語言的內置支援,並且正如 Microsoft 在今天 Build 大會的 keynote 中所指出的,這款編輯器也會爲這些語言都提供了豐富的代碼補全和導航功能。JavaScript,TypeScript,Node.js 和 ASP.NET 5 開發者也將會獲得額外的工具集。

該編輯器也集成了所有一款現代編輯器所應該具備的特性,包括語法高亮(syntax hight lighting),可定製的熱鍵綁定(customizable keyboard bindings),括號匹配(bracket matching)以及代碼片段收集(snippets)。Somasegar 也告訴筆者這款編輯器也擁有對 Git 的開箱即用的支援。

正如 Somasegar 所言,新款編輯器部分基於 Microsoft 爲 Visual Studio Online 編寫 Monaco 編輯器時的經驗,但是該公司也正努力將一些 Visual Studio 的語言特性帶到 Visual Studio Code 上,例如 Roslyn 項目,Microsoft 的 .NET 編譯器平臺。並且 Microsoft 聲稱這些爲 VSC 打造的語言服務也會在其他編輯器包括 Sublime Text,Vi 以及 Atom 中可用。

上面提到的一些語言特性已經在其他編輯器中可用了。就在不久前,Microsoft 啓動了針對 Sublime Text 的 TypeScript 插件項目,並且 Somasegar 告訴筆者該公司承諾會在未來啓動更多類似於這樣的項目(歸根結底,是爲了滿足開發者們的需要)。

Visual Studio Code 的發佈的確來的很突然。然後仔細想想這在一段時間之前就已經有了預兆,比如 .NET 內核的開源(以及使其能夠跨平臺執行)或者是社區版的 Visual Studio Community 的啓動。

如果是在短短几年前,今天的宣佈勢必會引起軒然大波,但是今天,這對我們來說更多的是驚喜。

Mac 終端 Terminal 中使用 Visual Studio Code

一、如果是默認bash

command+shift+p 輸入shell 第一項

之後就可以使用code快捷命令了

code . // 使用 vscode 開啟當前目錄

code filename // 使用 vscode 開啟檔案

二、如果shell使用的是zsh

echo"alias vscode='/Applications/Visual\ Studio\ Code.app/Contents/MacOS/Electron'">> ~/.zshrc

visual studio code怎麼執行

你可以下載VS然後使用VS中的cl編譯器,百度一下“在控制檯使用cl編譯器”,大概就是這個意思。主要是環境變量,include的包含檔案夾這些設定。

完成這些,win+R,cmd 輸入cl測試一下。VSC自帶在編寫代碼的時候,右鍵開啟當前檔案目錄的控制檯。

比如C++,在VSC中寫完代碼後,儲存爲 name. cc,然後開啟控制檯(進入當前目錄),輸入 cl name. cc 編譯,成功以後,輸入 name 就可以執行了。

用編輯器(比如VSC)配合編譯器(比如cl)寫小程序比IDE(比如VS)效率高得多,畢竟IDE太大太慢了

目前VSC不支援中文編碼

visual studio code 怎麼執行代碼的

調試方式一般有兩種:

第一種:可以直接編輯你要輸入的代碼,然後點擊“檔案”進行“儲存”。在你所儲存的地方可以看到下圖,這個儲存的是一個純文字,直接開啟(如用瀏覽器)可以看到自己所編譯的代碼語句。從上圖的右下角可以看到純文字三個字。然後對此檔案夾修改副檔名,例如html和js,一般生成html,則副檔名爲html,就可以看到此檔案自動變成了網頁檔案,用瀏覽器開啟可以看到不再是之前的代碼,而是執行的結果。在VS Code 中修改語句進行儲存,再重新載入網頁則出來新的結果。

第二種:點擊右下角的純文字,頂部則會出現語言讓你選擇,選擇之後進行編譯你的代碼,然後儲存。再用瀏覽器開啟你所儲存的檔案,則出現執行結果。修改代碼,儲存後對網頁進行重新載入,則出現修改後的結果。

visual studio code怎麼設定

1.1 認識視圖介面

和大多編輯器一樣,該有的基本都有。

1.2 檔案夾和檔案的開啟

檔案——>開啟檔案夾/開啟檔案

1.3 新建檔案/檔案夾

新建檔案:

a. 檔案——>新建檔案;

b. 按Ctrl+n;

c. 點檔案夾名後面的+號圖標。

新建檔案夾:

點檔案夾名後面的+號圖標。

1.4 拆分編輯器(分列)

快加鍵:Ctrl+\

點擊拆分編輯器圖標(右上角)進行拆分編輯器。拆分完畢之後,可以透過鼠標點擊拖動檔案到相應的列。多列同時瀏覽免去多檔案來回切換。

1.5 集成終端

終端對開發者來說不可或缺,Visual Studio code 自然也自帶終端視窗。

可按快速鍵Ctrl+`快速調出終端,也可以 檢視——>集成終端 調出。

需要注意的是:如果當前的檔案夾的路徑名稱包含中文,會出現終端開啟失敗(待驗證)。

1.6 安裝/卸載擴展(插件)

a. 進入擴展視圖介面安裝/卸載

a1.快速鍵:Ctrl+shift+x;

a2.檢視——>擴展;

a3.點左側邊框的擴展圖標按鈕進入。

在頂部搜尋方塊輸入你需要的擴展插件,找到之後在擴展插件後面的選項中點擊【安裝】即可,需要卸載擴展只需要點【卸載】即可。

擴展下載安裝完畢之後需要點擊【啓用】才生效,有些擴展需要重啓編輯器才生效。

b. 如何選擇擴展(插件)呢?

其實也不難,擴展的名稱一般都暴露了它的功能,基本如下:

1.帶snippets 一般是代碼提示類擴展;

2.帶viewer 一般是代碼執行預覽類擴展;

3.帶support 一般是代碼語言支援;

4.帶document 一般是參考文檔類擴展;

5.帶Formatt 一般是代碼格式化整理擴展;

當然有的snippets 也自帶support功能,並不是以上面的關鍵詞作爲唯一標準。

1.7 檔案圖標主題設定

之前寫的有一篇經驗,連結附上。

0Visual Studio Code 怎麼設定檔案圖標主題?

END

2.VS code用戶設定

2.1 用戶設定入口

VS code支援用戶自訂設定編輯器,包括快加鍵修改、代碼高亮、以及擴展插件配置等,點擊檔案——>首選項——>用戶設定。

編輯器會拆分爲兩列,一個檔案是【默認設定】,一個是【settings.json】,用戶設定是空的【settings.json】這個檔案(之前沒有設定的話),需要自訂的設定項就在settings.json檔案裏寫入json代碼即可。

2.2 自訂的設定方法爲:

1、在【默認設定】裏找到相關的設定json代碼段,複製該設定完整的json塊,例如:【"editor.fontSize": 14,】。

2、到【settings.json】粘貼。不過記得加上外層(前後)“{}”符號,不然不是完整的json,會出錯或者設定無效。

例如:

{ "editor.fontSize": 20}

完後按Ctrl+s儲存關掉視窗,編輯器的文字的大小就變成20了。

需要注意的是,【settings.json】的代碼必須符合json格式,且名稱(如上面的editor.fontSize)和值對(如上面的20)是【默認設定】裏有的或者是擴展中支援的,不然不會有任何作用。

END

3.插件推薦及使用配置

VS code的擴展還是比較豐富的,具體選擇方法在前面的步驟1.6已經教大家了,下面介紹幾個對基本web前端編輯比較實用的擴展插件(我個人認爲)。

3.1 HTNL Snippets

爲HTML文檔提供代碼提示功能,包含HTML5。

3.2 easyless爲less文檔提供提示,錯誤警告,以及把less文檔編譯爲css檔案。可自訂設定。開發者給出的配置例子:

"less.compile": {"compress": true,"sourceMap": true,"out":false}

可以粘貼到用戶設定的【默認設定】裏,也可以粘貼到用戶設定settings.json裏。後面的懂json的同學自動忽略:如果settings.json是空的,應該寫成:

{"less.compile": {"compress": true,"sourceMap": true,"out":false}}

如果之前已有寫入json代碼,你應該在前面的名稱/值對塊後面加上“,”(新手容易多加或者少加","符號,個人覺得是這樣的)。

****提示:****

在寫的時候,代碼內最好不要加註釋。"sourceMap": true, 這個地方最好設定成false ,因爲當你實際使用的時候瀏覽器找不到sourceMap 可能會報錯或者瀏覽器一直去找,還沒遇到過(我碰到jQuery.js因爲這個報錯的),入門的同學還是設定成false 比較好。

3.3 VS color Picker

爲css文檔和HTML文檔提供顏色選擇,當輸入“#”後會出現顏色選擇器浮窗,點擊相應顏色之後會插入文檔中,默認用16進製表示。若想用其他格式的顏色,如RGB等則推薦擴展:Color Picker (Color Picker缺點是需要配置,安裝nodejs,並且添加node到全局環境變量中。而且在插入時需要使用命令調出提色板,有點麻煩)

3.4 live HTML Previewer

爲html文檔提供預覽功能,需要用命令或者快速鍵調出,會在編輯器中新增一列,用於執行html檔案。

a. 按F1在命令框中輸入:Show side preview 新增一列顯示html,能邊寫邊看到效果,實時預覽。

b. 可以在html文檔中右鍵選擇:Open in browser 在系統默認瀏覽器中開啟,該模式下不能提供實時預覽,儲存時不自動重新載入瀏覽器。

3.5 SVG Viewer

爲SVG 文檔在編輯器中提供預覽。

a. 按F1在命令框中輸入:SVG

b. 選擇SVG Viewer,新增一列顯示SVG執行結果。

END

4.VS code 用戶代碼片段

4.1 用戶代碼片段 設定入口及示例

用戶代碼片段 是用來提示代碼提示及快捷插入的,那麼怎麼做呢?

1.檔案——>首選項——>用戶代碼片段

2.選擇代碼語言

3.按固定格式寫json代碼

示例格式:

"Print to console":

{"prefix": "log",

"body": ["console.log('$1');","$2"],"description": "Log output to console"}

4.2 片段json示例寫法詳解

可變區域(這裏用XXXX表示)如下:A. "Print to XXXX": {

//僅作爲標識和目的用途,區別於其他代碼塊(有多個相同值時會報錯),不會插入。

B."prefix": "XXXX",

//觸發提示的關鍵字元,也就是輸入什麼時彈出提示窗。例如:當希望輸入a的時候就彈出,這裏就寫a。在提示窗顯示。

C. "body": ["XXXX $1 XXXX"],

//在編輯器中插入的代碼塊,例如當在提示窗中選擇a的時候就插入【<a>a</a>】那麼這裏就寫:<a>a</a>

D. "description": "XXXX"

// 這裏是相關描述,比如說明插入的代碼塊內容、用途、代碼結構、參數等,僅在提示窗顯示不會插入}

E. 上面示例中的$1和$2是初始定位遊標位置,用於插入後需要修改的值、參數等。還是上面的例子:

"body":["<a>$1</a>"]

那麼在插入<a></a>之後,遊標的位置將處於<a>和</a>的中間。再如:

"body":["<a>$1</a>",

"<span>$2GBK</span>"]

那麼在插入

<a></a>

<span>GBK</span>

之後,遊標首先在a標籤內,輸入完內容之後,遊標跳到<span>和GBK中間。輸入或者移動遊標之後遊標恢復正常

4.3 怎麼使插入的代碼塊符合格式化標準?

代碼格式化主要就是縮進和換行了。

1.要縮進的地方按下TAB鍵即可,例如:[" <a>$1</a>"]

2.怎麼在"body":[]中插入帶雙引號的內容?因爲註釋帶有特殊符號尤其是帶有雙引號("")的內容會導致json報錯,解決方法是用反斜槓“\”對特殊符號進行轉義。

例如:

那麼"body":[]那裏應該這樣寫:

這裏在"description": "XXXX"那裏同樣適用。

總的來說,碰到json報錯的字元或者符號就用反斜槓“\”進行轉義。當然你要考慮插入之後會不會影響程序文檔報錯或者出現異常,也就是要先確定插入的代碼塊是正確的完整的,這是自訂代碼塊存在的意義

4.4 下面是我寫的一段完整的示例(XXXX都匿了):自訂的json{

"Print to authorInfo": {

"prefix": "au",

"body": [

"-----By Ray-----",

"mail:XXXXXXX",

"description:$1",

" Step 1:",

" Step 2:",

"<a href=\"XXXX/\">凱玩網</a>"],

"description": "author info"

軟件技巧(8)---- Ubuntu 開發環境搭建/Visual studio code 使用技巧

Ubuntu 18.04安裝完後,還需要做一些配置才能愉快的使用,包括更新軟件源、安裝搜狗輸入法、安裝eclipse、Chrome瀏覽器、配置快速鍵、安裝git、安裝Visual studio code 等等,下面就來介紹這些軟件的配置方法.

sudo apt-get update 等待源更新完成即可

直接在Ubuntu 的軟件中心找到 Chromium 輸入法安裝即可

直接在Ubuntu 的軟件中心找到Visual Studio Code安裝即可

直接在Ubuntu 的軟件中心找到Eclipse安裝即可

回到“語言支援”視窗,在鍵盤輸入法系統中,選擇“fcitx”

如果在鍵盤輸入法系統中,沒有“fcitx”選項時,建議先開啟終端手動安裝fcitx:sudo apt-get install fcitx 等安裝成功之後再執行上述步驟點擊“應用到整個系統”,關閉視窗,重啓電腦

重啓後使用 shift 鍵就可以切換輸入法

設定 -- Device -- Keyboard 選項

配置 shift + windows + S 鍵爲我們截圖的快速鍵

檔案-- 開啟檔案夾 就可以開啟一個工作區

檔案 -- 首選項 -- 設定 在設定裏更改字型,注意的字型是需要自己手動輸入的

在需要查找的變量或者函數上右擊 -- 查找定義

工作區分爲檔案預覽區,函數預覽區(大綱),編輯區

編輯器右側 -- 顯示開啟的編輯器,可以查找檔案名或者函數名

格式爲 / .a 表示排除所有檔案夾下的 .a 檔案

Visual Studio Code 怎麼安裝插件

1、首先開啟vscode軟件,點擊左邊按鈕中的插件按鈕,進去後這裏有個搜尋方塊,軟件默認也會推薦一些插件,可以根據需要安裝。如果是精確的安裝一個插件,可以點擊上方的搜尋按鈕搜素:

2、比如搜素一款能夠同步vscode設定的名叫Settings Sync的插件,輸入搜尋詞後,下方會展示搜尋結果,點擊進入插件說明,在右邊的介面上點擊安裝按鈕:

3、等待數秒安裝完畢後,點擊重新加載才能使它生效:

4、重啓vscode後,插件就安裝成功了,此時很多插件會在右下角彈出提示框。以上就是Visual Studio Code 安裝插件的方法:

如何使用 visual studio code 編譯和調試 java 代碼

介紹

Visual Studio Code的宣傳語是:

一個執行於 Mac OS X、Windows和 Linux 之上的,針對於編寫現代 Web 和雲應用的跨平臺原始碼編輯器。

按說的,Visual Studio Code特別適合來作爲前端開發編輯器。

內置html開發神器emmet(zencoding),對css及其相關編譯型語言Less和Sass都有很好的支援。

當然,最nice的還是寫js代碼了,這也是接下來要着重介紹的功能。

智能提示

因爲之前微軟推出了typescript語言,結合tsd檔案,用visual studio寫typescript代碼是相當爽的,智能提示的功能非常nb。

這個功能理所應當也被vsc繼承了。

目前主流的前端類庫/框架,包括node.js及其模組/框架都有相應的tsd檔案,可以去DefinitelyTyped上找一下。

在項目中引入對應檔案,就可以有智能提示了。

這裏以angular爲例,使用步驟如下:

全局安裝tsd,透過tsd安裝.d.ts檔案。這樣會在項目下面生成.typings目錄,目錄下面就是下載的.d.ts檔案,再寫代碼的時候就會有智能提示了。具體用法參考tsd用法。

npm install -g tsd

tsd query angular --action install

如果不想自己手工引入,也可以在angular變量後面按ctrl+k,會有個燈泡圖片,點擊燈泡圖片就會有對應提示,選擇下載xx.d.ts檔案就可以了,編輯器會下載對應檔案放在.typings目錄。

過程如下圖:

說完智能提示,再說代碼調試。

調試Node

之前寫過文章介紹過node.js的調試方案(Node.js調試)。從vsc發佈後,就一直用寫代碼,也是用來調試node.js代碼。

使用方法也很簡單,步驟如下:

開啟要調試的檔案,按f5,編輯器會生成一個launch.json

修改launch.json相關內容,主要是name和program字段,改成和項目對應的

點擊編輯器左側長得像蜘蛛的那個按鈕

點擊左上角DEBUG後面的按鈕,啓動調試

打斷點,盡情調試

過程如下圖:

最後,再贈送彩蛋一個。

Node API 檢視

在寫node.js代碼的時候,有時會忘記某個模組中有哪些方法及其用法,經常要去官網翻一下api文檔。

這裏介紹下怎麼使用vsc來搞定這一問題。

開啟vsc控制檯(Help > Toggle Developer Tools > Console)

在控制檯寫代碼,查詢模組方法。

過程如下圖:

vsc是用atom-shell(現在叫electron)寫的,這和node-webkit(現在叫nw.js)一樣,都是把node.js和chrome結合起來的工具,所以可以這麼使用。

不過vsc使用到的node.js模組並不多,比如引用util和vm等會報錯,用node-webkit就不會這樣。

如何使用 visual studio code 編譯和調試 java 代碼

如何使用 visual studio code 編譯和調試 java 代碼

算法可表示如下:

S1: sigh=1

S2: sum=1

S3: deno=2

S4: sigh=(-1)×sigh

S5: term= sigh×(1/deno )

S6: term=sum+term

S7: deno= deno +1

S8:若deno≤100,返回S4;否則,結束。

visual studio code怎麼執行python怎麼

1.安裝 Python 插件 進入主介面之後按Ctrl + p,輸入:ext install python,下載第一個即可。 下載Python 插件後即可在編寫 Python 腳本時使用代碼自動補全功能。

2.設定 Python 執行 要在Visual Studio Code 中執行 Python 代碼需要修改 tasks.json 配置代碼,而修改 tasks.json 配置代碼則必須先創建工作檔案夾。

Tags:studio visual code