Visual Studio Code 編輯器 使用入門

目錄

爲何使用 VS Code 

VS Code 安裝

launch.json 簡介

使用VS Code 開發 Javascript

　　安裝Script插件

　　調試Script

 如何設置成中文

 

爲何使用VS Code 　　

　　以JavaScript爲表明，過去咱們調試JS的時候，須要使用瀏覽器F12，代碼上面須要利用console.log 或 alert 對過程進行輸出，習慣了例如VS 編譯器的開發人員會比較不習慣。現在可使用VS Code進行開發，它開源免費，經過安裝開發語言相關的插件，可讓VS Code實現相應的語法識別和代碼提示，目前拓展商店已經提供了大多數編程語言的插件，能夠隨便下載，經常使用有Script有JScript、EScript ,以及包括PHP，Python等其它語言。

 

VS Code 安裝

　　Visual Studio Code （這裏簡稱 VS Code） 下載地址： https://code.visualstudio.com/

 

launch.json 簡介

　　launch.json 是 VSCode 在當前開發目錄自動生成的一個配置文件。開發時，根據所在項目類型，進行程序啓動的路徑和運行環境配置，以下圖，描述的是當前須要調試的文件路徑爲

"${workspaceFolder}/scripts/debug.js"，程序採用node進行調試。

 

 點擊添加配置按鈕，能夠看到更多配置的選項，選項列表與當前安裝的拓展有關，好比安裝了Chrome以後。

 

在launch.json中一些預約變量的具體含義以下

${workspaceRoot}     VSCode中打開文件夾的路徑 

原文 ：the path of the folder opened in VS Code
${workspaceRootFolderName}   VSCode中打開文件夾的路徑, 但不包含"/" 

原文：the name of the folder opened in VS Code without any solidus (/)
${file}    當前打開的文件

原文： the current opened file
${relativeFile}    當前打開的文件（相對於workspaceRoot）  

原文：the current opened file relative to workspaceRoot
${fileBasename}   當前打開文件的文件名, 不含擴展名

原文：the current opened file's basename
${fileDirname}   當前打開文件的目錄名

原文： the current opened file's dirname
${fileExtname}   當前打開文件的擴展名  

原文：the current opened file's extension
${cwd}   當前運行任務的工做目錄（啓動目錄）

原文：the task runner's current working directory on startup

 

使用VS Code 開發 Javascript

安裝Script插件

 　　使用ECMAScript開發，安裝ESLint　　

　　 使用TypeScript開發，安裝TSLint

　　 使用Javascript開發，安裝jshint

調試Script

 　　一、調試環境，使用node編譯環境。

　　 二、配置launch.json 　　

 　　{

　　　　"type": "node",

　　　　"request": "launch",

　　　　"name": "Launch Program",

　　　　"program": "${workspaceFolder}/scripts/debug.js"  //將須要測試的js文件經過 require引用到debug.js進行調用，能夠實現模擬button點擊效果或用來測試算法

　　}

　　三、切換到debug頁面，啓動調試，如圖：

　　　　

 如何設置成中文

　　按鍵盤上的快捷鍵 Ctrl+shift+p，出現命令框，如圖：

 

   輸入configure language

 

 最後在新打開的語言配置文件裏面，將locale：「en-us」 修改爲 locale：「zh-cn」後重啓，配置完成，如圖：