ESLint plugin to enforce parentheses around TypeScript type assertions in Vue templates
npm install eslint-plugin-vue-type-assertion-parensESLint plugin to enforce parentheses around TypeScript type assertions in Vue templates.
Mainly to create a workaround for this issue:
https://github.com/vuejs/language-tools/issues/2104
But also to potentially improve readability and prevent other parsing ambiguities.
❌ Bad:
``vue`
✅ Good:
`vue`
`bash`
npm install --save-dev eslint-plugin-vue-type-assertion-parens
Add the plugin to your ESLint configuration:
`javascript`
// .eslintrc.js
module.exports = {
extends: [
'plugin:vue-type-assertion-parens/recommended'
]
};
`javascript`
// .eslintrc.js
module.exports = {
plugins: ['vue-type-assertion-parens'],
rules: {
'vue-type-assertion-parens/type-assertion-parens': 'error'
}
};
This rule enforces that TypeScript type assertions in Vue templates are wrapped in parentheses.
❌ Incorrect:
`vue`
✅ Correct:
`vue`
The rule correctly handles chained type assertions:
❌ Incorrect:
`vue`
✅ Correct:
`vue`
This rule supports ESLint's auto-fix feature. Run ESLint with the --fix` flag to automatically add parentheses around type assertions.
- ESLint >= 7.0.0
- eslint-plugin-vue >= 8.0.0
- Vue.js with TypeScript
MIT