Code Linting
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 i -D @master/eslint-config-css@rc eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh @eslint/compat globals typescript-eslint eslintSet up ESLint config
Import and add the Master CSS ESLint Configuration css to eslint.config.js.
import js from '@eslint/js'import { includeIgnoreFile } from '@eslint/compat'import { fileURLToPath } from 'node:url';import globals from 'globals'import tseslint from 'typescript-eslint'import react from 'eslint-plugin-react'import reactHooks from 'eslint-plugin-react-hooks'import reactRefresh from 'eslint-plugin-react-refresh'import css from '@master/eslint-config-css' const gitignorePath = fileURLToPath(new URL("./.gitignore", import.meta.url))export default tseslint.config( includeIgnoreFile(gitignorePath), { extends: [js.configs.recommended, ...tseslint.configs.recommended], files: ['**/*.{ts,tsx}'], languageOptions: { ecmaVersion: 2020, globals: globals.browser, }, plugins: { 'react': react, 'react-hooks': reactHooks, 'react-refresh': reactRefresh, }, rules: { ...react.configs['jsx-runtime'].rules, ...reactHooks.configs.recommended.rules, }, }, css)Start linting your code
npx eslintNot working in Visual Studio Code? Next, set up the VSCode ESLint.