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的运行环境的更多相关文章

  1. 从一个前端项目实践 Git flow 的流程与参考

    Git flow 出自 A successful Git branching model,这里使用了一个前端项目配合本文稿实施了 git flow 并记录流程作出示例和参考,对 hotfix 与持续部 ...

  2. [FE] 有效开展一个前端项目2 (vuejs-templates/webpack)

      1.安装 nodejs.npm $ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - $ sudo apt-get i ...

  3. [front]有效开展一个前端项目

    今天的前端如果没有用到 npm,效率是比较低的:所以要从使用的工具来讲. 1. 一切都依赖于 nodejs: 下载一个 linux 的源码包就可以开始安装了. $ wget https://nodej ...

  4. 使用gulp来构建一个前端项目

    什么是gulp? gulp是一个前端项目构建工具,是自动化项目的构建利器,它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成.你可以使用gulp及其插件对你的项目代码 ...

  5. [FE] 有效开展一个前端项目1

    今天的前端如果没有用到 npm,效率是比较低的:所以要从使用的工具来讲. 1. 一切都依赖于 nodejs: 下载一个 linux 的源码包就可以开始安装了. $ wget https://nodej ...

  6. VUE前端项目配置代理解决跨域问题

    VUE前端项目配置代理解决跨域问题 问题如下,经常在本地调试接口出现这种问题 解决方式1:Chrome 的扩展插件 以前使用Chrome 的扩展插件,但是有时候还是会出现莫名其妙的问题. 需要梯子才行 ...

  7. vue-cli生成的项目配置开发和生产环境不同的接口

    vue-cli生成的项目,vue项目配置了不同开发环境的接口地址,axios.defaults.baseURL如何引用这个地址,这是在我发布项目的时候考虑的,于是想到了 方法一: config下配置文 ...

  8. VScode配置CMD本地运行环境(2.0)

    VScode配置CMD本地运行环境(2.0) 官方Task.json说明 完整的Task.json配置信息 Task.json预定义变量 看了很多网上的教程都说需要下载VScode的python插件, ...

  9. 零基础学习前端1-1配置node及npm环境变量

    零基础学习前端1-1配置node及npm环境变量 ## 1-1配置node及npm环境变量 首先:下载node 可以直接去官方网站下载 1.首先从官网下载安装包 https://nodejs.org/ ...

随机推荐

  1. react中图片校验码实现以及new Buffer()使用方法

    图片校验码原理就是图片是后端生成的前端只是前后端传过来的数据流做些处理展示即可,先直接上核心代码图: 这里就是简单得对axios的一些默认项属性重写:最后你只需要将resolve的内容插入页面的< ...

  2. SP1043 GSS1 - Can you answer these queries I(线段树,区间最大子段和(静态))

    题目描述 给出了序列A[1],A[2],…,A[N]. (a[i]≤15007,1≤N≤50000).查询定义如下: 查询(x,y)=max{a[i]+a[i+1]+...+a[j]:x≤i≤j≤y} ...

  3. [NOI2015]程序自动分析(并查集)

    题目描述 在实现程序自动分析的过程中,常常需要判定一些约束条件是否能被同时满足. 考虑一个约束满足问题的简化版本:假设x1,x2,x3...代表程序中出现的变量,给定n个形如xi=xj或xi≠xj的变 ...

  4. oracle的事务隔离级别和读一致性

    oracle提供了三个隔离级别: 1.读提交 ,简而言之只能读取语句开始执行前提交的数据 2.串行,这个好理解,就是事务串行运行,避免经典的三个场景-脏读.不可重复读.幻读. 3.只读,oracle已 ...

  5. 【c学习-8】

    /*继承结构体*/ #include // 定义子结构体 struct date{ int year; int month; int day; }; //定义父结构体 struct student{ ...

  6. php 使用当前时间点进行时间范围查询

    /** * 判断是否是吃早饭时间 */ $nowtime = time(); $start = strtotime('8:30:00'); $end = strtotime('9:30:00'); i ...

  7. Linux C语言结构体-学习笔记

    Linux C语言结构体简介 前面学习了c语言的基本语法特性,本节进行更深入的学习. 预处理程序. 编译指令: 预处理, 宏定义, 建立自己的数据类型:结构体,联合体,动态数据结构 c语言表达式工具 ...

  8. 2018年第九届蓝桥杯【C++省赛B组】【第二题:明码】

    参考:https://blog.csdn.net/qq_34202873/article/details/79784242 #include <bits/stdc++.h> using n ...

  9. ubuntu配置机器学习环境(一) ubuntu安装

    第一部分:Ubuntu14.04安装 Step :安装Ubuntu Step 1.1:准备安装U盘 首先到官网下载Ubuntu的镜像,我使用的是Ubuntu 14.04.3的ISO. 然后使用Ultr ...

  10. python2.7练习小例子(二十九)

        29):1.题目:按相反的顺序输出列表的值. #!/usr/bin/python # -*- coding: UTF-8 -*- a = ['one', 'two', 'three'] for ...