Автоматическое исправление файлов JavaScript с помощью Prettier в VSCode

Вот как вы можете автоматически исправить свой код для реагирования с помощью ESLint + Prettier. Эта установка требует, чтобы у вас была установка Prettier через ESLint. Вы можете посмотреть мою историю на эту тему.

Установите расширение ESLint

Вы можете либо установить его из панели расширений VSCode, либо нажать Command + P (Ctrl + P в Windows), а затем ввести ext install dbaeumer.vscode-eslint.

Примечание. Если вам интересно, вам не нужно устанавливать расширение prettier.

Установите настройки в VSCode

Чтобы открыть настройки VSCode, найдите его в меню или нажмите Command + P (Ctrl + P в Windows), а затем введите и нажимайте Enter, пока не увидите Preferences: Open Settings (JSON).

В файле settings.json добавьте следующие свойства:

{
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
        "source.fixAll.eslint": true,
    },
    "editor.formatOnSave": true,
    "javascript.format.enable": false,
    ...
}

Часть editor.codeActionsOnSave будет запускать ESLint каждый раз, когда вы сохраняете свой код.

Мне нравится устанавливать editor.formatOnSave, чтобы VSCode мог помочь мне отформатировать все мои файлы.

Но есть неприятная проблема с VSCode, где средство форматирования по умолчанию срабатывает после ESLint. Чтобы решить эту проблему, просто отключите средство форматирования по умолчанию для файлов javascript (последняя строка).

Вы также можете использовать Настройки рабочего пространства VSCode, если хотите использовать разные конфигурации в разных проектах.

Спасибо этому твиттеру за то, что поделились похожей конфигурацией. И спасибо за чтение!