eslint-plugin-vue-classifier-js

An eslint plugin that provides a processor to extract the script type from Vue SFC files.

This allows you to apply different linting rules to the <script> part of your SFCs, based on the lang attribute (e.g. <script lang="ts">).

Installation

npm install @outcome-co/eslint-plugin-vue-classifier

Usage

Inside your eslint config, you should add something similar to the following:

{
    overrides: [
        {
            // For .vue files, use the standard vue-eslint-parser
            // with the vue-classifier plugin
            // The vue-classifier plugin contains a preprocessor that will emit a
            // code block with the extension that corresponds to the script type
            files: ['**/*.vue'],
            plugins: ['@outcome-co/vue-classifier'],
            parser: 'vue-eslint-parser',
            parserOptions: {
                // You can leave typescript here, as it handles both JS and TS
                parser: '@typescript-eslint/parser'
            }
        },
        {
            // The *.vue/*.ts pattern matches the TS code blocks emitted from .vue files 
            files: ['**/*.vue/*.ts'],
            parser: 'vue-eslint-parser',
            parserOptions: {
                parser: '@typescript-eslint/parser',
                // It's important to set createDefaultProgram to true, as we're compiling fragments
                // that the typescript compiler can't find on it's own
                createDefaultProgram: true
            },
            rules: {
                // Some typescript rules...
            }
        },
        {
            // The *.vue/*.fs pattern matches the JS code blocks emitted from .vue files 
            files: ['**/*.vue/*.js'],
            parser: 'vue-eslint-parser',
            parserOptions: {
                parser: '@typescript-eslint/parser',
                // It's important to set createDefaultProgram to true, as we're compiling fragments
                // that the typescript compiler can't find on it's own
                createDefaultProgram: true
            },
            rules: {
                // Some JS rules...
            }
        }
    ]
}

Development

Remember to run ./pre-commit.sh when you clone the repository.