Най-добър редактор на кодове за Vue.js

С нарастващ брой качествени редактори на кодове, от които да избирате, може би се чудите кой е най-добрият редактор на кодове за Vue.js. Някои разработчици са толкова отдадени на своите редактори, колкото и на техните политически убеждения, така че ще получите различни отговори в зависимост от това, кого питате.

Но що се отнася до кодирането във Vue, един от най-добрите хора, които могат да поискат, е Евън Ти, създателят на Vue. И така, какво използва той? Visual Studio Code.

В интервю той беше попитан по темата и той отговори:

... Превключвах напред и назад, доскоро започнах да използвам TypeScript и тъй като VS Code TypeScript е толкова добър, преминах (постоянно) към VS Code.

Въпреки че Vue не изисква да използвате TypeScript, скоро неговият изходен код ще бъде записан в него, както разгледахме в тази публикация на Vue 3.0.

Може би си мислите ... Но аз не работя върху изходния код и не кодирам Vue с TypeScript, дали VS код все още е важен за мен?

Това ме отвежда към темата за Vetur, която е богато на функции разширение, което ви дава неща като подчертаване на синтаксис във .vue файлове, фрагменти, свързване, проверка на грешки и форматиране, както и автоматично завършване и отстраняване на грешки. В този момент това е най-доброто разширение Vue за редактор на код. И трябва да бъде, защото е разработена от Пайн Ву, който е член на основния екип на Vue.

Така че, ако се интересувате от използването на VS код за разработка на Vue (или вече са), можете да следвате по-долу, тъй като ви показвам как да оптимизирате VS код.

Какво ще научим?

Ще се научим как да:

  • Вземете подчертаване на синтаксиса в нашите .vue файлове
  • Използвайте фрагменти от код за по-бърз работен процес
  • Конфигурирайте нашия редактор да форматира автоматично кода ни
  • И проучете други полезни разширения, които ще подобрят нашия опит в развитието

Инсталиране на Vetur

Има няколко функции, които правят VS Code чудесна среда за развитие на Vue, включително Vetur, плъгин, проектиран от Pine Wu, основен член на екипа на Vue.js.

Тук във VS Code, ако отворим .vue файл, като този файл About.vue, виждаме целия този сив код. Това е така, защото VS Code няма автоматично да подчертае синтаксиса във .vue файлове.

Vetur може да поправи това за нас и да ни предостави други функции, предназначени да подобрят опита на програмиста.

Затова нека го инсталираме сега Отворете магазина за разширения.

След това потърсете „Vetur“, изберете го в резултатите от търсенето и щракнете върху Инсталиране. След това щракнете върху Презареди.

Характеристики на Vetur

Сега, когато Vetur е инсталиран, нека разгледаме неговите функции.

Подчертаване на синтаксис Като напишем команда + P и въведете името на .vue файл, можем да отворим файла About.vue. Както можете да видите, сега нашият код получава правилно подчертаване на синтаксиса. Страхотно - няма повече сив код.

Проверявайки файла Home.vue, можем да видим, че и нашият JavaScript се прави правилно маркиран.

Snippets Друга функция, която Vetur предлага в комплект с кодовите му фрагменти. Това са спестяващи време „фрагменти“ от код, които ви позволяват бързо да създавате често използвани парчета код.

Нека създадем нов компонент, за да видим това в действие. Ще се казваме EventCard.vue. Сега, ако напишем думата "скеле" в .vue файл и натиснете ENTER, това автоматично ще запълни този файл със скелета или скелета на един файл .vue компонент.

Emmet Vetur също се предлага в комплект с Emmet. Това е популярен инструмент, който ви позволява да използвате преки пътища, за да създадете своя код.

Например, можем да напишем h1 и натиснете enter и това ще създаде отварящ и затварящ h1 елемент.

