在可视化工作室代码中保存 TypeScript 时自动编译

在本帖子中,我们将解决两个问题: 1) 命令 “TSC” 不承认 VS 集成的终端代码, 和 2) 编译时不工作自动保存文件 “.TS” (类型脚本).

介绍

只是为了上下文, 的 类型脚本 允许您使用强类型结构编写代码,并为此代码编译为纯 JavaScript. 的 可视化工作室代码 是微软创建的跨平台代码编辑器.

// 本文中使用的版本:
- Visualstudio () 代码: 版本 1.14.1
- 类型脚本: 版本 2.4.1

这是一个简单的提示, 但你可能有问题, 如果你不知道你在做什么: 我的情况 :(D)

Node.js 和 TypeScript 安装

安装 TypeScript 的方法之一是通过 Node.js 包管理器 (Npm – 节点包管理器), 但使用它, 你首先需要 安装 节点.js.

安装节点后, 打开终端 (命令) 并运行以下命令 安装类型脚本:

安装 npm -键入脚本 g

仍然通过 Windows 终端 (或 Linux), 通过检查已安装的版本来测试键入脚本. 命令 “TSC” 是 TypeScript 编译器的首字母缩略词.

TSC -

问题

问题是命令 “TSC” 在 Windows 终端上正常工作, 但不是在可视化工作室代码本身的集成终端中 (VS 代码), 显示以下错误:

"Tsc" 无法识别 作为 内部或外部命令,可操作程序或批处理 文件.

另外, 我不想运行命令 “TSC” 每次要编译文件时 “.TS” (类型脚本的扩展). 所以, 一如既往的自动编译保存时 (Ctrl+S)? 这就是我们接下来看到的.

Outros 错误

试图解决这些问题, 找到的帖子说要使用 编译保存, 但这仅由可视化工作室支持 2015 使用类型脚本 >= 1.8.4 和原子类型脚本插件. 换言之, 没有用 编译保存 在 “tsconfig. json” 从可视化工作室代码, 下面的代码将不起作用:

{
   "compileOnSave": ,
   "compilerOptions": {
       "noImplicitAny" : 
   }
}

Solução

TSC in vs 代码集成终端

首先,让我们解决的问题 TSC 在可视化工作室代码集成终端中无法识别 (VS 代码).

一些 岗位 建议将 tsc 或 npm 路径放在 PATH 环境变量中, 但一个简单的方法来解决这个问题,通过使 安装 “可视化工作室的 TypeScript, 也兼容 VS 代码.

现在是, 安装后, 打开视觉工作室代码集成终端, 打字:

// 可视工作室代码集成终端的热键:
Ctrl+`
// 或使用菜单在可视化工作室代码中打开终端:
视图 > 集成终端

尝试检查 类型脚本版本 直接进入集成的 VS 代码终端 (不在 Windows 终端中), 它可能会工作:

TSC -

保存文件时自动编译 .TS

Vs 代码终端位于脚本目录中 (.TS), 举个例子:

CD C:\wamp64wts

创建文件 tsconfig. json 在 VS 代码终端中键入:

TSC --初始

请注意,文件 “tsconfig. json” 将在 “(C):\wamp64wts” (当前目录).

打开 tsconfig. json 并启用选项 “源映射”: 真, 并保存修改, 得到这样的:

  "compilerOptions": {
    /* 基本选项 */
    "target": "es5",                          /* 指定 ECMAScript 目标版本: "ES3" (默认), "ES5", "ES2015", "ES2016", "ES2017", 或 "Esnext". */
    "module": "commonjs",                     /* 指定模块代码生成: "公共 js", "amd", "系统", "乌姆德", "ES2015", 或 "Esnext". */
    // "lib": [],                             /* 指定要包含在编译中的库文件:  */
    // "allowJs": 真,                       /* 允许编译 javascript 文件. */
    // "checkJs": 真,                       /* 报告 .js 文件中的错误. */
    // "jsx": "preserve",                     /* 指定 JSX 代码生成: "保留", "反应本地", 或 "反应". */
    // "declaration": 真,                   /* 生成相应的".d.ts"文件. */
    "sourceMap": ,                     /* 生成相应的".映射"文件. */
    // "outFile": "./",                       /* 串联并发出输出到单个文件. */
    // "outDir": "./",                        /* 将输出结构重定向到目录. */
    // "rootDir": "./",                       /* 指定输入文件的根目录. 用于使用 -outDir 控制输出目录结构. */
    ... 继续 ...

很快, 阿格拉 _ s _ ir 没有终端做 Vs 代码 e 数字 o comando:

TSC -w

埃斯特 · 科曼多 · 菲卡 · 莫兰多 (乌文多, 所以 “w” 德手表) a aplica é o e qualquer altera é o 没有 arquivos .TS, 昆多 · 萨尔沃, 远 _ imediata 编译 a _ o em .Js.

就是这样!

总点击数: 10612

留言

您的电子邮件地址将不会发布. 与标记必填的字段 *