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

Visual Studio Code 入门教程的更多相关文章

  1. 【vscode高级玩家】Visual Studio Code❤️安装教程(最新版🎉教程小白也能看懂!)

    目录 如果您在浏览过程中发现文章内容有误,请点此链接查看该文章的完整纯净版 下载 Linux Mac OS 安装 运行安装程序 同意使用协议 选择附加任务 准备安装 开始安装 安装完成 如果您在浏览过 ...

  2. Visual Studio Code 使用教程

    visual studio code以下简称vsc.vsc这个编辑器也火了一会了,最近在跟风学一波typescript,网络上很多人说vsc是最适合ts的编辑器,而且这个编辑器本身也很好用,所以学一下 ...

  3. [一]Cesium利其器——Visual Studio Code

    Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ IDE Web前端刚入门的朋友,常常想选择一个快速.好用.流行( ...

  4. 【Python】Visual Studio Code 安装&&使用 hello python~~~~

    1.安装Python 官网下载: https://www.python.org/downloads/   选择版本下载 2.下载完毕后,点击安装. 3.看到页面,直接下一步,全部默认选项. 4.安装即 ...

  5. python从零开始基础入门——开发环境搭建:Visual Studio Code

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:山海皆可平z PS:如有需要Python学习资料的小伙伴可以加点击下方 ...

  6. 《Visual C++ 2010入门教程》系列一:关于Visual Studio、VC和C++的那些事

    原文:http://www.cnblogs.com/Mrt-02/archive/2011/07/24/2115606.html 作者:董波 日期:2010.6.15 写在前面 在我还在上学的时候,我 ...

  7. Visual Studio Code教程:基础使用和自定义设置

    一.界面介绍 1.1 界面介绍 1.2 文件夹和文件的打开 文件——>打开文件夹/打开文件 1.3 新建文件/文件夹 新建文件: a. 文件——>新建文件: b. 按Ctrl+n; c. ...

  8. 最全的Visual Studio Code配置及使用教程

    史上最全vscode配置使用教程 工欲善其事,必先利其器.想要优雅且高效的编写代码,必须熟练使用一款前端开发工具.但前端开发工具数不胜数,像HBuilder.Sublime Text.WebStorm ...

  9. Visual Studio Code中文文档(一)-快速入门

    Visual Studio Code是一个轻量级但是十分强大的源代码编辑器,重要的是它在Windows, OS X 和Linux操作系统的桌面上均可运行.Visual Studio Code内置了对J ...

随机推荐

  1. 最短路【bzoj1726】: [Usaco2006 Nov]Roadblocks第二短路

    1726: [Usaco2006 Nov]Roadblocks第二短路 Description 贝茜把家搬到了一个小农场,但她常常回到FJ的农场去拜访她的朋友.贝茜很喜欢路边的风景,不想那么快地结束她 ...

  2. 去除List集合中的重复值(四种好用的方法)

    最近项目中需要对list集合中的重复值进行处理,大部分是采用两种方法,一种是用遍历list集合判断后赋给另一个list集合,一种是用赋给set集合再返回给list集合. 但是赋给set集合后,由于se ...

  3. 【论文】CornerNet:几点疑问

    1.cornerpooling的设计,个人觉得解释有些牵强. 这里的两个特征图如何解释,corner点为何是横向与纵向响应最强的点.如果仅仅当成一种奇特的池化方式,恰好也有着不错的效果,那倒是可以接受 ...

  4. UntraEdit 语法高亮 (MSSQL)

    http://www.ultraedit.com/downloads/extras/wordfiles.html 这里有ue 支持的语言的uew文件. 需要把下载的语法文件放到: %APPDATA%\ ...

  5. 德国生活tips

    提要: 在德国生活也近7个月的时间了,简单给准备来德国留学,生活或者是旅游的人写一些小tips.想到什么就写什么咯. (1)德国交通篇 在德国,交通是第一要点,一般大家都会看到城市里有Straßenb ...

  6. 研磨设计模式学习笔记1--简单工厂(SimpleFactory)

    需求:实现一个简单工厂,客户端根据需求获取实现类. 简单工厂优点: 客户端不需要知道工厂内部实现,然组件外部实现面向接口编程. 客户端.实现类解耦. 一.接口及实现类 //接口 public inte ...

  7. 常见的几种web攻击方式

    一.Dos攻击(Denial of Service attack) 是一种针对服务器的能够让服务器呈现静止状态的攻击方式.有时候也加服务停止攻击或拒绝服务攻击.其原理就是发送大量的合法请求到服务器,服 ...

  8. selenium-webdriver(python) (十四) -- webdriver原理(转)

    之前看乙醇视频中提到,selenium 的ruby 实现有一个小后门,在代码中加上$DEBUG=1 ,再运行脚本的过程中,就可以看到客户端请求的信息与服务器端返回的数据:觉得这个功能很强大,可以帮助理 ...

  9. free -m命令输出详解

    free -m输出有3行: Mem:表示物理内存 -/+ buffers/cached:表示物理内存缓存 Swap:表示硬盘交换分区 其中Mem中的total.used.free.shared.buf ...

  10. 性能测试工具Jmeter11-Jmeter图形监控扩展

    插件下载地址:http://jmeter-plugins.org/downloads/all/ 1.首先将JmeterPluging.jar包复制到Jmeter的Lib目录下面的ext目录下面,然后重 ...