Code style и линтинг

Соблюдение единого стиля кода — фундаментальный элемент в разработке на JavaScript с использованием библиотеки Ant Design. Несмотря на то, что сама библиотека предоставляет готовые компоненты и стили, их интеграция в проект без поддержания единых стандартов кода может привести к хаосу, усложнить поддержку и снизить читаемость кода.

ESLint и Prettier

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

Пример настройки .eslintrc.js:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {
    'react/prop-types': 'off',
    'no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
    '@typescript-eslint/no-explicit-any': 'off',
  },
};

Для Prettier конфигурация обычно хранится в файле .prettierrc:

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2,
  "semi": true
}

Комбинация ESLint и Prettier позволяет автоматически форматировать код и выявлять ошибки на ранних стадиях разработки, что особенно важно при работе с компонентами Ant Design, где большое количество пропсов и вложенных элементов.

Структура кода и соглашения по именованию

При работе с Ant Design важно соблюдать единый стиль именования компонентов и пропсов. Компоненты должны именоваться с использованием PascalCase, а переменные и функции — в camelCase. Пример:

import { Button, Form, Input } from 'antd';

const LoginForm = () => {
  const handleSubmit = (values) => {
    console.log(values);
  };

  return (
    <Form onFin ish={handleSubmit}>
      <Form.Item name="username" label="Имя пользователя">
        <Input placeholder="Введите имя пользователя" />
      </Form.Item>
      <Form.Item name="password" label="Пароль">
        <Input.Password placeholder="Введите пароль" />
      </Form.Item>
      <Button type="primary" htmlType="submit">
        Войти
      </Button>
    </Form>
  );
};

export default LoginForm;

Такой стиль повышает читаемость кода и позволяет легко ориентироваться в больших проектах с множеством компонентов Ant Design.

Организация компонентов

Компоненты Ant Design рекомендуется разделять по функциональным блокам, хранить их в отдельных папках с именем компонента и сопутствующими стилями. Пример структуры:

src/
 ├─ components/
 │   ├─ LoginForm/
 │   │   ├─ LoginForm.jsx
 │   │   ├─ LoginForm.module.css
 │   │   └─ index.js
 │   └─ Button/
 │       ├─ CustomButton.jsx
 │       └─ index.js

Это облегчает поддержку и рефакторинг, особенно в крупных приложениях.

Использование TypeScript с Ant Design

Поддержка TypeScript позволяет избежать ошибок типов при работе с компонентами, которые имеют большое количество пропсов. Рекомендуется использовать типизацию для всех пропсов и состояний:

import { Form, Input, Button } from 'antd';
import { FC } from 'react';

interface LoginFormProps {
  onSubmit: (values: { username: string; password: string }) => void;
}

const LoginForm: FC<LoginFormProps> = ({ onSubmit }) => (
  <Form onFin ish={onSubmit}>
    <Form.Item name="username" label="Имя пользователя">
      <Input placeholder="Введите имя пользователя" />
    </Form.Item>
    <Form.Item name="password" label="Пароль">
      <Input.Password placeholder="Введите пароль" />
    </Form.Item>
    <Button type="primary" htmlType="submit">
      Войти
    </Button>
  </Form>
);

export default LoginForm;

TypeScript совместно с ESLint и Prettier гарантирует соблюдение стиля и снижает вероятность ошибок при передаче пропсов.

Настройка линтинга для Ant Design

Ant Design использует строгие правила для компонентов, например, пропсы style должны быть минимальными, а предпочтение отдается использованию готовых классов и тем. Рекомендуется добавить в ESLint специфические правила:

rules: {
  'react/jsx-props-no-spreading': 'warn',
  'react/jsx-indent': ['error', 2],
  'react/jsx-indent-props': ['error', 2],
}

Эти правила предотвращают неконсистентное оформление JSX и поддерживают единый вид всех компонентов.

Автоформатирование и интеграция в CI/CD

Для автоматизации форматирования кода в больших командах удобно использовать Husky и lint-staged, чтобы проверка стиля и линтинг выполнялись перед коммитом:

// package.json
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.js": ["eslint --fix", "prettier --write"],
  "*.jsx": ["eslint --fix", "prettier --write"]
}

Это позволяет гарантировать, что все коммиты будут соответствовать единым стандартам кода.