Vscode搭建TS环境

最新推荐文章于 2024-06-28 22:54:10 发布
最新推荐文章于 2024-06-28 22:54:10 发布
阅读量1.7w 收藏 13
点赞数 3
分类专栏： JS IDE 文章标签： JS VSCode IDE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gofun4/article/details/80293222
版权
本文介绍了如何使用VSCode搭建TypeScript开发环境。首先，讲述了VSCode和TypeScript的基本概念，接着详细说明了所需的准备工作，包括安装VSCode和NPM。然后，通过全局安装TypeScript、初始化项目和配置tsconfig.json文件来一步步搭建环境。最后，阐述了如何设置VSCode的编译和调试模式，以便在VSCode中便捷地进行TypeScript的编译和调试工作。
摘要由CSDN通过智能技术生成

简介

VSCode 是微软公司推出的一款开源的文本编辑器，因其强大的功能，较快的启动速度（相比IDE而言）和内置的控制台，git等而广受好评。
而Typescript同样是微软推出的改良版Javascript，其作为JS的超集，完美兼容ES7的语法之外有着更完备的模块系统，更多的特性（装饰器，枚举），以及编译时的静态类型检查，有效避免了“动态一时爽，重构火葬场”的尴尬。

准备

  • VSCode

  • NPM （包管理工具）

步骤

  1. 打开命令行，键入npm i -g typescript 全局安装TS
  2. 继续在命令行环境下键入 tsc -init 进行初始化，
    你会发现根目录下多了 tsconfig.json 的文件，记录了编译成JS的选项
  3. 打开该文件，会发现主要选项已经帮你设置好了，比较常用的设置是
    • ”target” : 编译为何种规范，一般设置为 ES5 或者 ES2016/2017
    • “outdir” : 输出目录
    • “alwaysStrict” ： 打开严格模式 (‘use strict’)

  4. 命令行下输入 code . 打开VSCode进入该目录，按下 Ctrl+shift+B 快捷键会进行编译，初次编译会选择编译模式

