eslint-plugin-vue-split-by-script-lang
v1.0.2
Published
Allows to handle eslint configuration for a vue.js codebase with mixed languages
Downloads
47
Readme
eslint-plugin-vue-split-by-script-lang
The plugin allows to handle eslint configuration for a vue.js codebase with mixed languages, for example javascript and typescript.
The Problem
Large codebases are usually migrated from javascript to typescript in stages. At the stage where Vue files exist with both languages, it is difficult to set up an eslint configuration that includes typescript rules, since it is only possible to filter by file names and extensions in eslint overloads. Since Vue single file components with ts and js have the same file extension, it is not possible to distinguish them directly by their script language. Therefore, the typescript rules apply to the javascript code as well.
The Solution
As a solution, this package acts as an eslint processor which changes the file extension for non-javascript languages to .<lang>vue
(e.g. for Typescript: .tsvue
). This extension can then be used as a filter in an eslint override to add language-specific rules.
The credit for the idea goes to mjeanroy in this Issue comment.
install
npm install -D eslint-plugin-vue-split-by-script-lang
oryarn add -D eslint-plugin-vue-split-by-script-lang
eslint
andeslint-plugin-vue
are required peer-dependencies.
setup
module.exports = {
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
extraFileExtensions: [
'.vue'
]
},
plugins: [
'vue-split-by-script-lang'
],
extends: [
'plugin:vue/essential'
],
overrides: [
{
files: [
'*.ts',
'*.tsvue'
],
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
extraFileExtensions: [
'.tsvue'
]
},
plugins: [
'@typescript-eslint'
],
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
'plugin:vue/essential',
]
}
]
}