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. 11、OpenCV Python 图像金字塔

    __author__ = "WSX" import cv2 as cv import numpy as np # 高斯金字塔 #金字塔 原理 ==> 高斯模糊+ 降采样 #金 ...

  2. luogu4151 最大XOR和路径

    然后呢这道题其实很简单 我们先考虑一种简单的情况,从1直接走到n(不管怎么走的,反正就是走) 然后就能找到一个路径了 这个走的过程用各种zmj算法都能过 然后呢我们发现如果直接走基本不会得到最优解,考 ...

  3. .NET Services Stack笔记之手写版

  4. virturalenv 虚拟环境

    一.window系统 1.virtualenv的使用 2.pycharm使用 环境变量,path的作用:命令行中执行的命令,他们的路径,必须在path路径中,如果命令行找不到该命令,就是说path没写 ...

  5. zabbix监控tcp连接数的脚本!!

    #!/bin/bash #this script is used to get tcp and udp connetion status #tcp status metric=$ tmp_file=/ ...

  6. javascript 获取当前 URL 参数的两种方法

    window.location.host; //返回url 的主机部分,例如:www.xxx.com window.location.hostname; //返回www.xxx.com window. ...

  7. Educational Codeforces Round 7 B

    Description You are given the current time in 24-hour format hh:mm. Find and print the time after a  ...

  8. 实时同步sersync

    1.1 sersync+rsync实现实时同步过程 第一个历程:安装sersync软件 将软件进行下载,上传到系统/server/tools目录中 下载软件地址:https://github.com/ ...

  9. LeeCode(No4 - Median of Two Sorted Arrays)

    There are two sorted arrays nums1 and nums2 of size m and n respectively. Find the median of the two ...

  10. 【ACM】会场安排问题

    会场安排问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 学校的小礼堂每天都会有许多活动,有时间这些活动的计划时间会发生冲突,需要选择出一些活动进行举办.小刘的工 ...