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

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

　　 2、配置launch.json 　　

 　　{

　　　　"type": "node",

　　　　"request": "launch",

　　　　"name": "Launch Program",

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

　　}

　　3、切換到debug頁面，啟動調試，如圖：

　　　　

 如何設置成中文

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

 

   輸入configure language

 

 最后在新打開的語言配置文件里面，將locale：“en-us” 修改成 locale：“zh-cn”后重啟，配置完成，如圖：