vscode下搭建Typescript编译环境

Posted 2023-05-03

参考技术A Typescript 是微软开发的一个javascript的超级。著名前端框架的Angular和html5游戏引擎Egret等都选择了Typescript作为编写语言。“工欲善其事，必先利其器”，在学习Typescript语言之前必须要有一个良好的开发环境。这里笔者选择了轻量的Visual Studio Code，此工具具有轻量、跨平台、插件丰富等特点，是一款非常优秀的开发工具。

1、首先需要安装Nodejs，安装过程网上很容易搜到，在此不再介绍。安装完成后，在命令窗口输入

2、安装typescript模块

安装完成后，可以查看typescript模块的版本号

3、创建项目目录，在命令窗口中进入该项目目录,创建tsconfig.json。例如项目地址是D:\test\ts。

在项目目录下会生成一个tsconfig.json文件

里面有很多配置项，大家可以根据各自的需要来定制。本文用的示例配置如下,

新建tscript、js文件夹，分别用作存放typescript、javascript文件。

4、测试编译
在Visual studio code中打开ts目录，在tscript目录中新建test.ts文件。

然后点击菜单中的Tasks->Run Task。

之后会出现tsc:build 、tsc:watch两个选项

其中tsc:build选项是用于一次编译。tsc:watch选项可以监测ts文件的改动，可以进行实时编译，非常方便。经过编译后的文件会存放在之前配置好的js文件目录下。

如此就可以进行Typescript之旅了。~~

JAVA 基础开发环境 vscode 搭建 Windows下VSCode编译运行简单java

JAVA 基础开发环境 vscode 搭建

来源 https://www.cnblogs.com/freewsf/p/7744728.html

对于使用 Visual Studio Code 的 Java 开发者来说，Language Support for Java(TM) by Red Hat 扩展提供了非常好的语言特性支持，比如智能感知和项目支持等。然而，我们也听到一些用户反馈需要调试 Java 程序。今天，我们万分激动地宣布，我们与 Red Hat 合作开发了能让开发者调试 Java 应用程序的轻量级扩展：Java Debugger for Visual Studio Code，它基于 Java Debug Server。

注意: Java Debugger for Visual Studio Code 和 Java Debug Server 都将在发布初始版后不久开放源码。

 

为了让 Java 开发者能尽快开始使用 VS Code，我们也创建了一个 Java 扩展包，它包含了 Language Support for Java(TM) by Red Hat 和 Java Debugger for Visual Studio Code 这两个扩展，这样你不需要单独去搜索安装这些扩展。这是刚刚开始创建的一个现代 Java 工作流程，将来我们会往 Java 扩展包中添加更多特性和扩展。

 

开始

从以下步骤开始：

1. 在 Visual Studio Code 中打开扩展视图(Ctrl+Shift+X)。

2. 输入“java”以过滤扩展列表。

3. 找到并安装 Java Extension Pack (Java 扩展包)，如果你已经安装了 Language Support for Java(TM) by Red Hat，也可以单独找到并安装 Java Debugger for Visual Studio Code 扩展。

你也可以直接从本文中安装 Java 扩展包：

安装 Java 扩展包    （安装了 VSCode 的情况下，点击上面的链接即可调用 VSCode 进行安装）

重启 VSCode，打开包含 Java 项目的代码，然后按下面的步骤进行：

1. 准备项目。打开一个 .java 文件，Java 扩展会激活。Maven、Gradle 和 Eclipse 项目都能得到支持。这个扩展会自动构建项目，不需要手工触发构建。

2. 开始调试。切换到调试视图(Ctrl+Shift+D)，打开 launch.json 并添加 Java 调试配置。

3. 在 mainClass 中填入要启动的类，或者在 hostName 中填入要附加的主机名以及在 port 中填入端口。

4. 设置断点并按 F5 开始调试。

5. 

6. 

支持的特性

在这个版本中，我们支持以下特性：

• 启动/附加 - 你可以在 VS Code 中启动一个 Java 项目，也可以附加到一个在本地或远程端以调试模式运行的 JVM 进程。

• 断点 - 支持表达式条件或命中条件断点，可以在内置的断点设置容器中轻松进行设置。因此你可以直接在源代码视图中插入断点，不需要弹出容器，非常方便。按异常中断也得到了支持。

• 控制流 - 包括 暂停、继续 F5、单步 F0、步进 F11、步出(跳出) Shift+F11。

• 数据审查 - 当程序停止在断点上的时候，调试器可以访问当前内存中的变量名和值。支持查看/监视/设置变量值。

