теперь используйтеVSCodeразвиватьVue.jsПриложение почти стандартно на интерфейсе, но много раз мы видим код в беспорядке.Как фронтенд-инженер, без разбора используются одинарные и двойные кавычки, есть точки с запятой и нет точки с запятой.В некоторых местах есть запятые а в некоторых местах нет.Запятые,пробелы и возврат каретки все смещены,и они говорят,что серьезно относятся к своей работе.Это не шутка.

Сегодня мы начнем с самого начала и полностью опишем, как его может использовать строгий пациент с чистотой кода.vscodeразвиватьvue, и как превратить проект с десятками тысяч ошибок в различных форматах по всему телу, который уже можно приговорить к смерти, в стандартную красоту.

Начните с установки

Для точности положимvscodeВсе плагины отключены, а пользовательские настройки очищены, чтобы максимально восстановить первоначальный вид:

Как пациент с чистотой кода, требования к версии для системы должны быть самыми высокими.Независимо от того, когда, давайте обновим все системы, которые можно обновить, до самой высокой версии:

npm install -g @vue/cli

Затем приступаем к созданию проекта:

vue create hello-world

Здесь обязательно выберите первый элемент:babel + eslint, эти два необходимы. я вижу некоторых людейeslintБеда, после того как проект установился, вручнуюeslintВыключил, просто потерял дар речи.

Установлены:

Не будем торопиться выполнять его первым, выполнить код проще всего, давайте откроем код и посмотрим:

Ну, по крайней мере, нам нужно сначала установитьветур плагин. Это почти наверняка развитиеvueСтандарт проекта, даже если я не говорю,vscodeТакже настоятельно рекомендуется установить его.

установитьveturВ будущем это будет немного более человечно. Далее, давайте посмотрим, может ли он быть отформатирован автоматически.Эта часть является фаворитом пациентов с чистотой. Добавьте несколько пробелов случайным образом, затем сохраните и попробуйте:

Не могу форматировать, даже намека нет!

формат с ворсом

даже еслиvscodeвнутреннийveturК счастью, мы не можем помочь нам форматировать автоматическиpackage.jsonВ команде есть еще одинlintкоманда, посмотримlintМожет ли команда помочь нам автоматически отформатировать:

lintСказал, что ошибки нет! Это явно ошибка с большим количеством пробелов, хорошо, почему?

Это потому, что по умолчаниюvue-cliу нас не установлено@vue/prettierПлагин, давайте сначала установим его вручную:

yarn add -D @vue/eslint-config-prettier

затем вpackage.jsonили.eslintrc.jsили что еще вы установилиeslint, добавьте к нему:

    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/prettier"
    ],

особенно последний@vue/prettier,Очень важный. затем выполнитьyarn lint. Лишние пробелы автоматически удаляются, но мы обнаружили, что некоторые места также были изменены:

Все одинарные кавычки были преобразованы в двойные кавычки, а точки с запятой, которых не было в конце строки, были добавлены. Почему это? потому что мы представилиprettier, но еще нетprettierДля настройки создаем.prettierrc.jsфайл, затем добавьте:

module.exports = {
  semi: false,
  singleQuote: true
}

выполнить сноваyarn lint, теперь мы видимlintуже работает. Он может не только удалять вставленные нами лишние пробелы, но и умеет преобразовывать двойные кавычки в одинарные по правилам, а также удалять лишнюю точку с запятой в конце строки. Конечно, ставить точку с запятой в конце строки или нет — вопрос философский, и вы можете решить сами в соответствии со своими личными предпочтениями. Здесь мы имеем право выполнить стандартную конфигурацию vue-cli.

Очень важно добраться до этого момента, если вы получаете гнилой, который больше не гнилой.vueпроект, существуют тысячи.vueфайлы, десятки тысяч различных ошибок формата, также могут передаватьсяyarn lintЭта однострочная команда исправляет их все!

Форматирование в vscode

Это еще не конец, отметим, что, хотяyarn lintКоманды могут помочь нам отформатировать код после написания кода, но поскольку мы используемvscodeразвития, мы, безусловно, надеемся, что сможемvscodeВы можете непосредственно увидеть метку ошибки.

В это время нам нужноvscodeУстановить другой плагинeslint.

вы думали, что он был установленeslintПлагин работает? Ни за что. потому чтоeslintне знаю нашего.vueФайл содержитjsсинтаксис, поэтому нам также нужно открыть нашvscodeфайл настроек.

Примечание. Это должно быть установлено наНастройки проектавместо того, чтобы просто установить его на свои личные настройки, иначе ваши товарищи по команде случайно изменят его и испортят. Правильный способ - иметь папку в папке вашего проекта.vscodeпапка иvueСамая раздражающая часть заключается в том, что он фактически помещает эту папку в.gitignore, вы должны исправить эту ошибку, то есть от.gitignoreположить в файл.vscodeудалять. резать.

в вашем проектеsettings.jsonДобавьте в файл следующий код:

{
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
}

В это время отмечаются все ошибки, обратите внимание на левую сторону, обязательно дайте ейsettings.jsonФайл зеленый, а не серый, если он серый, проверьте.gitignoreдокумент:

потому что мыsettings.jsonустановить в файлеautoFixOnSave, так что независимо от того, насколько грязный формат, просто нажмитеCtrl+SСохраните, это автоматически поможет нам организовать формат кода, не правда ли, очень удобно?

Конфликт с Красавицей

иногда нашиvscodeУстановлено больше плагинов, например, также установленоболее красивый плагинПотому что мы не развиваемсяvueпредметы и, возможно, другие типыjsпредметы, особенно традиционныеjsпроект, нужно использоватьprettierукрасить, иprettierНекоторые функции будут объединены сeslintКонфликтуя, например, мы устанавливаем глобальныйprettierизformatOnSave, эта функция будет работать сeslintизautoFixOnSaveбороться, чтобы избежать этого противоречия, мы обычно такжеsettings.jsonДобавьте в файл еще несколько параметров, например:

  "editor.tabSize": 2,
  "editor.formatOnSave": false,
  "prettier.semi": false,
  "prettier.singleQuote": true

С такими настройками в принципеprettierне будетeslintпопал в драку.

резюме

Вышеупомянутое использоватьvscodeразвиватьvueСтандартная настройка программы не так проста, как пишут некоторые статьи в Интернете, не только однаeslintВещи, которые можно решить, здесь также используютсяvetur,eslintа такжеprettier, Только комплексно используя несколько инструментов, мы можем действительно достичь цели видеть свои ошибки в любое время, сохранять автоматические изменения и исправлять прошлые ошибки. Я надеюсь, что код, написанный каждым фронтенд-инженером, будет не хуже его собственной руки, красивым, лаконичным и чистым.

Наши цели остаются прежними:0错误0警告.