Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vue/multi-word-component-names doesn't catch SFCs with setup script? #1836

Closed
vincerubinetti opened this issue Apr 4, 2022 · 0 comments · Fixed by #1844
Closed

vue/multi-word-component-names doesn't catch SFCs with setup script? #1836

vincerubinetti opened this issue Apr 4, 2022 · 0 comments · Fixed by #1844
Labels

Comments

@vincerubinetti
Copy link
Contributor

vincerubinetti commented Apr 4, 2022

Not sure if this is a bug or a question, but it's certainly strange to me. If it's intentional it should be noted somewhere.

I was linting a project made with vue-cli, and noticed that some single-word component files weren't being caught by the linter, and some were. The ones that were being caught were ones with just a <template>, and the ones that weren't had a <script setup>.

Here's a minimum reproducible example (at least in my project setup); three variations of a file incorrectly named Test.vue:

Caught ✅ (lint check fails)

<template>
  <p>test</p>
</template>

Caught ✅ (lint check fails)

<template>
  <AppButton />
</template>

<script lang="ts">
import { defineComponent } from "vue";
import AppButton from "@/components/AppButton.vue";

export default defineComponent({ components: { AppButton } });
</script>

Not caught ❌ (lint check passes)

<template>
  <AppButton />
</template>

<script setup lang="ts">
import AppButton from "@/components/AppButton.vue";
</script>
Here is my `package.json`:
{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit /unit",
    "test:e2e": "vue-cli-service test:e2e --headless",
    "lint": "vue-cli-service lint && prettier --write \"**/*.{scss,js,ts,json,vue,svg,yaml}\" --no-error-on-unmatched-pattern",
    "fresh": "yarn cache clean && rm -rf node_modules yarn.lock && yarn install",
    "test": "yarn test:lint && yarn test:unit && yarn test:e2e && yarn test:axe",
    "test:axe": "vue-cli-service test:unit /axe",
    "test:gui": "vue-cli-service test:e2e",
    "test:lint": "vue-cli-service lint --no-fix && prettier --check \"**/*.{scss,js,ts,json,vue,svg,yaml}\" --no-error-on-unmatched-pattern"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.3.0",
    "@fortawesome/free-brands-svg-icons": "^6.0.0",
    "@fortawesome/free-regular-svg-icons": "^6.0.0",
    "@fortawesome/free-solid-svg-icons": "^6.0.0",
    "@fortawesome/vue-fontawesome": "^3.0.0-5",
    "@vueuse/core": "^8.2.4",
    "body-scroll-lock": "^4.0.0-beta.0",
    "core-js": "^3.6.5",
    "file-saver": "^2.0.5",
    "lodash": "^4.17.21",
    "micromark": "^3.0.5",
    "normalize.css": "^8.0.1",
    "tippy.js": "^6.3.2",
    "ua-parser-js": "^1.0.2",
    "vue": "^3.0.0",
    "vue-inline-svg": "^3.1.0",
    "vue-router": "^4.0.0-0",
    "vue-tippy": "^6.0.0-alpha.52",
    "vuex": "^4.0.0-0",
    "wicg-inert": "^3.1.1"
  },
  "devDependencies": {
    "@types/body-scroll-lock": "^3.1.0",
    "@types/jest": "^24.0.19",
    "@types/jest-axe": "^3.5.3",
    "@types/lodash": "^4.14.175",
    "@types/node-fetch": "^2.6.1",
    "@types/ua-parser-js": "^0.7.36",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.15",
    "@vue/cli-plugin-e2e-cypress": "^5.0.0-rc.1",
    "@vue/cli-plugin-eslint": "~4.5.15",
    "@vue/cli-plugin-router": "~4.5.15",
    "@vue/cli-plugin-typescript": "~4.5.15",
    "@vue/cli-plugin-unit-jest": "~4.5.15",
    "@vue/cli-plugin-vuex": "~4.5.15",
    "@vue/cli-service": "~4.5.15",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "cypress": "^9.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^8.0.0",
    "eslint-plugin-vuejs-accessibility": "^0.7.1",
    "jest-axe": "^5.0.1",
    "msw": "^0.35.0",
    "node-fetch": "^2.6.0",
    "prettier": "^2.2.1",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "tslib": "^2.3.1",
    "typescript": "^4.4.4",
    "vue-jest": "^5.0.0-0"
  },
}

I'm using ^8.0.0.

doug-wade added a commit to doug-wade/eslint-plugin-vue that referenced this issue Apr 12, 2022
@doug-wade doug-wade mentioned this issue Apr 12, 2022
@FloEdelmann FloEdelmann linked a pull request Apr 12, 2022 that will close this issue
ota-meshi pushed a commit that referenced this issue Apr 12, 2022
* Add failing test case

* fix #1836: support script[setup] in multi-word-component-names
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants