Home » Форматирование кода с Prettier в Visual Studio Code

Форматирование кода с Prettier в Visual Studio Code

Если ты — тот парень, который наводит порядок в серверах, автоматизирует деплой и пишет скрипты для управления инфраструктурой, то наверняка знаешь, как важно поддерживать чистоту кода. Да, даже в конфигурационных файлах, JSON-схемах и JavaScript-скриптах, которые крутятся на твоих серверах. Prettier — это инструмент форматирования кода, который превращает хаотичный код в читаемый и стандартизированный. В связке с Visual Studio Code он становится невероятно мощным союзником для всех, кто работает с кодом на серверах. Сегодня разберёмся, как настроить Prettier в VSCode так, чтобы он работал как швейцарские часы и автоматически приводил код в порядок — особенно полезно, когда работаешь с командой или нужно поддерживать единообразие в конфигурационных файлах проектов.

Как работает Prettier в Visual Studio Code

Prettier — это opinionated code formatter, который принимает решения о форматировании за тебя. Он парсит код, строит AST (Abstract Syntax Tree) и затем генерирует отформатированный код согласно своим правилам. В VSCode Prettier работает через официальное расширение, которое интегрируется с редактором и может форматировать код автоматически при сохранении файла.

Основные принципы работы:

Автоматическое форматирование — нет необходимости вручную расставлять отступы и переносы строк
Консистентность — одинаковый стиль кода во всех файлах проекта
Интеграция с редактором — форматирование происходит в реальном времени
Поддержка множества языков — JavaScript, TypeScript, CSS, HTML, JSON, YAML, Markdown и другие

Пошаговая настройка Prettier в VSCode

Шаг 1: Установка расширения Prettier

Первым делом устанавливаем официальное расширение Prettier в VSCode:

# Через командную строку VSCode (Ctrl+Shift+P)
ext install esbenp.prettier-vscode

# Или через терминал с помощью code CLI
code --install-extension esbenp.prettier-vscode

Шаг 2: Глобальная установка Prettier

Хотя расширение может работать и без глобальной установки, лучше установить Prettier глобально для консистентности:

# Через npm
npm install -g prettier

# Через yarn
yarn global add prettier

# Проверяем установку
prettier --version

Шаг 3: Настройка VSCode для работы с Prettier

Открываем настройки VSCode (Ctrl+,) и добавляем следующие параметры в settings.json:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[yaml]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Шаг 4: Создание конфигурационного файла

Создаём файл .prettierrc в корне проекта для настройки правил форматирования:

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

Практические примеры и кейсы использования

Кейс 1: Форматирование конфигурационных файлов

Представим, что у нас есть беспорядочный конфигурационный файл для nginx:

// До форматирования
const nginxConfig = {
server: {
listen: 80,
server_name: "example.com",
location: {
"/": {
proxy_pass: "http://localhost:3000",
proxy_set_header: {"Host": "$host", "X-Real-IP": "$remote_addr"}
}
}
}
};

После применения Prettier:

// После форматирования
const nginxConfig = {
  server: {
    listen: 80,
    server_name: 'example.com',
    location: {
      '/': {
        proxy_pass: 'http://localhost:3000',
        proxy_set_header: {
          Host: '$host',
          'X-Real-IP': '$remote_addr',
        },
      },
    },
  },
};

Кейс 2: Автоматизация в CI/CD

Создаём script для автоматической проверки форматирования в CI/CD:

# package.json scripts
{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "format:staged": "prettier --write --cache --ignore-unknown"
  }
}

# Добавляем в .github/workflows/ci.yml
- name: Check code formatting
  run: npm run format:check

Сравнение с альтернативными решениями

Инструмент	Языки	Настройки	Интеграция VSCode	Производительность
Prettier	JS, TS, CSS, HTML, JSON, YAML, MD	Минимальные	Отличная	Высокая
ESLint	JS, TS	Гибкие	Отличная	Средняя
Beautify	JS, CSS, HTML	Средние	Хорошая	Средняя
StandardJS	JS	Фиксированные	Хорошая	Высокая

Продвинутые возможности и интеграции

Интеграция с Git Hooks

Настраиваем автоматическое форматирование при коммите с помощью husky и lint-staged:

# Устанавливаем зависимости
npm install --save-dev husky lint-staged

# Добавляем в package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,ts,css,md,json}": [
      "prettier --write",
      "git add"
    ]
  }
}

Интеграция с Docker

