Vue files aren't being linted about nx-plus HOT 12 CLOSED

Interesting, thank you for that analysis!! I was using the Webstorm/VsCode linting warnings when I made those comments above, and forgot to actually try out invoking the Nx linter above 🤦

If you explicitly set the files you want linted in the builder, it should start picking them up:

"lint": {
          "builder": "@nrwl/linter:lint",
          "options": {
            "linter": "eslint",
            "files": ["**/*.{ts,vue}"],
            "exclude": ["**/node_modules/**", "!apps/my-app/**/*"]
          }
},

I tried using a few rules which require type information and it continues to work fine and pick them up. The downside I guess is that it includes all files in the glob, rather than only the ones you use in your tsconfig dependency graph.

I did notice that the @angular-eslint/builder (after which our builder is based off) has removed any references to createProgram etc., and I think is using the eslint config overrides to specify tsconfigs:

https://github.com/angular-eslint/angular-eslint/blob/master/packages/integration-tests/fixtures/angular-cli-workspace/.eslintrc.js#L41

We do plan on updating our Nx linter to reflect some of the awesome updates made by James Henry above - but in the meantime, I don't know if you want to try using the above builder directly? (if the files option doesn't work for you)

from nx-plus.

It seems we have a couple of options to think through. @rarmatei thanks for your help on this! 😄

Cool!! Excited to see this plugin grow! Let me know if you need any more help! 👍

from nx-plus.

10.3.0 has been released with a new eslint builder. We might be able to take advantage of this!

from nx-plus.

@rarmatei I see you did quite a bit of work on @nrwl/linter. I don't think this issue belongs in Nx because it doesn't support Vue internally, but I was hoping you could provide some direction.

from nx-plus.

@BuckyMaler sorry for the late response - I'm wondering if it's missing a plugin?

if you create an Nx workspace with a React app, you'll notice "plugins": ["@typescript-eslint", "@nrwl/nx"], in the root .eslintrc - which allows it to lint .ts files.

I've not worked with Vue before, but could it be that you need something like https://eslint.vuejs.org/ in there?

EDIT: sorry, I rushed to an answer above, I managed to replicate the issue, I'll more into it this week 👍

from nx-plus.

Can you try adding this to your local .eslintrc.js file:

  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "@typescript-eslint/parser",
    "project": null
  },
  // ........

That should make it lint the .vue files.

We use the project option to give "type information context" to the @typescript-eslint/parser - but for some reason that is not working with the vue-eslint-parser parser. They do tell you in their docs that you can use a custom parser, but it might be a question for them as to why you can't pass in the project option as well.

The above should work fine. The only cases where it won't work, is if somebody needs to use a rule that needs type info like the ones in:

"plugin:@typescript-eslint/recommended-requiring-type-checking"

from nx-plus.

@rarmatei thanks for responding. Unfortunately, adding that snippet to the local .eslintrc.js didn't work.

I think the linter builder is excluding .vue files. As you can see in the screenshot below I logged the files to lint and no .vue files were logged.

I also added the following npm script with no ESLint config changes and App.vue was linted.

"eslint": "eslint --config apps/my-app/.eslintrc.js --ext .js,.ts,.vue apps/my-app/src"

I think the issue maybe the arguments passed to ts.parseJsonConfigFileContent or ts.createProgram found here.

from nx-plus.

Oh, I was using Nx 10 when trying the example above!

Can you show me what options you're sending to the linter, please? Or if you have an example repo that would help too, please.

There's been a recent change to what pattern we use for the "exclude" array.

from nx-plus.

I've narrowed in on the issue. parseJsonConfigFileContent excludes .vue files by default. However, it accepts an extraFileExtensions argument. Replacing that line with the following gets us half way there:

const parsed = ts.parseJsonConfigFileContent(
  config.config,
  parseConfigHost,
  path.resolve(projectDirectory),
  { noEmit: true },
  undefined,
  undefined,
  [{ extension: '.vue', isMixedContent: true, scriptKind: 7 }]
);

createProgram also exlcudes .vue file by default. Unfortunately, it doesn't accept an extraFileExtensions argument. However, if you set allowNonTsExtensions to true before calling it, then .vue files will be included. To do that, add the following right after the line above:

parsed.options.allowNonTsExtensions = true;

With those two changes .vue files are linted. I can see the first change being a PR into Nx, but not the second. allowNonTsExtensions is a private/internal TS option. Here is where createProgram filters out .vue files if allowNonTsExtensions is not true.

Because of how createProgram works, I think we'll need to write our own linter builder, but here is a repo to easily reproduce the issue if you want to take a closer look. After cloning the repo and installing deps, run nx lint my-app. There should be lint errors in main.ts and App.vue, but only the lint errors in main.ts are reported.

from nx-plus.

It seems we have a couple of options to think through. @rarmatei thanks for your help on this! 😄

from nx-plus.

I'll look into this soon. 🤞

from nx-plus.

Updating to Nx v10.3.0 fixes this issue. I'll get to work on the update.

from nx-plus.