@scayle/eslint-plugin-vue-composable
v0.2.3
Rules to avoid unpleasant composable problems
1.4K/weekUpdated 1 months agoMITUnpacked: 27.6 KB
Published by SCAYLE Commerce Engine
npm install @scayle/eslint-plugin-vue-composable@scayle/eslint-plugin-vue-composable
@scayle/eslint-plugin-vue-composable
An ESLint plugin that enforces Vue 3 Composition API best practices by detecting composables,
lifecycle hooks, watchers, and computed properties called after async operations.
Prevents subtle reactivity bugs caused by losing component context after await statements.
Why use this plugin?
When writing Vue 3 composables with async operations,
it's easy to accidentally lose the component context after an await statement.
This happens because the current instance is tracked and can become undefined after asynchronous operations.
For example, this code has a subtle bug:
``js
export const useExample = async () => {
const data = await fetchData()
// ❌ This can cause errors because component context might be lost
const count = ref(0)
onMounted(() => {
console.log('mounted')
})
return { count }
}
`
This ESLint plugin catches these issues at development time,
preventing runtime errors and reactivity bugs that are difficult to debug in production.
Installation
You'll need to install ESLint along with this package:
`bashUsing pnpm
pnpm add --dev eslint @scayle/eslint-plugin-vue-composable
Using yarn
yarn add --dev eslint @scayle/eslint-plugin-vue-composable
Using npm
npm install --save-dev eslint @scayle/eslint-plugin-vue-composable
`
Usage
Add
to the plugins section of your .eslintrc configuration file.`json
{
"plugins": [
"@scayle/vue-composable"
]
}
`Then configure the rules you want to use under the rules section.
json
{
"rules": {
"@scayle/vue-composable/no-composable-after-await": "warn",
"@scayle/vue-composable/no-lifecycle-after-await": "error",
"@scayle/vue-composable/no-watch-after-await": "error",
"@scayle/vue-composable/no-computed-after-await": "error"
}
}
`Rules
| Name | Description |
| :------------------------------------------------------------------- | :-------------------------------------------------------------------------- |
| no-composable-after-await | disallow asynchronously called composable functions in composables |
| no-computed-after-await | disallow asynchronously registered
in composables |
| no-lifecycle-after-await | disallow asynchronously registered lifecycle hooks in composables |
| no-watch-after-await | disallow asynchronously registered watch and watchEffect` in composables |License
Licensed under the MIT License
What is SCAYLE?
SCAYLE is a full-featured e-commerce software solution that comes with flexible APIs.
Within SCAYLE, you can manage all aspects of your shop, such as products, stocks, customers, and transactions.
Learn more about SCAYLE’s architecture and commerce modules in the Docs.