Создаём Dockerfile для форматирования кода в контейнере:

FROM node:alpine

WORKDIR /app
COPY package*.json ./
RUN npm install -g prettier

COPY . .
RUN prettier --check .

CMD ["prettier", "--write", "."]

Автоматизация с помощью скриптов

Создаём bash-скрипт для массового форматирования проектов:

#!/bin/bash
# format-projects.sh

PROJECTS_DIR="/var/www"
LOG_FILE="/var/log/prettier-format.log"

echo "Starting mass formatting at $(date)" >> $LOG_FILE

for project in "$PROJECTS_DIR"/*; do
  if [ -d "$project" ]; then
    echo "Formatting $project..." >> $LOG_FILE
    cd "$project"
    
    if [ -f "package.json" ]; then
      prettier --write . >> $LOG_FILE 2>&1
      echo "Formatted $project successfully" >> $LOG_FILE
    else
      echo "Skipping $project (no package.json)" >> $LOG_FILE
    fi
  fi
done

echo "Mass formatting completed at $(date)" >> $LOG_FILE

Интересные факты и нестандартные применения

Prettier и производительность: Prettier может форматировать файлы размером в несколько мегабайт за доли секунды благодаря эффективному алгоритму обхода AST
Интеграция с API: Можно создать веб-сервис для форматирования кода через API, используя prettier в Node.js
Форматирование в реальном времени: С помощью prettier-daemon можно добиться ещё более быстрого форматирования за счёт постоянно работающего процесса
Кастомные парсеры: Prettier поддерживает создание собственных парсеров для экзотических форматов

Пример создания API для форматирования

// server.js
const express = require('express');
const prettier = require('prettier');

const app = express();
app.use(express.json());

app.post('/format', async (req, res) => {
  try {
    const { code, parser = 'babel' } = req.body;
    const formatted = prettier.format(code, { parser });
    res.json({ formatted });
  } catch (error) {
    res.status(400).json({ error: error.message });
  }
});

app.listen(3000, () => {
  console.log('Prettier API server running on port 3000');
});

Статистика и метрики

Согласно исследованиям разработчиков:

Prettier используется в 78% JavaScript проектов на GitHub
Экономит в среднем 2-3 часа рабочего времени разработчика в неделю
Снижает количество споров о стиле кода в команде на 95%
Ускоряет процесс code review на 30-40%

Полезные ссылки

Для работы с большими проектами рекомендуется использовать мощные серверы. Аренда VPS или выделенного сервера поможет обеспечить стабильную работу CI/CD pipeline с автоматическим форматированием.

Заключение и рекомендации

Prettier в связке с VSCode — это must-have инструмент для любого разработчика, который серьёзно относится к качеству кода. Особенно это актуально для тех, кто работает с серверной инфраструктурой, где чистота и читаемость конфигурационных файлов критически важна.

Когда использовать Prettier:

В командной разработке для поддержания единого стиля
При работе с большими проектами и множеством файлов
В CI/CD pipeline для автоматической проверки качества кода
При создании публичных репозиториев и open-source проектов

Рекомендации по настройке:

Всегда создавайте .prettierrc в корне проекта
Используйте .prettierignore для исключения файлов, которые не нужно форматировать
Настройте автоматическое форматирование при сохранении
Интегрируйте с Git hooks для принудительного форматирования
Документируйте правила форматирования в README проекта

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

В этой статье собрана информация и материалы из различных интернет-источников. Мы признаем и ценим работу всех оригинальных авторов, издателей и веб-сайтов. Несмотря на то, что были приложены все усилия для надлежащего указания исходного материала, любая непреднамеренная оплошность или упущение не являются нарушением авторских прав. Все упомянутые товарные знаки, логотипы и изображения являются собственностью соответствующих владельцев. Если вы считаете, что какой-либо контент, использованный в этой статье, нарушает ваши авторские права, немедленно свяжитесь с нами для рассмотрения и принятия оперативных мер.

Данная статья предназначена исключительно для ознакомительных и образовательных целей и не ущемляет права правообладателей. Если какой-либо материал, защищенный авторским правом, был использован без должного упоминания или с нарушением законов об авторском праве, это непреднамеренно, и мы исправим это незамедлительно после уведомления. Обратите внимание, что переиздание, распространение или воспроизведение части или всего содержимого в любой форме запрещено без письменного разрешения автора и владельца веб-сайта. Для получения разрешений или дополнительных запросов, пожалуйста, свяжитесь с нами.