Код-стайл и линтинг

Использование ESLint и Prettier

В проектах с MUI критически важно поддерживать единообразный стиль кода. ESLint отвечает за обнаружение ошибок и потенциальных проблем, а Prettier — за автоматическое форматирование. Для интеграции:

npm install eslint prettier eslint-config-prettier eslint-plugin-react --save-dev

Настройка .eslintrc.js:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  rules: {
    'react/prop-types': 'off',
    'no-unused-vars': 'warn',
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
};

Настройка Prettier через .prettierrc:

{
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 100,
  "semi": true
}

Конвенции именования компонентов

MUI использует PascalCase для React-компонентов и camelCase для свойств и методов. Например:

import Button from '@mui/material/Button';

function SubmitFormButton() {
  return <Button variant="contained">Submit</Button>;
}

Использование PascalCase улучшает читаемость при работе с большим количеством компонентов и позволяет сразу отличить компонент от обычной функции или переменной.

Структура файлов и организация компонентов

Проект с MUI обычно строится по модульному принципу:

src/
 ├─ components/
 │   ├─ Header/
 │   │   ├─ Header.js
 │   │   └─ Header.styles.js
 │   └─ Button/
 │       ├─ Button.js
 │       └─ Button.styles.js
 └─ pages/
     ├─ HomePage.js
     └─ AboutPage.js
  • Компоненты делятся на логические блоки.
  • Стили для MUI можно выносить в отдельные файлы или использовать sx и styled внутри компонента.
  • Структура папок облегчает навигацию и масштабирование проекта.

Использование sx и styled с линтингом

MUI предоставляет два основных подхода для стилизации:

  1. sx prop — быстрый способ применять стили инлайн с поддержкой темы:
<Button sx={{ bgcolor: 'primary.main', color: 'white', px: 3 }}>
  Click me
</Button>
  1. styled API — создание переиспользуемых компонентных стилей:
import { styled } from '@mui/material/styles';
import Button from '@mui/material/Button';

const CustomButton = styled(Button)(({ theme }) => ({
  backgroundColor: theme.palette.secondary.main,
  padding: theme.spacing(2),
  '&:hover': {
    backgroundColor: theme.palette.secondary.dark,
  },
}));

Для линтинга sx и styled можно настроить ESLint-плагины, чтобы контролировать допустимые свойства темы и предотвращать дублирование цветов.

Контроль типов и PropTypes

Для сложных компонентов рекомендуется использовать PropTypes или TypeScript. В Jav * aScript:

import PropTypes from 'prop-types';

function Card({ title, content }) {
  return (
    <div>
      <h2>{title}</h2>
      <p>{content}</p>
    </div>
  );
}

Card.propTypes = {
  title: PropTypes.string.isRequired,
  content: PropTypes.string,
};

ESLint может проверять соответствие PropTypes, предотвращая ошибки передачи неверных типов.

Линтинг и правила MUI

Для проектов с MUI полезно добавить собственные правила ESLint для компонентов:

rules: {
  'react/jsx-uses-react': 'off',
  'react/react-in-jsx-scope': 'off',
  'no-console': 'warn',
  'max-len': ['warn', { code: 100 }],
  'padding-line-between-statements': [
    'warn',
    { blankLine: 'always', prev: '*', next: 'return' }
  ]
}
  • Ограничение длины строк помогает лучше читать JSX с sx.
  • Предупреждения о console.log предотвращают захламление кода.
  • Пустые строки между блоками повышают визуальное разделение логики.

Интеграция линтинга в CI/CD

Для больших команд важно автоматизировать линтинг. В package.json добавляется:

"scripts": {
  "lint": "eslint 'src/**/*.{js,jsx}'",
  "lint:fix": "eslint 'src/**/*.{js,jsx}' --fix",
  "format": "prettier --write 'src/**/*.{js,jsx,css,json}'"
}

В CI можно запускать npm run lint перед сборкой, чтобы блокировать ошибки стиля и соблюдение конвенций.

Советы по поддержанию чистого кода

  • Всегда использовать sx для простых кастомизаций и styled для переиспользуемых элементов.
  • Не смешивать глобальные стили с MUI-темой, чтобы избежать конфликтов.
  • Компоненты должны быть атомарными: один компонент — одна ответственность.
  • Регулярно запускать eslint --fix и prettier для автоматического выравнивания кода.

Эти правила и практики помогают поддерживать проект MUI чистым, читаемым и удобным для командной работы, а также упрощают масштабирование интерфейса без нарушения консистентности кода.

Оглавление