Как разработчики, мы стремимся к чистому и организованному коду, чтобы улучшить его читаемость и удобство обслуживания. Одной из распространенных задач является организация импорта, которая может оказаться утомительной и отнимающей много времени. К счастью, Visual Studio Code (VS Code) предоставляет несколько методов автоматической организации импорта при сохранении кода. В этой статье мы рассмотрим несколько подходов, дополненных примерами кода, которые помогут вам оптимизировать рабочий процесс кодирования и повысить производительность.

Метод 1: ESLint с Prettier
VS Code легко интегрируется с ESLint и Prettier, двумя популярными инструментами анализа и форматирования кода. Настроив эти инструменты, вы можете автоматически организовать импорт при сохранении. Вот как:

Шаг 1. Установите необходимые расширения:

• ESLint: установите расширение ESLint из магазина VS Code.
• Prettier: установите расширение Prettier из магазина VS Code.

Шаг 2. Настройте ESLint:
Создайте файл .eslintrcв корневом каталоге вашего проекта, если у вас его еще нет. Добавьте следующую конфигурацию:

{
  "rules": {
    "import/order": ["error", { "newlines-between": "always" }]
  }
}

Шаг 3. Настройте VS Code.
Откройте настройки VS Code (Preferences → Settings) и добавьте следующую конфигурацию:

{
  "editor.codeActionsOnSave": {
    "source.organizeImports": true
  }
}

Метод 2: EditorConfig с TypeScript
Если вы работаете с TypeScript, вы можете использовать EditorConfig — формат файла, который помогает разработчикам поддерживать согласованные стили кодирования в разных редакторах. Выполните следующие действия:

Шаг 1. Установите расширение EditorConfig.
Установите расширение EditorConfig из магазина VS Code.

Шаг 2. Настройте EditorConfig:
Создайте файл .editorconfigв корневом каталоге вашего проекта, если у вас его еще нет. Добавьте следующую конфигурацию:

root = true
[*.{ts,tsx}]
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
charset = utf-8
end_of_line = lf

Шаг 3. Настройте VS Code:
Откройте настройки VS Code (Preferences → Settings) и добавьте следующую конфигурацию:

{
  "editor.formatOnSave": true
}

Метод 3: собственное расширение VS Code
Если приведенные выше методы не соответствуют вашим требованиям, вы можете создать собственное расширение VS Code для организации импорта при сохранении. Вот упрощенный пример:

Шаг 1. Создайте новый проект расширения VS Code:
Выполните следующую команду в своем терминале, чтобы создать новый проект расширения:

yo code

Шаг 2. Реализуйте событие onWillSaveTextDocument:
В файл extension.tsвашего расширения добавьте следующий код:

import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
  let disposable = vscode.workspace.onWillSaveTextDocument(event => {
    const document = event.document;
    if (document.languageId === 'typescript') {
      const edit = new vscode.WorkspaceEdit();
      edit.set(document.uri, [
        vscode.TextEdit.replace(
          new vscode.Range(
            new vscode.Position(0, 0),
            new vscode.Position(document.lineCount, 0)
          ),
          organizeImports(document.getText())
        )
      ]);
      event.waitUntil(vscode.workspace.applyEdit(edit));
    }
  });
  context.subscriptions.push(disposable);
}
function organizeImports(code: string): string {
  // Implement your logic to organize imports here
  return code;
}

Шаг 3. Создайте и установите расширение.
Создайте расширение, выполнив команду npm run compile. Затем нажмите F5, чтобы открыть новое окно VS Code с установленным расширением.

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

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