Visual Studio Code 入門教程


Extensible and customizable.(可擴展的和可定制的,這是我喜歡它的原因)

Want even more features? Install extensions to add new languages, themes, debuggers, and to connect to additional services. Extensions run in separate processes, ensuring they won't slow down your editor.

目錄

為什么使用 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”后重啟,配置完成,如圖:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM