使用 Wotan 检查 TypeScript Vue.js 组件

TypeScript是一个特殊的语言。人们倾向于喜欢它或强烈地讨厌它(虽然看起来大多数试过它的人都喜欢它)。不管你的看法,TypeScript有时可能是相当方便的。但是,让它与Vue正常工作可能是痛苦的。由于TypeScript使用了它自己的包装和编译工具,将其整合到现有的工具链中可以是极大的考古艺术的探索。让TypeScript成为包装,例如Vue Single File Components,无法直接通过tslint完成。你必须通过一些复杂的代码转换,以便能够获得一些可远程操作的工具。但是如果有另一种方式呢? [Enterwotan(INKL0]),一个可插入的TypeScript和JavaScript包装器。它有V Single File Components的插件,

让我们看看如何使用 wotan 获得 Vue 单个文件组件。

此教程假设您已经有了使用TypeScript设置的项目,与微软官方的TypeScript-Vue Starter Project(https://github.com/Microsoft/TypeScript-Vue-Starter)相似。

安装 Wotan 和相关插件

我们将需要三个包:

1. wotan CLI. 能做通常的 CLI
2. Vé - Wotan 的预处理器,可从 Vue 单个文件组件中提取脚本,以便编辑
3. Valtýr - Wotan 的插件,有效地作为 tslint 的插入替代品。

1$ npm install --save-dev @fimbul/wotan @fimbul/ve @fimbul/valtyr

配置WOTAN

创建一个名为 .fimbullinter.yaml 的新文件,其中包含了告诉 wotan 如何将您的项目链接的配置。

 1[label .fimbullinter.yaml]
 2# Tell wotan to use the valtyr module for linting.
 3modules: "@fimbul/valtyr"
 4# Valtýr configuration.
 5valtyr:
 6  overrides:
 7    # Use the Vé preprocessor for all *.vue files.
 8    # Valtýr will still run for *.ts files by default.
 9    - files: "*.vue"
10      processor: "@fimbul/ve"

林特!

现在,您可以简单地在项目目录中运行wotan。

例如,以下是在默认 TypeScript-Vue Starter Project 上运行wotan时得到的输出。

吉克斯!

幸运的是,所有这些错误都可以通过wotan -fix自动修复。

您不喜欢 linter 配置吗? 只需 配置 tslint.json就像您在任何其他 TypeScript 项目中一样!

<$>[注]目前,wotan是一个相当年轻的项目,似乎没有与任何编辑直接整合。

看看他们所能做的许多选择(Wotan)(LINK0)和Valtýr的(LINK1)。

有了它,你应该很好地去!