Install Master CSS ESLint in React

Guide to installing Master CSS ESLint in your React project.

Installation

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

npm install -D @master/eslint-config-css@rc @typescript-eslint/parser eslint

Set up your config

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

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

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

Start linting your code

npx eslint *.{ts,tsx,js}

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