WebEssentials tslint 自定义规则

Posted

技术标签:

【中文标题】WebEssentials tslint 自定义规则【英文标题】:WebEssentials tslint custom rules 【发布时间】:2016-02-04 18:18:10 【问题描述】:

我的解决方案目录中有一个 tslint.json 文件,我正在尝试按照 https://www.npmjs.com/package/tslint 上的指南创建自定义规则

我创建了一个“nonImportsRule.ts”,复制了链接中的代码,并在我的 tslint.json 文件中添加了“no-imports”:true 但是该规则没有被拾取。

指南说需要指定一个rulesDirectory,但我不知道应该在哪里配置?

另外 - 如果违反 tslint 规则,是否可以设置 Web Essentials 来中断构建?

【问题讨论】:

你使用的是什么版本的 tslint?另外,你是如何运行 tslint 的? 我在 Visual Studio 2013 中使用 WebEssentials 2013.5 运行 tslint 【参考方案1】:

我遇到了同样的问题。我想将 TSLint 扩展、tslint-microsoft-contrib 和 codelyzer 与 Web Analyzer 一起使用。这没有用。找出原因的第一步是在 server.js 中进行调整,可以在 C:\Users\[User]\AppData\Local\Temp\WebAnalyzer1.7.75 中找到它。我把 TSLint 函数改成:

tslint: function (configFile, files) 
    // Try catch tslint errors 
    try 

        var tslint = require("tslint");
        var options = 
            formatter: "json",
            configuration: JSON.parse(fs.readFileSync(configFile, "utf8").trim())
        ;

        var results = [];

        for (var i = 0; i < files.length; i++) 
            var file = files[i];
            var ll = new tslint(file, fs.readFileSync(file, "utf8"), options);
            results = results.concat(JSON.parse(ll.lint().output));
        

     catch(error) 
        // Return tslint error to visual studio so we can get some ideas for counter measures.
        var result = JSON.parse('["endPosition": "character": 0,"line": 0,"position": 0,"failure": "INSTALL ERROR","name": "/","ruleName": "INSTALL ERROR","startPosition": "character": 0,"line": 0,"position": 0]');
        result[0].failure = error.message;
        return result;
    

    return results;
,

当我运行 Web Analyzer 时,交替导致 Visual Studio 错误列表中出现错误反馈。应用替换后,不要忘记使用任务管理器强制执行 node.exe 的新实例。对于我的特殊情况,反馈导致在以下目录中安装以下 npm 包:

包:

“codelyzer”:“0.0.12” “tslint”:“^3.7.3” “tslint-microsoft-contrib”:“^2.0.2” “打字稿”:“^1.8.9”

目录:

C:\Users\[用户]\AppData\Local\Temp\WebAnalyzer1.7.75 C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE

在此之后,Web Analyzer 能够使用与我的 grunt 任务相同的 tslint 规则。希望更新版本的 Web Analyzer 能更优雅地解决我的问题。

【讨论】:

【参考方案2】:

好的,我使用的不是 Web Essentials 扩展,而是 Web Analyzer:https://visualstudiogallery.msdn.microsoft.com/6edc26d4-47d8-4987-82ee-7c820d79be1d

所以我无法 100% 回答这个问题,但我想在这里总结一下我对自定义 tslint 规则的体验。首先,从文档中不完全清楚的是,整个事情都依赖于 node.js。

    所以首先你需要安装node js。这将为您的命令行提供 npm 命令。 使用 npm tslint 和 typescript 安装后。 https://github.com/palantir/tslint 这里是例子。这些将在以下位置创建文件:“c:\Users[Username]\AppData\Roaming\npm\node_modules”

    进入“c:\Users[用户名]\AppData\Roaming\npm\node_modules\tslint\lib\rules\”。在此处创建 noImportRule.ts。复制以下内容:

    import * as ts from "typescript";
    import * as Lint from "../lint";
    
    export class Rule extends Lint.Rules.AbstractRule 
        public static FAILURE_STRING = "import statement forbidden EDE";
    
        public apply(sourceFile: ts.SourceFile): Lint.RuleFailure[] 
         return this.applyWithWalker(new NoImportsWalker(sourceFile,      this.getOptions()));
        
        
    
     // The walker takes care of all the work.
     class NoImportsWalker extends Lint.RuleWalker 
     public visitImportDeclaration(node: ts.ImportDeclaration) 
    // create a failure at the current position
    this.addFailure(this.createFailure(node.getStart(), node.getWidth(), Rule.FAILURE_STRING));
    
    // call the base version of this visitor to actually parse this node
    super.visitImportDeclaration(node);
    
    
    

请注意,在示例中,import lint 没有给出不适用于此方法的相对路径。 4. 触发命令:"tsc -m commonjs --noImplicitAny .\noImportsRule.ts"。这将编译您的自定义规则的 ts。你会得到一堆编译错误,例如:../enableDisableRules.d.ts(1,21): error TS2307: Cannot find module 'typescript'。这是一个很好的问题,为什么会抛出这些,但是忘记它们,无论如何都会生成 js 文件。 5. 把 "no-imports": true 放到你的 tslint.json 中(现在这应该是自定义的)。使用命令行中的此命令: tslint -c 'sample.tslint.json' test.ts 你会得到: test.ts[1, 1]:禁止导入语句。所以你让自定义规则起作用了!!! :)

这就是从命令行工作的全部内容。此外,我制定了与 WebAnalyzer 一起使用的自定义规则,至少是暂时的。 我需要在此处复制自定义规则的文件: c:\Users[Username]\AppData\Local\Temp\WebAnalyzer1.6.65\node_modules\tslint\lib\rules\ 当然配置 WebAnalyzer tslint.json 以包含自定义规则。 我不知道 Web Essentials 扩展如何使整个事情与 tslint 一起工作,但我想在某种程度上类似:)。某个地方应该有一个文件夹(node_modules\tslint\lib\rules),其中包含 tslint 使用的规则。在那里你需要复制你的自定义。 当然,最优雅的解决方案是修改 Web Essentials 扩展本身并使 tslint 的自定义规则目录可从 Visual Studio 进行配置。 (所以我的解决方案只是一种解决方法)

这是我在 Visual Studio 警告列表中的自定义规则示例:

【讨论】:

以上是关于WebEssentials tslint 自定义规则的主要内容,如果未能解决你的问题,请参考以下文章

如何创建我的自定义 tslint 规则集?

如何在不编译为 JS 的情况下使用用 TypeScript 编写的自定义 tslint 规则和 vscode-tslint?

使用 Angular 7 和 `ng lint` 在 TypeScript 中自定义 TSLint 规则

从tslint迁移

如何使用 Angular Cli 运行 tslint?

WebStorm 在快捷方式上执行 TSLint