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 vue-eslint-parser eslint

Set up your config

Create .eslintrc.json if you don't have one.

Add @master/css to the extends section.
Add vue-eslint-parser to the overrides section.

{
    "extends": ["@master/css"],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "overrides": [
        {
            "files": ["*.vue"],
            "parser": "vue-eslint-parser"
        }
    ]
}

Start linting your code

npx eslint *.vue

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