Когато напишем нещо по-сложно, като div> ul> li, то ще произведе:

        <Ул>             
  •              
  • Ако изглежда, че Emmet не работи за вас, можете да добавите това към потребителските си настройки:

    "emmet.includeLanguages": {
              "vue": "html"
          }

    За да научите повече за това как Emmet може да ускори развитието ви, отидете тук.

    Инсталиране на ESLint & Prettier

    Сега трябва да сме сигурни, че имаме инсталирани ESLint и по-красиви. В магазина за разширения ще извършим търсене на ESLint, след което ще продължим и ще го инсталираме. И ние ще направим същото за По-красиво. След като бъде инсталиран, ще натискаме презареждане, за да презаредим VS код.

    Конфигуриране на ESLint

    Сега, когато те са инсталирани, трябва да добавим малко допълнителна конфигурация към тях.

    Когато създадохме нашия проект от терминала, решихме да го създадем със специални конфигурационни файлове, които ни дадоха този .eslintrc.js файл, където можем да конфигурираме ESLint за този проект. Ако не избрахме специални файлове, щяхме да намерим конфигурациите на ESLint в рамките на нашия пакет.json.

    Така че в нашия .eslintrc.js файл ще добавим:

    "Плъгин:-хубава / препоръчва"

    Това ще даде възможност за по-красива поддръжка в ESLint с настройките по подразбиране.

    Така че нашият файл сега изглежда така:

    module.exports = {
          root: true,
          env: {
            възел: вярно
          }
          'удължава': [
            "Плъгин: Vue / от съществено значение",
            'plugin: по-красива / препоръчителна', // добавихме този ред
            "@ Вю / хубава"
          ],
          правила: {
            'no-console': process.env.NODE_ENV === 'производство'? 'грешка': 'изключен',
            'без отстраняване на грешки': process.env.NODE_ENV === 'производство'? 'грешка': 'изключен'
          }
          parserOptions: {
            парсер: 'babel-eslint'
          }
        }

    Конфигуриране по-красиво

    Също така имаме възможност да създадем конфигурационен файл за По-красиво, да добавим някои специални настройки според нашия личен стил или предпочитанията на нашия екип.

    Ще го създадем тук и ще го наречем .prettierrc.js.

    А вътре ще напишем:

    module.exports = {
            SingleQute: true,
            полу: невярно
        }

    Това ще преобразува двойните кавички в единични кавички и ще се увери, че точка-запетая не се поставя автоматично.

    Настройки на потребителя

    За да оптимизираме допълнително VS Code за страхотно изживяване при разработка, ще добавим някои конфигурации към нашите потребителски настройки. За достъп до Настройките на потребителя щракнете върху Код в горната навигационна лента, след това Предпочитания, след това Настройки. Това ще покаже прозорец с потребителски настройки, където можете да добавите настройки в json.

    Първо искаме да добавим:

    "vetur.validation.template": невярно

    Това ще изключи функцията за свързване на Vetur. Вместо това ще разчитаме на ESLint + По-красиво.

    Сега искаме да кажем на ESLint на какви езици искаме той да валидира (vue, html и javascript) и да зададем autoFix на true за всеки:

    "eslint.validate": [
            {
                "език": "vue",
                "autoFix": вярно
            }
            {
                "език": "html",
                "autoFix": вярно
            }
            {
                "language": "javascript",
                "autoFix": вярно
            }
        ],

    Тогава за добра мярка ще кажем на ESLint да autoFixOnSave.

    "eslint.autoFixOnSave": true,

    И кажете на нашия редактор да форматираOnSave.

    "editor.formatOnSave": true,

    Тествам го

    За да проверим, че това работи, ще добавим свойство на данни към нашия компонент на EventCard тук и ще добавим цитат: „Искам да бъда единичен“, тогава ще хвърлим и запетая. Когато ударим запис, нашите котировки се преобразуват в единични кавички и запетайката се премахва. Страхотно - работи.

    Допълнителни инструменти

    Сега нека разгледаме някои допълнителни инструменти, които могат да ви помогнат да ускорите развитието си.

    Копиране на относителния път Копирането на относителния път е разширение, което ви позволява да копирате местоположението, в което файлът живее, въз основа на връзката му с директорията, към която се свързва.

    Нека да го потърсим, да го инсталираме и да го видим в действие.

    В нашия файл Home.vue виждаме, че тук вече има относителен път, където импортираме компонента HelloWorld.

    За да получим относителния път на файл, който искаме да импортираме, щракваме с десния бутон върху файла, след което избираме Copy Relative Path. Сега, когато поставим това, което беше копирано, виждаме, че имаме точния относителен път. Забележете този src. Коментарът тук ни позволява да знаем, че поради начина, по който е създаден нашия проект, можем да използваме @ вместо това.

    Интегриран терминал Удобна вградена функция на редактора на VS Code е интегрираният му терминал, който можете да използвате вместо да превключвате към отделния си терминал. Можете да го отворите с клавишната комбинация: `ctrl +` `

    Още фрагменти Ако се интересувате от инсталиране на някои допълнителни удобни фрагменти с код, можете да изтеглите пълен набор от Snippets Vue VSCode, създаден от члена на екипа на Core Vue Sarah Drasner.

    Нека търсим разширението с нейното име, sarah.drasner. Ето ги и тях. Сега можем да инсталираме и презаредим.

    Нека ги разгледаме в действие.

    Ако напишем vif на елемент в нашия шаблон, той ще ни даде v-if изявление, а ако напишете von, ще ни даде пълен манипулатор на събитията. Вместо ръчно да пишете свойство на данни, можем просто да напишем vdata, който ще създаде такъв за нас. Можем да направим същото, за да добавим реквизит с vprops. Можем дори да го използваме, за да създадем код за бързо импортиране на либария, с vimport-lib. Както можете да видите, това са много полезни и спестяващи време фрагменти.

    Моля, обърнете внимание, че ако използвате това разширение Snippets, се препоръчва да добавите ред към потребителските си настройки:

    vetur.completion.useScaffoldSnippets трябва да е невярно

    Това ще направи така, че тези фрагменти да не са в конфликт с тези на Vetur.

    Цветни теми Накрая, ако се чудите как да промените темата си в VS Code или се чудите коя от тях използвам тук, можете да отидете на код> Предпочитания> Цветна тема.

    Както виждате, използвам FlatUI Dark. Можете да промените цвета на темата си на която и да е от тези опции тук или да потърсите други теми в магазина за разширения.

    Ако не виждате такъв, който искате, можете също да се насочите към онлайн пазара на Visual Studio. Тук можете да визуализирате тонове различни плъгини и теми, като Night Owl от нашата приятелка Сара Драснер. Можете да го инсталирате директно от браузъра, след което да го намерите във вашите предпочитания за цветова тема.

    Продължете ученето

    За да продължите да се обучавате с мен, можете да вземете пълния курс за Real World Vue във VueMastery.com.