Sublime Forum

Wrong tslint warnings in vue components

#1

I use the SublimeLinter-tslint plugin in Sublime Text 3 under Windows 10 for linting the Typescript sections in my vue components. But in these I get a bunch of warnings that seem totally wrong to me, especially the first one that marks the <script lang="ts"> opening tag itself - see the following screenshot regarding this issue:

tslint%20warning

How can I get rid of this obvious mis-configuration?

0 Likes

#2

Not a tslint user but if I were you, I would check is there something to be configured in tslint then. At my first glance, tslint’s rule is configurable and nothing related to SublimeLinter.


All SublimeLinter plugins are just executable callers. Usually you should find “are there some configurations to play with?” from the called executable. In your case, tslint itself.

0 Likes

#3

Well, at least it doesn’t seem to depend on the tslint.json file, since in Visual Studio Code, it works fine with the same tslint.conf fiile - but VSC uses a dedicated linter for Vue components with Typescript…
Also, so far I couldn’t find anything related in the configuration file for SublimeLinter-tslint or SublimeLinter…

0 Likes

#4

Looks related to https://github.com/SublimeLinter/SublimeLinter-tslint#using-projects

0 Likes

#5

This is potentially related to how the vue syntax scopes embedded code and how SublimeLinter selects regions to lint based on scopes. I made a similar adjustment for js and eslint in the vue syntax (there is/was a PR for that), but I’m on mobile now and can’t confirm this.

0 Likes

#6

Not really - the link you mention is about having the project’s tslint.json respected by SublimeLinter, but regardless of that, tslint should not complain about the <script type="ts"> tag being an unused-expression and and angle-bracket-type-assertion - and the aim can not be to allow unused expressions and angle bracket type assertions in the whole project just for getting rid of warnings for the script tag.

0 Likes

#7

Feel sorry for that. Maybe @FichteFoll will have a clue.

0 Likes

#8

Looks like the Vue syntax already scopes this correctly:

and tslint has the correct selector:

Unfortunately, I can’t even reproduce the problem you’re having to check out the scope of the <script> tag because something prevents it from working on my install and I have absolutely no clue what.

0 Likes

#9

Hm, thanks for your efforts, @FichteFoll! I unfortunately have to work under Windows (I’d prefer Linux a lot for Vue development), but I got it to work by installing the npm modules typescript and tslint globally under Windows with the npm i -g ... command. Besides that I use the following configuration for SublimeLinter:

// SublimeLinter Settings - User
{
    "linters": {
        // The name of the linter you installed
        "tslint": {
            // Disables the linter. The default here is 'not set'
            "disable": false,
            "chdir": "${project}",
        }
    },

    "paths": {
        "windows": ["C:/Program Files/nodejs/"]
    }
}

Maybe that helps in case you really want to dive deeper into this. So tslint correctly detects the <script type="ts"> section of my vue component and only lints that part, but yes, it starts already complaining about the script tag itself, which doesn’t seem to make any sense to me.

0 Likes

#10

Those settings for tslint should already be the defaults. Regardless, I don’t think I can help you here because my first suspicion turned out to be false and I can’t reproduce the problem. You may want to open an issue on the SublimeLinter-tslint repo.

What ST build are you using? And what does view.settings().get('syntax') in the console yield?

0 Likes

#11

I am using ST 3.2.1, Build 3207, and the settings say 'Packages/Vue Syntax Highlight/Vue Component.sublime-syntax'. Thanks for your efforts. I’ll move to the SublimeLinter.tslint repo with this.

Edit: Issue opened here.

0 Likes