vsCode怎么为一个前端项目配置ts的运行环境
vsCode为一个前端项目配置ts的运行环境,ts文件保存的时候自动编译成js文件:
假设此前端项目名称为Web:文件结构如图
1. 在根目录中新建一个“.vscode”文件夹,里面建一个“tasks.json”文件,内容为:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
"args": ["-w", "-p", "."],
"showOutput": "silent",
"isWatching": true,
"problemMatcher": "$tsc-watch"
}
升级后:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"type": "typescript",
"tsconfig": "tsconfig.json",
"isBackground": true,
"problemMatcher": [
"$tsc-watch"
],
}
]
}
2. 在根目录下建一个“tsconfig.json”文件,内容为:
{
"compilerOptions": {
/* Basic Options */
"target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
"module": "amd", /* Specify module code generation: 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
"lib": [
"dom",
"es2015.promise",
"es5"
], /* Specify library files to be included in the compilation: */
"sourceMap": true, /* Generates corresponding '.map' file. */
"noImplicitAny": false, /* Raise error on expressions and declarations with an implied 'any' type. */
/* Module Resolution Options */
"moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
"baseUrl": "." , /* Base directory to resolve non-absolute module names. */
"noEmit": true /* Do not emit outputs. */ // 新加,这一项意思是只编译.ts文件,但是不生成.js文件(我这里是vue项目纠错使用)
}
}
3. vsCode中按快捷键“ctrl+shift+B”顶部选择 tsc:构建-tsconfig.json
注意:配置文件根据自己需要进行修改,添加的文件地址: https://pan.baidu.com/s/1hsvht20
参考:配置完成后文件结构:
vsCode怎么为一个前端项目配置ts的运行环境的更多相关文章
- 从一个前端项目实践 Git flow 的流程与参考
Git flow 出自 A successful Git branching model,这里使用了一个前端项目配合本文稿实施了 git flow 并记录流程作出示例和参考,对 hotfix 与持续部 ...
- [FE] 有效开展一个前端项目2 (vuejs-templates/webpack)
1.安装 nodejs.npm $ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - $ sudo apt-get i ...
- [front]有效开展一个前端项目
今天的前端如果没有用到 npm,效率是比较低的:所以要从使用的工具来讲. 1. 一切都依赖于 nodejs: 下载一个 linux 的源码包就可以开始安装了. $ wget https://nodej ...
- 使用gulp来构建一个前端项目
什么是gulp? gulp是一个前端项目构建工具,是自动化项目的构建利器,它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成.你可以使用gulp及其插件对你的项目代码 ...
- [FE] 有效开展一个前端项目1
今天的前端如果没有用到 npm,效率是比较低的:所以要从使用的工具来讲. 1. 一切都依赖于 nodejs: 下载一个 linux 的源码包就可以开始安装了. $ wget https://nodej ...
- VUE前端项目配置代理解决跨域问题
VUE前端项目配置代理解决跨域问题 问题如下,经常在本地调试接口出现这种问题 解决方式1:Chrome 的扩展插件 以前使用Chrome 的扩展插件,但是有时候还是会出现莫名其妙的问题. 需要梯子才行 ...
- vue-cli生成的项目配置开发和生产环境不同的接口
vue-cli生成的项目,vue项目配置了不同开发环境的接口地址,axios.defaults.baseURL如何引用这个地址,这是在我发布项目的时候考虑的,于是想到了 方法一: config下配置文 ...
- VScode配置CMD本地运行环境(2.0)
VScode配置CMD本地运行环境(2.0) 官方Task.json说明 完整的Task.json配置信息 Task.json预定义变量 看了很多网上的教程都说需要下载VScode的python插件, ...
- 零基础学习前端1-1配置node及npm环境变量
零基础学习前端1-1配置node及npm环境变量 ## 1-1配置node及npm环境变量 首先:下载node 可以直接去官方网站下载 1.首先从官网下载安装包 https://nodejs.org/ ...
随机推荐
- idea中创建web项目搭建Hibernate框架连接oracle数据库
hibernate框架 hibernate是数据化持久工具,也是一个开源代码的ORM解决方案.hibernate内部封装了通过jdbc访问数据库的操作,向商场应用提供面向对象的数据访问api. hib ...
- 学习新框架laravel 5.6 (第二天)-DB,控制器及模型使用
DB类使用,控制器使用及模型使用 链接数据库: /config/database.php /.env DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=330 ...
- ctf题目writeup(9)
继续刷题,找到一个 什么 蓝鲸安全的ctf平台 地址:http://whalectf.xin/challenges (话说这些ctf平台长得好像) 1. 放到converter试一下: 在用十六进制转 ...
- 关于JUnit4无法支持多线程测试的解决方法
转自:https://segmentfault.com/a/1190000003762719 其实junit是将test作为参数传递给了TestRunner的main函数.并通过main函数进行执行. ...
- PAT-B1032
1032 挖掘机技术哪家强(20) 输入格式: 输入在第1行给出不超过10^5^的正整数N,即参赛人数.随后N行,每行给出一位参赛者的信息和成绩,包括其所代表的学校的编号(从1开始连续编号).及其比赛 ...
- html中显示指数、底数
在web前端开发中,经常要显示指数.底数,比如x2,loga,我们可以使用span标签,通过控制标签内字体大小,对齐方式来实现想要的效果.代码如下 <table> <tr> & ...
- 虚拟接VMnet1 和VMnet8的区别
vmnet1是host-only,也就是说,选择用vmnet1的话就相当于VMware给你提供了一个虚拟交换机,仅将虚拟机和真实系统连上了,虚拟机可以与真实系统相互共享文件,但是虚拟机无法访问外部互联 ...
- 步骤:asp.net core中使用identifyserver4颁发令牌
使用IdentityServer4颁发令牌基本步骤如下: 在 Startup.Configure 方法调用 app.UseIdentityServer ,添加IdentityServer4到应用的 H ...
- Win10启动不了的问题处理记录
前几天电脑突然出现蓝屏的情况,而且使用Win10自带的修复功能根本没有卵用,修复不了,很郁闷,死活进不了系统了,说什么“INACCESSABE BOOT DEVICE”,好像是引导设备不可用. 到网上 ...
- [转]struct2 拦截所有没有登录的用户,强行转到登录界面AuthorizationInterceptor
package com.sise.action; import java.util.Map; import com.opensymphony.xwork2.Action; import com ...