VSCode разумно настраивает ESLint+Prettier

ESLint
VSCode разумно настраивает ESLint+Prettier

предисловие

Вчера участник моего проекта с открытым исходным кодом отправил мне код. Когда я использовал webstorm для просмотра его кода, я обнаружил кучу желтых ошибок, связанных с форматом кода. Я спросил его об этой куче желтых ошибок. Ваш редактор не дал им намекнуть? Он сказал, что vscode, который он использовал, не вызывал этих ошибок.

Итак, я лично скачал vscode и обнаружил, что подсказки нет.Я искал статьи о настройке vscode eslint+prettier на Baidu и Nuggets, но ни одна из статей не была простой в использовании.Наконец, после того, как мы наступили на множество ям, настройка прошла успешно. .

В этой статье мы расскажем вам, как настроить Eslint+Prettier на vscode. Заинтересованные разработчики могут прочитать эту статью.

написать впереди

Элементы, используемые в этой статье,package.jsonСоответствующие пакеты зависимостей были установлены в корневом каталоге проекта, а также в корневом каталоге проекта есть соответствующие файлы конфигурации. Webstorm может корректно распознать, что мой конфигурационный файл отформатирован при сохранении, а vscode — нет, цель этой статьи — решить эту проблему.

Адрес проекта, использованный в этой статье:chat-system

Установка плагина

Сначала нам нужно установить соответствующие плагины для vscode.

  • Установите eslint, красивые плагины

использование плагина

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

Я решил создать папку .vscode в корневом каталоге проекта, а затем создать под ней файл settings.json и синхронизировать эту папку с git, Таким образом, vscode будет предпочтительно читать файл конфигурации в корневом каталоге проекта. , Это прекрасно решило проблему только сейчас.

После создания файла добавьте следующую конфигурацию:

{
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.alwaysShowStatus": true,
  "eslint.format.enable": true,
  "eslint.packageManager": "yarn",
  "eslint.run": "onSave",
  "prettier.packageManager": "yarn",
  "eslint.validate": [
    "vue",
    "javascript",
    "javascriptreact"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "vetur.validation.template": false,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true,
  "editor.formatOnSave": true,
  "files.eol": "\n"
}

Примечание. Если у вас включена функция prettier, но нет связанного файла конфигурации, для параметра editor.formatOnSave должно быть установлено значение false. Иначе будет конфликт с сохранением самого vscode

Далее настроимprettier, то же создается в корневом каталоге проекта.prettierrc.jsonфайл, добавьте следующую конфигурацию:

{
  "tabWidth": 2,
  "useTabs": false,
  "endOfLine": "auto",
  "singleQuote": false,
  "semi": true,
  "trailingComma": "none",
  "bracketSpacing": true
}

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

После завершения вышеуказанной настройки vscode уже может выдавать соответствующие подсказки согласно нашим спецификациям, нажимаемctrl+sПри сохранении кода он также будет отформатирован в соответствии с нашей пользовательской спецификацией.

Яма под Windows

После выполнения вышеуказанной настройки под маком проблем нет, и все идет по моим правилам настройки.Однако мой участник проекта, использующий windows, сказал, что форматирование комментария не вступило в силу.Я настроил, комментарий должен иметь пробел, нажмите ctrl+s форматируется автоматически.

Чтобы решить эту проблему, я нашел много решений, но ни одно из них не работало.Когда я уже собирался сдаться, я случайно обнаружил, что eslint под vscode имеет знак disabled (как показано на рисунке ниже).

На данный момент я думаю, что знаю, в чем проблема. Должно быть, после включения красивее, vscode отключает eslint по умолчанию. Я попытался дважды щелкнуть значок отключения, и появляется интерфейс, показанный на рисунке ниже, выберите первый .

Конечно же, как я и ожидал, после выполнения вышеуказанных операций, какой флаг eslint был отмечен, я снова попробовал Ctrl+s, и это сработало, и комментарии автоматически отформатировались в соответствии с моими правилами.

напиши в конце

  • Если в статье есть ошибки, исправьте их в комментариях, если статья вам поможет, ставьте лайк и подписывайтесь 😊
  • Эта статья была впервые опубликована на Наггетс, перепечатка без разрешения запрещена 💌
Категории