• 诊断 - 调用栈 面板会显示程序的调用栈，你在这个面板中可以在捕获的调用路径中随意跳转。多线程调试也通过并行栈得到支持。

• 调试控制台 - 可以从调试控制台看到标准输出和错误输出信息。

官方文档：

 

The Java support in VS Code is provided through extensions and optimized for lightweight Java projects with a simple, modern workflow. Popular extensions in the Marketplace provide project support, code completion, linting, debugging, code formatting, snippets, and more.

Download VS Code - If you haven\'t downloaded VS Code yet, quickly install for your platform (Windows, Mac, Linux).

Install Java Extensions

VS Code is a fast editor and ships with only the basic features. Add Java language support to VS Code by installing the popular Java extensions.

1. In Visual Studio Code, go to the Extensions view (Ctrl+Shift+X).
2. Filter the extensions list by typing "java".

To help set up Java on VS Code, there is a Java Extension Pack which contains two popular extensions:

1. Language Support for Java(TM) by Red Hat
2. Java Debugger for Visual Studio Code

Install the Java Extension Pack

This document describes the features included in the Java Extension Pack.

Java Project Support

Maven, Eclipse and Gradle Java project are supported through Language Support for Java(TM) by Red Hat, by utilizing M2Eclipse which provides Maven support and Buildship which provides Gradle support through the Eclipse JDT Language Server.

Please note that Gradle-based Android projects are not supported.

Editing and Navigating Code

Linting

A linter is a tool that provides warnings for suspicious looking code. Language Support for Java(TM) by Red Hat provides this feature to report parsing and compilation errors as you type, so you can fix them inside VS Code.

Intellisense

VS Code also supports code completion and Intellisense for Java through Language Support for Java(TM) by Red Hat. Intellisense is a general term for a number of features, including intelligent code completion (in-context method and variable suggestions) across all your files and for built-in and thirty-party modules.

Search for symbols

You can search for symbols in the current file or workspace to navigate your code more quickly.

To search for a symbol in the current file, use Quick Open (Ctrl+P) then enter the \'@\' command, then enter the name of the symbol you\'re looking for. A list of potential matches will appear and be filtered as you type. Choose from the list of matches to navigate to its location.

To search for a symbol in the current workspace, start by pressing Ctrl+T, then enter the name of the symbol. A list of potential matches will appear as before. If you choose a match that was found in a file that\'s not already open, the file will be opened before navigating to the match\'s location. Alternatively, you can also use Quick Open (Ctrl+P) then enter the \'#\' command to search the current workspace.Ctrl+T is just the shortcut for the \'#\' commands, respectively, so everything works the same.

Peek Definition

You can take a quick look at how a symbol was defined by using the Peek Definition feature. This feature displays a few lines of code near the definition inside a peek window so you can take a look without navigating away from your current location.

To peek at a symbol\'s definition, place your cursor on the symbol anywhere it\'s used in your source code and then press Alt+F12. Alternatively, you can choose Peek Definition from the context menu (right-click, then choose Peek Definition).

Go to Definition

You can also quickly navigate to where a symbol is defined by using the Go to Definition feature.

To go to a symbol\'s definition, place your cursor on the symbol anywhere its used in your code and then press F12. Alternatively, you can choose Go to Definition from the context menu (right-click, then chooseGo to Definition). When there\'s only one definition of the symbol, you\'ll navigate directly to its location, otherwise the competing definitions are displayed in a peek window as described in the previous section and you have to choose the definition that you want to go to.

Other code editing features include:

• Code formatting
• Code snippets
• Code outline
• Code lens (references)
• Javadoc hovers
• Rename
• Highlights

Debugging

Java Debugger for Visual Studio Code is a lightweight Java Debugger based on Java Debug Server. It works with Language Support for Java by Red Hat to allow users debugging Java code using Visual Studio Code (VS Code).

The Java Debugger supports following features:

• Launch/Attach - You can either launch the Java project within VS Code or attach to any running JVM process in debug mode, locally or remotely.
• Breakpoints - Conditional breakpoints by Hit Count is supported and can easily be set using the inline breakpoint settings window. This allows you to conveniently add conditional breakpoints to your code, directly in the source viewer, without requiring a modal window. Break on exceptions is also supported.
• Control flow - Including Pause, Continue F5, Step over F10, Step into F11, Step out Shift+F11
• Data inspection - When you\'re stopped at a breakpoint, the debugger has access to the variable names and values that are currently stored in memory. Inspect/Watch/Set Variables are supported.
• Diagnostics - The CALL STACK panel shows the call stack of your program and allows you to navigate through the call path of each captured allocation. Multi-threaded debugging is supported by parallel stacks.
• Debug Console - The Debug Console lets you see information from both stdout and stderr.

