VueCLI 3 - Eslint Prettier

Question

I have issues with this Vue project configuration. I'm using prettier and eslint but files don't get the format the way they should.

I'm using VS Code as code editor and I have prettier installed with formatting on save.

Code Example:

    async fetchGenres({ commit }) {
        try {
            const response = await Vue.axios.get('/api/genres.json/', {
                headers: { Authorization: '' }
            })
            commit('SET_GENRES', response.data)
        } catch (err) {
            handleRouteError({ err, showReportDialog: false })
        }
    },

Always gets formatted to this:

    async fetchGenres({
        commit
    }) {
        try {
            const response = await Vue.axios.get('/api/genres.json/', {
                headers: {
                    Authorization: ''
                }
            })
            commit('SET_GENRES', response.data)
        } catch (err) {
            handleRouteError({
                err,
                showReportDialog: false
            })
        }
    },

I've also noticed in case I have semi-colons in the code, they are not removed, at that is not the desired behaviour. Formatting should also get rid of semi-colons.

babel.config.js

module.exports = {
    presets: ['@vue/app']
}

.eslintrc.js

module.exports = {
    root: true,
    env: {
        browser: true,
        node: true
    },
    plugins: ['vue', 'prettier'],
    extends: ['plugin:vue/essential', '@vue/prettier'],
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
    },
    parserOptions: {
        parser: 'babel-eslint'
    }
}

.prettierrc

{
    "printWidth": 160,
    "tabWidth": 4,
    "singleQuote": true,
    "semi": false,
    "trailingComma": "none",
    "bracketSpacing": true
}

It seems as

VueCLI 3 - Eslint Prettier

0 Answers0