Vue js

[martiensk]

Does Multilinter support Vue single file components? I can't get it to lint at all. Here is my config:

"eslint": {
    "enabled": true,
    "fileExtensions": "js,vue"
  }

[glat]

Yes, of course. It's only an additional file extension to check.

You've to check: 1) multilinter config file should be in parent directories of your project. Last chance is to place it in %USERPROFILE% 2) Eslint should be installed locally or globally (I use globally installed) 3) If Eslint is installed globally you must have the correct path in environment variable %PATH% to let windows find it. You should check if %USERPROFILE%\AppData\Roaming\npm is in your user environment variable %PATH%. Node.js should add it, but sometimes it is not there. 4) According to my knowledges to check vue files you've also to install the eslint plugin for vue files.

In general Multilinter attaches VisualStudio with linters, It does not parse itself files.

Let me know

[martiensk]

I have a .multilinterrc in the root of my project, as well as a .eslintric and .stylelintrc. The vue plugin is installed, and it lints perfectly in the webpack build. I currently have it set up like this:

{
  "eslint": {
    "enabled": true,
    "fileExtensions": "js,vue"
  },
  "stylelint": {
    "enabled": true,
    "fileExtensions": "scss,vue"
  }
}

It only seems to lint js files however, and not vue or scss files. I have a couple of questions if you don't mind:

1. Does it default to global?
2. If I want it set up for local linting, does it look for local installation in the parent folders all the way up to disk root? Asking because the linters are installed in node_modules in my project folder.
3. Where do I need to put my .stylelintrc and .eslintrc?
4. Does it honour .stylelintignore and .eslintignore?

[glat]

1) Yes. See https://github.com/glat/MultiLinter/blob/master/config.json for default config which is overriden by yours. 2) Yes. It searches executable of eslint.cmd in \node_modules\.bin going up to root. 3) In local directory or in %USERPROFILE% 4) Multilinter does not lint your files. It simply CALLS linters, so if linters honour ignore files it does too.

(Sorry for delay, I was sick)

[martiensk]

Still can't get it to work. Is there a log file or something similar I can take a look at? This is the file structure of my project:

| Project Root
| -- .eslintrc
| -- .multilintrc
| -- .stylelintrc
| -> node_modules
     | -> .bin
          | -- eslint.cmd

I.e. node_modules, .eslintrc, .multilintrc and .stylelintrc are all in my project root.

[glat]

Enable debug:

You'll get a Visual Studio window with Multilinter debug messages. Copy & Paste to let me read that.

[martiensk]

I have enabled debug and it helped me understand a little bit more of what was going on. Here is all the info:

1. .multilinterrc

   {
   "eslint": {
   "enabled": true,
   "fileExtensions": "js,vue",
   "installationType": "local"
   },
   "stylelint": {
   "enabled": true,
   "fileExtensions": "scss,vue",
   "installationtype":  "local"
   }
   }

2. File structure:

   | Project Root
   | -- .eslintrc
   | -- .multilinterrc
   | -- .stylelintrc
   | -> node_modules
    | -> .bin
         | -- eslint.cmd
         | -- stylelint.cmd
   

3. When loading I get the following output:

   Searching config file in directory "C:\{project_path}"
   Config file found in path "C:\{project_path}\.multilinterrc"
   

Linter configs in use:

Name = eslint

        Enabled = true
     Executable = "eslint.cmd"
      Arguments = ""{filePath}" -f json"

AdditionalArguments = "" InstallationType = "local" FileExtensions = "js,vue" RuleHelpUrl = "https://eslint.org/docs/rules/{ruleId}" ResultsSelector = "$[0].messages" SourceSelector = "source" LineSelector = "line" ColumnSelector = "column" EndLineSelector = "endLine" EndColumnSelector = "endColumn" IsFatalSelector = "isFatal" MessageSelector = "message" RuleIdSelector = "ruleId" RuleHelpUrlSelector = "" SeveritySelector = "severity"

Name = stylelint

        Enabled = true
     Executable = "stylelint.cmd"
      Arguments = ""{filePath}" -f json"

AdditionalArguments = "" InstallationType = "local" FileExtensions = "scss,vue" RuleHelpUrl = "https://stylelint.io/user-guide/rules/{ruleId}" ResultsSelector = "$[0].warnings" SourceSelector = "" LineSelector = "line" ColumnSelector = "column" EndLineSelector = "" EndColumnSelector = "" IsFatalSelector = "" MessageSelector = "text" RuleIdSelector = "rule" RuleHelpUrlSelector = "" SeveritySelector = "severity"

However, after this step an error occurs:

