Разрабатывайте приложения Vue с помощью VS Code

Visual Studio Code Vue.js

Резюме:0 ошибок и 0 предупреждений должны быть самым основным требованием для каждого программиста.

FundebugПерепечатано с разрешения, авторские права принадлежат оригинальному автору.

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

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

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

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

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

npm install -g @vue/cli

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

vue create hello-world

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

Установлен:

2019-05-13-03

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

Ну, по крайней мере, нам нужно сначала установитьветур плагин. Это почти наверняка развитие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警告.

Категории