Install Master CSS ESLint in Vue.js

Guide to installing Master CSS ESLint in your Vue.js project.

Installation

Install the plugin and parser into your project via package managers.

npm install -D @master/eslint-config-css@rc eslint-plugin-vue @vue/eslint-config-typescript @eslint/compat eslint

Set up ESLint config

Import and add the Master CSS ESLint Configuration css to eslint.config.js.

import { includeIgnoreFile } from '@eslint/compat'
import { fileURLToPath } from 'node:url'
import vue from 'eslint-plugin-vue'
import vueTS from '@vue/eslint-config-typescript'
import css from '@master/eslint-config-css'
 
const gitignorePath = fileURLToPath(new URL("./.gitignore", import.meta.url))
 
export default [
    includeIgnoreFile(gitignorePath),
    ...vue.configs['flat/essential'],
    ...vueTS(),
    css
]

Start linting your code

npx eslint

Not working in Visual Studio Code? Next, set up the VSCode ESLint.