最低0.47元/天 解锁文章
Gofun4
关注
  • 3
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
VS Code搭建Ts环境
Aprilyang42的博客
02-24 3845
VS Code搭建ts环境并创建项目进行编译测试
vscode ts安装环境
04-18
vscode ts安装环境。。
vscode配置Ts自动编译环境
yidianyuanzhidong的博客
07-01 680
tsc --init生成tsconfig.json后VScode报错 在配置文件tsconfig.json中找不到任何输入。指定的 “include“ 路径为“[“**/*“]”，“exclude“ 路径为“[]” 其实这个不算错误，只是因为没有找到任何.ts文件 这是因为有了tsconfig.json后，VScode会自动在include和exclude包含的范围中查找ts文件，如果找不到ts文件就会报错，当在include和exclude范围中添加了ts文件，VScode就不会报错了。 ...
Vscode搭建Ts环境
热门推荐
起小点
07-03 1万+
一.简介 VSCode 是微软公司推出的一款开源的文本编辑器，因其强大的功能，较快的启动速度（相比IDE而言）和内置的控制台，git等而广受好评。 而Typescript同样是微软推出的改良版Javascript，其作为JS的超集，完美兼容ES7的语法之外有着更完备的模块系统，更多的特性（装饰器，枚举），以及编译时的静态类型检查，有效避免了“动态一时爽，重构火葬场”的尴尬。 二.步骤 1....
VScode 环境配置
weixin_43360707的博客
06-11 207
https://blog.csdn.net/NanaPicture/article/details/96299679?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-12.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-12.nonecase
在VSCode中调试TS
weixin_51295096的博客
02-02 3262
最近觉得自己平时用TS比较少，于是开始主动用TS刷题，提高自己对TS的熟练度，也希望自己以后能用TS尽量使用TS。但是在用TS刷leetcode的过程中发现调试比较困难，以前用VSCode调试js文件很简单，直接添加一个配置就行了，在根目录下新建。// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?在 TS 文件中打断点，点击调试按钮。现在我们可以使用调试TS愉快的刷leetcode了~在题目中打断点，再点击小箭头就可以快乐调试了。
VsCode：配置TypeScript开发环境
最新发布
ChinaDragon10的博客
06-28 2491
VsCode：配置TypeScript开发环境
vscode中TypeScript环境配置
我的博客
01-29 1383
注意： 如果直接运行出现以下错误，是因为ts-node没有安装，只需要全局进行安装即可。乱码的解决方法： 在setting.json中配置。
TypeScript教程（一）在vscode中的配置TypeScript环境
风吹落叶的博客
01-20 3701
未来的开发者们请上座，随着时代的发展web网页的发展越来越丰富，掌握TypeScript显得更加有必要。
vs code中编译 TypeScript
sbc_sbc的博客
07-16 564
最近在尝试学习typescript, 发现对于新手来说在vs code中编译ts比较麻烦,搜集了网上的资料总结如下(亲测有效): 目录node 安装typescript 安装创建项目创建ts文件创建task.json创建launch.json编译文件 node 安装 首先要安装node.js ,这个网上都有,参考可以移步 node安装配置 typescript 安装 npm install -g typescript 创建项目 创建一个放置项目的文件夹,并在文件夹目录下输入: tsc -init 会生
vscode配置ts自动编译
weixin_44999830的博客
09-12 8570
安装步骤 1、安装TS npm install -g typescript 2、创建 tsconfig.json 文件 tsc --init target参数会让TS代码编写成es5的代码 outDir参数决定了你编译成功的js文件储存在哪里 3、点击菜单 终端-运行任务 在vscode中按 Ctrl + Shift + B tsc watch是自动监听，下次保存文件就自动编译 tsc ...
esbuild配合vscode搭建的ts开发环境，这编译速度，真香
专注前端、专注互联网、分享原创的博客
03-01 1173
esbuild目前是vite开发环境的底层打包工具，还是nest.js的生产构建工具。如果你不想引入框架，只想拥有一个纯粹的ts开发环境，那么就看看我的这篇文章吧！
VsCode中搭建TypeScript调试环境
m0_47584501的博客
09-15 1万+
无摘要
TS环境搭建以及在VScode运行的超简洁详细的图文流程介绍
weixin_62061392的博客
03-18 5457
TS安装，开发环境的搭建，在VScode运行的流程介绍
如何在VScode中运行TS 代码
qq_40259123的博客
01-17 1896
3. 全局安装typeScript 编译器（npm install -g typescript）执行这个命令的作用是生成【hello.js】文件。1. 安装VSCode。2. 安装node.js。命令，这个ts 文件就执行了。编译器，然后新建一个Ts 文件。
详解如何使用VSCode搭建TypeScript环境（适合小白）
liwenxiang629的博客
11-27 5915
因为TypeScript不能直接在浏览器上运行。它需要编译器来编译并生成JavaScript文件。所以需要首先安装好javascript环境，可以参考文章
VSCode 配置插件
qq_34820433的博客
04-13 2726
TypeScript 中开发中 VSCode 配置和插件安装。
Visual studio code 自动编译ts文件
Live and learn
05-08 597
步骤： 控制台中生成 tsconfig.json tsc --init 可在Vscode中，修改tsconfig.json中存放生成代码的目录。 "outDir": "./", /* Redirect output structure to the directory*/ Vscode中, 选中tsconfig.json，Ctrl+shift+B 选择监视模式 进行编译（每次有更新就会编译） ...
vscode配置html5开发环境
08-18
要在VSCode中配置HTML5开发环境，可以按照以下步骤进行操作： 1. 首先，确保你已经安装了VSCode编辑器。如果没有安装，可以从官方网站下载并安装。 2. 在VSCode中，点击菜单栏的“文件”选项，然后选择“打开文件夹”，选择你存放HTML5项目的文件夹。 3. 创建一个新的HTML文件。点击菜单栏的“文件”选项，然后选择“新建文件”。在新建的文件中，输入HTML的基本结构代码，例如： ```html <!DOCTYPE html> <html> <head> <title>My HTML5 Page</title> </head> <body> <h1>Hello, World!</h1> </body> </html> ``` 4. 在VSCode中安装并启用适合HTML5开发的插件。可以通过点击左侧的扩展图标，然后在搜索框中输入“HTML”，选择合适的插件进行安装。 5. 如果需要在本地进行调试，可以使用一个轻量级的HTTP服务器插件来启动一个本地服务器。其中一个常用的插件是lite-server。可以通过终端或命令提示符进入项目文件夹，并执行以下命令安装lite-server插件： ```bash npm install --save-dev lite-server ``` 6. 在VSCode中打开终端或命令提示符，进入项目文件夹，并输入以下命令启动lite-server： ```bash npx lite-server ``` 7. 此时，你应该能在浏览器中看到你的HTML页面。可以通过在浏览器中输入`http://localhost:3000/`来进行访问和调试。 请注意，以上步骤是在VSCode中配置HTML5开发环境的一种常见方式，并不是唯一的方法。根据个人需求和偏好，还可以使用其他插件或工具来进行HTML5开发。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [HTML5 开发环境搭建](https://download.csdn.net/download/u010742414/8603309)[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: 50%"] - *2* *3* [H5开发3D引擎：VSCode+TS开发环境搭建](https://blog.csdn.net/qq_37591637/article/details/90597344)[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: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值