How to enable SublimeLinter-jshint with .vue single file components

How to enable SublimeLinter-jshint with .vue single file components

I had been wanting to create a couple of projects with the Vue.js JavaScript framework and, being the neat freak that I am, I wanted to make sure that I was linting my script code within the single file component.

So, I installed the SublimeLinter-jshint plugin on my Sublime text editor, went to a local .vue file that I had been building, and saw this

Somethings not right, and it's not allowing jshint to lint my single file component's scripts. I eventually was able to find a fix for the issue, but it took a little bit of research. Lucky you, I have included the solution below.Note: This is a snippet of the contents of my SublimeLinter.sublime-settings file that is made to look like the full file.


    "linters": {
        "jshint": {
            "selector": "source.js, text.html.vue",
            "args": ["--extract=auto"]

Going into the details

As you can see, the code above is shown to be the SublimeLinter settings file that you can get to by opening up your sublime package manager search window, typing in something like "sublime linter settings", and then you should be able to open it up. Below I explain why we're actually feeding those arguments within the SublimeLinter.sublime-settings file.

*Note: I tried to make this solution work through a a .sublime-project file, but I was only able to make it work the way I wanted through using the current method given. Please let me know if you are able to make it work through a sublime-project file as that would be very helpful.

  • linters

    This setting tells the SublimeLinter package of extra parameters (i.e. like argument flags that you would give on a CLI of the module) you want the linter to consier. We are using jshint so in order to change the default behavior of jshint, we input our jshint parameter.
    For more information about this parameter, please go to the documentation

  • selector

    This setting tells jshint what source to be active on. This works off of the given scope that Sublime Text uses. For example, if you make a .vue single component file, put your cursor anywhere in the file, and go to Sublime Options Bar -> Tools -> Developer -> "Show Scope Name" you should see a scope of text.html.vue on top. From what I gather, that seems to be the overall scope of the filetype. Note: I'm not 100 sure, but the scope may be obtained from the syntax highlighting package that I have for vue single file components. So, if that's the case, make sure to install vue-syntax-highlight through your Sublime Text package manager.

    Once the selector is properly configured, you should see this

    So now jshint is reading the file, but it doesn't know what to do with that template tag. I don't blame it, because it's not really javascript or anything. The next option will help with this error

  • args

    This setting gives what can be considered command line arguments to the jshint runtime on sublime. The arg that we're using is called extract, which is documented here. We're setting it to auto because it is necessary for our needs. Basically, jshint is told to either extract the JavaScript out of a script tag within the html file, or if that fails, just run the linter over the whole file (i.e. as you would a .js file). This is necessary because I need to edit my Node.js backend webpack code as well as my .vue single file components, and I want both types linted.

After you correctly enable all of these options, jshint should be working on your Vue.js single file component! Oh no, it looks like I'm not as good a coder as I thought I was...

As an aside, this method is actually not very favored, even by the owner of the jshint repository! This means that every single use case might not work properly using the same config that I am using. So please, code on your own preferences

Tags: vue, how-to, jshint, single-file-component
Modified on: Sun Apr 29 2018 20:45:30 GMT-0400 (EDT)