Stylelint - Vue #

Configurações especificas que devem ser feitas quando queremos utilizar stylelint com Vue.js.

VSCode #

// settings.json
{
	"[vue]": { // Extensão do arquivo
        "editor.codeActionsOnSave": {
            "source.fixAll.stylelint": true,
        },
    },
	"stylelint.validate": [
		//...
		"vue"
	]
}

.stylelintrc #

Para que o stylelint funcione corretamente com Vue.js são necessárias algumas bibliotecas auxiliares:

• postcss-scss - Apenas se estiver utilizando SASS.
• postcss-safe-parser.
• postcss-html.

Após a instalação finalizar, ensira a seguinte configuração no stylelint.

// .stylelintrc.js
module.exports = {
	plugins: [
		//...
	],
    overrides: [
        {
            files: [ '*.vue', '**/*.vue' ],
            customSyntax: require('postcss-html')({
                css: 'postcss-safe-parser',
                scss: 'postcss-scss'
            }),
        }
    ],
	rules: {
		//...
	}
};

Outros frameworks #