Automatically detect eslint-plugin-html, and change default selector settings when found

[Standard8]

I'm using SublimeText 3.1.1, SublimeLinter 4.6.0, SublimeLinter-eslint 4.1.3.

We first discussed this in #87. I have a multi-developer repository, where we have command line operation, and different editors in use. We really need Sublime & ESLint to work together, so that we can lint html files correctly in all editors and on the command line.

I've discovered that I can get both to work by implementing a user setting of:

{
  "linters": {
    "eslint": {
      "selector": "source.js, text.html.basic, text.xml",
    }
  }
}

Rather than try to get multiple developers to set this up, I'd like a way where SublimeLinter-eslint could detect and set this automatically.

I've looked into Sublime's project settings files, but they seem limited - for example, we don't have one at the moment, so existing developers wouldn't be able to be updated automatically (unlike VSCode's default config options).

[kaste]

Hi! This is an interesting feature but currently not achievable in 5 lines code. If you have python people in your team, I can guide them. We need two refactorings in core SL and then the feat implementation itself.

[kaste]

I already did one of the two refactorings. 👍

[Standard8]

@kaste if you can describe what needs doing, I can try and find someone (or I might be able to do it myself).

[Standard8]

@kaste, did you see my comment above?

[kaste]

Oops. I'll try to write it down this week. Sorry.

[kaste]

Okay, how can we tackle this one?

Instead of working with file extensions, we can identify the applied syntax of a buffer via selectors or scopes. A typical js file has the main scope source.js, html files have the base scope text.html.basic.

We of course need a mapping from selectors to eslint-plugins. Or vice-versa. This depends on if we imagine that for one syntax/selector there are actually multiple plugins available, or again vice-versa one plugin supports multiple syntaxes. So maybe, we have a mapping from

  'source.vue': 'eslint-plugin-vue',
  'text.html.basic': 'eslint-plugin-html'

The first method SL will interact with is

    @classmethod
    def can_lint_view(cls, view, settings):

which gets a view/buffer with the computed settings and returns a boolean.

    (sublime.View, Dict) -> bool

We return True/False and thereby decide if eslint should lint this view. The settings object holds the default selector (E.g. settings.get('selector')), but this value can be mutated, because it is only used here and now and for this thread.

So, we could, given a view, extend the selector.

If we have a view, we call view.scope_name(0) -> str to get the scope at the first char. The scope is a space seperated list of selectors, the main one is at the left. So we could do base_selector = scope.split(' ')[0].

Now, we translate this base_selector via our map above and get None or a plugin name back. This plugin is required to process that buffer, so we lookup the nearest package.json and see if the plugin is a dependency (or devDependency etc.).

Given a view, we get its context via SublimeLinter.lint.linter.get_view_context(view) -> Dict. We ask context.get('file_path') for a potential path to the file we're editing. Or context.get('folder') for the base directory associated with the current window. (Note: The edge cases here are, that the user is editing an unsaved/unnamed buffer in a just opened, new window. So, the code must prepare for Nones here.)

In case we have a starting path, we thus search for package.json going upwards until we find the nearest. If we find one, we just read and evaluate it.

Finally, we mutate the selector, maybe like so

    settings['selector'] = "{},{}".format(base_selector, settings.get('selector', '') 

and return calling super().can_lint_view(...).

(Implementations wise, we prefer functions over methods. Some of these functions like get_package_json_content(view) -> Dict or search_for_file('package.json', start_dir) can be pulled into main SL.)

[TehShrike]

I would like to be able to pass full html files to eslint, but I do not want this plugin to try to detect that automatically.

I would prefer to be able to set an option in SublimeLinter-eslint that would tell it whether to use the js selector, or the html selector.

[kaste]

@TehShrike You can just set the html selector, the js one, or both manually. What should the option do?

[TehShrike]

Unset this value:

SublimeLinter-eslint/linter.py

Line 34 in e24d764

'selector': 'source.js - meta.attribute-with-value'

[kaste]

Better now then never. PR is at #287. Would be nice if someone you could test this.