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”后重启,配置完成,如图:

转载于:https://www.cnblogs.com/xiaocai0923/p/10363905.html

Microsoft Visual Studio Code的安装教程如下: 1. 首先,打开你的Web浏览器,并访问官方网站:[https://code.visualstudio.com/](https://code.visualstudio.com/)。这个网站提供了Microsoft Visual Studio Code的官方下载链接。 2. 在下载页面上,你可以看到VS Code的不同版本,选择适用于你操作系统的版本,比如Windows、macOS或Linux。点击相应的下载链接。 3. 下载完成后,双击下载的安装文件,启动安装程序。 4. 在安装向导中,你可以选择安装位置和其他选项。通常,你可以使用默认设置进行安装。根据操作系统的要求,可能需要你提供管理员权限。 5. 安装程序会自动安装Microsoft Visual Studio Code,并创建相应的快捷方式。 6. 安装完成后,你可以双击桌面上的快捷方式启动Microsoft Visual Studio Code。 7. 第一次启动时,你可能需要进行一些初始配置,例如选择界面语言、安装推荐的扩展等。 8. 完成配置后,你就可以开始使用Microsoft Visual Studio Code进行开发了。 总结起来,你可以通过以下步骤安装Microsoft Visual Studio Code: 1. 访问[https://code.visualstudio.com/](https://code.visualstudio.com/),下载适用于你操作系统的版本。 2. 双击下载的安装文件,启动安装程序,并按照向导的指示完成安装。 3. 启动Microsoft Visual Studio Code,并进行一些初始配置。 4. 完成配置后,即可开始使用Microsoft Visual Studio Code进行开发。 希望这个安装教程对你有所帮助!<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Visual Studio Code (VS Code)安装教程(非常详细)从零基础入门到精通,看完这一篇就够了](https://blog.csdn.net/Javachichi/article/details/131438751)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值