JavaScript开发

概述

通过通用集成开发环境进行JavaScript项目开发。

环境准备

• nodejs软件包：提供nodejs运行时，运行javaScript项目。

• JavaScript开发相关插件KylinIDETeam.js-debug和KylinIDETeam.historydebug

  • KylinIDETeam.js-debug：调试NodeJS应用,该插件为Kylin-Code(Kylin-IDE)内置插件，无需用户手动安装
  • KylinIDETeam.historydebug：历史调试插件，在调试过程中记录中断时的堆栈信息，并可在调试过程中或结束后查看调试时的堆栈信息，用户可在调试过程中记录关心的调试信息以便在需要的时候复现调试信息.用户可以根据需要决定是否安装

• KylinIDETeam.historydebug的安装

  • 启动通用集成开发环境
  • 点击活动栏中的插件图标，调出插件视图。
  • 点击插件视图中的插件筛选器图标，选择Kylin-IDE(KylinCode)插件分类->Javascript语言支持
  • 通过以上步骤找到javaScript语言相关插件KylinIDETeam.js-debug（KylinIDETeam.js-debug为内置插件无需再次安装）和KylinIDETeam.historydebug，点击KylinIDETeam.historydebug插件右下角的安装图标进行安装操作
  • 安装成功后，重新加载窗口

快速开始

创建JavaScript项目

• 在终端创建文件夹myProject
• 启动通用集成开发环境，点击文件->打开文件夹，选择myProject
• 点击新建文件图标，创建JavaScript文件hello.js
  

编辑

• 在新建的hello.js文件中输入JavaScript代码

  var msg="hello world";
  console.log(msg);

IntelliSense

IntelliSense提供了代码补全、代码着色、参数信息等。如图所示

代码导航

在编辑区的右键菜单中可以看到支持的代码导航,比如转到定义、转到实现、转到引用等

运行

需要创建运行配置文件tasks.json，tasks.json文件被存储在.vscode文件夹内。创建方法如下：

• 点击菜单中的终端->配置任务->使用模板创建tasks.json文件->others
• tasks.json文件创建成功
  创建的tasks.json默认内容如下：

  {
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
      {
          "label": "echo",
          "type": "shell",
          "command": "echo Hello"
      }
    ]
  }
• 修改tasks.json文件，修改后内容如下：

  {
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
      {
          "label": "run", //运行任务的名称
          "type": "shell",
          "command": "node",
          "args": ["hello.js"]
      }
    ]
  }
• 点击菜单中的终端->运行任务->run->继续而不扫描任务输出,运行任务
• 在终端输出运行结果
  

调试

一键调试

对于一个简单的JavaScript文件的调试，不需要进行配置，支持一键调试。

• 在hello.js文件左侧点击鼠标左键添加断点
• 点击左侧活动栏中的调试按钮，切换到调试视图
• 点击运行和调试按钮启动调试
  

自定义调试

对于复杂的项目，需要创建调试配置文件launch.json，launch.json文件被存储在.vscode文件夹内。创建方法如下：

• 点击菜单中的运行->添加配置,选择node.js调试器
  
• launch.json文件创建成功
  创建的launch.json默认内容如下：

  {
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
      {
          "type": "pwa-node",
          "request": "launch",
          "name": "Launch Program",//调试名称
          "skipFiles": [
              "<node_internals>/**"
          ],
          "program": "${workspaceFolder}/hello.js" //调试的文件
      }
    ]
  }
  该launch.json文件配置可以调试myProjet,其他项目用户需要根据具体情况修改launch.json文件
• 在hello.js文件左侧点击鼠标左键添加断点
• 点击左侧活动栏中的调试按钮，切换到调试视图
• 点击Launch Program启动调试