fix: add support for formatting vue files

[felicia-haggqvist]

Fixes Jira issue: WARP-520

• Bump version of @warp-ds/eslint-config devDep
• Add .eslintrc-file
• Lint all code using pnpm lint
• Remove @vue/compiler-sfc devDep because it is now included as a dependency of the main vue package (as of 3.2.13+)
• Remove eslint-plugin-prettier and eslint-config-prettier as devDependencies since they are already peerDependencies in @warp-ds/eslint-config

[magnuh]

Can we do something about this? 🙈
(...or maybe this is correct and it would have been better to have it in some other way to start with.)

[magnuh]

Hmm.... and why did it add a trailing comma? 😅 That's just plain wrong.

[felicia-haggqvist]

Yeah I agree that doesn't look nice! 🙈 I think that is coming from the vue-eslint-parser. Let me see if I can add a rule for that! 🤔

[felicia-haggqvist]

Ok, so the culprit seems to be the printWidth (once again 🙈 ). If I change the printWidth in the @warp-ds/vue .eslintrc-file to 100 instead of 140 like it is specified in the @warp-ds/eslint-config, it will wrap the lines more frequently. I could add this to the @warp-ds/vue .eslintrc-file:

"rules": {
    "prettier/prettier": [
      "warn",
      {
        "singleQuote": true,
        "trailingComma": "all",
        "printWidth": 100,
        "bracketSameLine": true
      }
    ]
  }

That seems to override the prettier-rules from the @warp-ds/eslint-config. But maybe we don’t want that? It also seemed that I had to add the singeQuote, trailingComma and bracketSameLine, even though I just wanted to override the printWidth from the @warp-ds/eslint-config. For example, I noticed that if I only added the printWidth, then it formatted all of the files in the vue-project to have double-quotes instead of single-quotes like we had specified in @warp-ds/eslint-config.

Another option, that maybe is easier for now, is to add a ”// prettier-ignore” or // eslint-disable-next-line to specific places in this project where we really don’t want to format it to a single line.

And another option is to decrease again the printWidth in the @warp-ds/eslint-config 😄 .

I'm not sure which one we would like to implement? I agree that the readability gets affected here if it moves it all to one single line. @magnuh @imprashast @BalbinaK Wdyt? :)

[imprashast]

I personally hate nested ternary statements like these. Over time they just become impossible to read. I know the alternative to this is a plain old if else block, but atleast that maintains readability:

let icon;
if (props.negative) {
  icon = IconError16;
} else if (props.positive) {
  icon = IconSuccess16;
} else if (props.warning) {
  icon = IconWarning16;
} else {
  icon = IconInfo16;
}

[BalbinaK]

I don't think changing printWidth to 100 is the solution. We might still see other examples of code that don't wrap though we'd visually expect them to. I'd also consider replacing a nested ternary statement with something a bit more readable at this stage 😄 As for the other rules not applying, not sure what's wrong but we could perhaps look into it together to better understand the problem 😊

[felicia-haggqvist]

I think I rambled on a bit too much in my previous comment. 🙈 What I meant before was that when trying to override only the printWidth from the @warp-ds/eslint-config, it overrode all of the other rules too. But I won't add this to the .eslintrc-file, because I don't think we want to override our @warp-ds/eslint-config. :) So, I'll just rewrite this to an if-else instead of a nested ternary statement :)

[magnuh]

Optimally it should leave these kind of things untouched... 🫤 Makes readability a lot worse to have it on one line.

[felicia-haggqvist]

I'll also see if I can add a rule in the .eslintrc-file. I think it is the vue-eslint-parser that needs to be tweaked.

[felicia-haggqvist]

Same issue as this: #167 (comment)

[magnuh]

Maybe we should change to import { suffix as ccSuffix, prefix as ccPrefix } from '@warp-ds/css/component-classes'; here, and const classBase = computed(() => (props.prefix ? ccPrefix : ccSuffix)); on line 17?

[magnuh]

This would have been sooo much nicer. 😄 (But maybe not possible with via the linter 😅 )

const wrapperClass = computed(() => [
  classBase.value.wrapper,
  props.label ? classBase.value.wrapperWithLabel : classBase.value.wrapperWithIcon,
]);