Searching linters to be used for file extension ".js"
Linters found to be used for file extension ".js" found: eslint,
Searching linter eslint in local mode
Searching linter eslint in directory "C:\Users\{user}\AppData\Local\Temp"
Illegal characters in path.

   at System.IO.Path.CheckInvalidPathChars(String path, Boolean checkAdditional)
   at System.IO.Path.Combine(String path1, String path2, String path3)
   at Glat.VSIX.MultiLinter.Helpers.LinterHelper.GetLinterPath(String linterName, LinterConfig linterConfig, String directoryPath)
   at Glat.VSIX.MultiLinter.Helpers.LinterHelper.<>c__DisplayClass10_0.b__0()
   at System.Threading.Tasks.Task`1.InnerInvoke()
   at System.Threading.Tasks.Task.Execute()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Glat.VSIX.MultiLinter.Linting.Linter.d__5.MoveNext()

The same thing happens for both JS and SCSS files. I suspect multilinter can't find the local eslint.cmd and stylelint.cmd.

When I open a .vue file there is no debug output at all.

Sorry for taking so long to get back to you, it was my turn to be sick...

[glat]

Happy to see you back! Strangest line in log is:

Searching linter eslint in directory "C:\Users{user}\AppData\Local\Temp"

I don't understand why it searches in a path with { and } chars in it. It can be a bug. I'll try to reproduce using your info.

Waiting for me you can just check that internal Visual Studio linters MUST be disabled, otherwise they can interfere with MultiLinter.

[glat]

I just uploaded a new version because I found a really silly bug for use in local mode. Path searched was "\node_modules\bin\" and not the correct one "\node_modules\.bin" (dot was missing).

Make sure internal Visual Studio ESLint is disabled, upgrade MultiLinter (new version should be available in store in minutes) and try again, please.

[martiensk]

In regards to "C:\Users{user}\AppData\Local\Temp" -> I blocked out my username as it is my user on the company AD, sorry about that!

I have confirmed that VS linting is disables, and I have updated the package. I am getting a slightly different error now.

Searching linters to be used for file extension ".js"
Linters found to be used for file extension ".js" found: eslint,
Searching linter eslint in local mode
Searching linter eslint in directory "C:\Users\UserName\AppData\Local\Temp"
Searching linter eslint in directory "C:\Users\UserName\AppData\Local"
Searching linter eslint in directory "C:\Users\UserName\AppData"
Searching linter eslint in directory "C:\Users\UserName"
Searching linter eslint in directory "C:\Users"
Searching linter eslint in directory "C:\"
Linter eslint not found. Check your config.
Value cannot be null.
Parameter name: s

   at System.IO.StringReader..ctor(String s)
   at Newtonsoft.Json.Linq.JToken.Parse(String json, JsonLoadSettings settings)
   at Glat.VSIX.MultiLinter.Linting.Linter.d__5.MoveNext()

Still not doing anything on .vue files.

[glat]

Just uploaded a new version to fix the path bug (v1.0.14). I don't understand why path is in Temp folder. You should read actual file path, not a temp one. Because it is linting a file in C:\Users\UserName\AppData\Local\Temp it tries to found up linter up to root but, of course, it does not find it.

We should understand why it is linting a file in temp folder. What type of VS project is it? I usually use dot net framework/core web and I just tested on a simple folder project and it works now.

Let me know.

[martiensk]

I have updated to 1.14 but no change unfortunately, error is the same. It is a dot net framework MVC 4 project.

[glat]

I'll try to create a blank project. Main issue is path of file. I've to figure out why it searches file in Temp. Thanks for your cooperation in bug hunting.

[martiensk]

Alright, I reckon I have found one of the issues. The error where it looks in temp only happens if I have the "Linting Mode" option set to "Real Time".

If I set it to "On Save" linting works for JS and SCSS files. It doesn't do anything if I open a .vue file though, which is a bigger problem to me personally.

[glat]

I found the bug. I'm sure you are using "real time" linting. When it is enabled MultiLinter creates a copy in %TEMP% of file to call linter, but of course it can't find it. At this point it should be used only when working in "global" mode. Please switch the setting to "On Save" and it should work. I'm thinking about what to do about this bug. I can state a warning in config dialog or create a temporary folder. Oh you just wrote and found the bug!

[glat]

For me same behaviour on .vue files. I think because they are opened in html editor (I think). I'm investigating on it.

[martiensk]

I have confirmed that by going into settings and changing vue files to use the JavaScript editor.

Doing this makes linting work fine, but the file loses all syntax highlighting, presumably because it's trying to interpret everything as JavaScript. This is a bit less than ideal, but I'll leave it in your hands.

[glat]

I'm uploading a new version (v1.0.22). Don't use if it's v1.0.21. It should work by using "Real time" option (but keep in mind that it will create a shadow file in %TEMP% so it can broke any reference with that file and other files) and for .vue files by using default html editor.

Please upgrade and let me know.

Again thanks for your help in debugging local usage.

[martiensk]

No worries mate, it's a pleasure. Looks good, and thank you very much for your quick responses.