You can launch the debugger following steps below:

1. Switch to the Debug view (Ctrl+Shift+D).
2. Open launch.json to add a debug configuration for Java
3. Fill in the mainClass for Launch setting or hostName and port for Attach.
4. Click Start button or press F5 to start debugging.

Next Steps

Read on to find out about:

• Basic Editing - Learn about the powerful VS Code editor.
• Code Navigation - Move quickly through your source code.
• Tasks - use tasks to build your project and more
• Debugging - find out how to use the debugger with your project

 

Windows下VSCode编译运行简单java

 

注意：vscode当前并不支持对java的调试，此文仅是配置使用vscode编译运行简单java，blackkitty并不写java所以此文仅供娱乐

先看效果： 

配置流程：

1. JDK & JRE 的配置（不细讲了网上一大堆）
2. VSCode的下载安装以及插件cpptools的安装（不细讲了，见blackkitty的另一篇文章中的步骤1和2:Windows下VSCode编译调试c/c++ ）
3. launch.json与tasks.json的配置
4. vsc_tasks_java.bat的配置
5. 完了！

务必确保1，2步骤已经完成。

3. launch.json的配置 
首先打开一个文件夹，新建一个java文件，写入代码： 
 
注意：代码第一行必须是运行时要启动class的名字，格式为两个斜杠加class名

然后按F5，选择C++(GDB): 

将自动生成的launch.json内容替换为一下内容并保存：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "JAVA Launch",
            "type": "cppdbg",
            "request": "launch",
            "launchOptionType": "Local",
            "targetArchitecture": "x86",
            "program": "${file}",
            "stopAtEntry": false,
            "cwd": "${workspaceRoot}",
            "externalConsole": true,
            "preLaunchTask": "cmd"
        }
    ]
}

 

切换至debug界面，点击调试，注意这里必须切换至debug界面（因为第一次要先选择一个调试类型），不能直接按F5，在第一次编译运行后，以后的编译运行可以直接按F5： 

此时会弹出信息框，点击”配置任务程序”： 

在这里随便选一个： 
 
然后用下面代码替换（注意看注释，有些可以自己调整）：

{
    "version": "0.1.0",
    "command": "cmd",
    "args": [
    "/c", "start", "cmd","/c",
    "vsc_tasks_java.bat",
    "hide:true",            //设为hide:true则会清除编译信息，否则将保留编译信息
    "${fileDirname}", 
    "${fileBasename}",
    "javac -Xlint:unchecked -encoding UTF-8 -g"     //javac默认部分编译参数
    ]
}

 

4.vsc_tasks_java.bat的配置 
将以下代码保存为vsc_tasks_java.bat文件，然后复制到C:\\Program Files (x86)\\Java\\jdk1.8.0_91\\bin\\文件夹下，注意与你自己的jdk所在位置对应，并确保环境变量设置正确

::::::::VSCODE TASKS JAVA BY BLACKKITTY::::::::
@echo off
set jfdir=%2
set jf=%3
set jccmd=%~4
set jclassdir=%jfdir%\\%jf%.class
set/p jstartclass=<"%jfdir%\\%jf%">NUL
set jstartclass=%jstartclass:~2%
echo.jfdir:%jfdir%
echo.jf:%jf%
echo.jccmd:%jccmd%
echo.jclassdir:%jclassdir%
echo.jstartclass:%jstartclass%
echo.---------------------------
echo.CMD EXECUTE: mkdir "%jclassdir%"
if not exist "%jclassdir%" mkdir "%jclassdir%"
echo.CMD EXECUTE: %jccmd% -d "%jclassdir%" "%jfdir%\\%jf%"
(%jccmd% -d "%jclassdir%" "%jfdir%\\%jf%") || set jcerror=true
if "%jcerror%" EQU "true" (pause&goto:eof)
pushd "%jclassdir%"
echo.-----------CLASS-----------
dir /b *.class
echo.-----------CLASS-----------
echo.CMD EXECUTE: java "%jstartclass%"
echo.---------------------------
if "%1" EQU "hide:true" (cls)
java "%jstartclass%"
pause
goto:eof
::::::::VSCODE TASKS JAVA BY BLACKKITTY::::::::

 

完成后再次启动调试，可见程序成功编译运行： 
不显示编译信息的： 
 
显示编译信息的： 

6.完了！

再次声明：vscode当前并不支持对java的调试，此文仅是配置使用vscode编译运行简单java，blackkitty并不写java所以此文仅供娱乐