Кращий редактор коду для Vue.js

З ростом кількості якісних редакторів коду на вибір, вам може бути цікаво, що найкращий редактор коду для Vue.js. Деякі розробники так само віддані своїм редакторам, як і їх політичним переконанням, тому ви отримаєте різні відповіді залежно від того, кого ви запитуєте.

Але коли мова заходить про кодування у Vue, один з найкращих людей, просити запитання, - це Еван Ти, творець Vue. То що він використовує? Код візуальної студії.

В інтерв'ю його запитали про цю тему, і він відповів:

… Я перемикався вперед і назад, до недавнього часу я почав використовувати 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, якщо ми відкриємо файл .vue, такий як цей файл About.vue, ми побачимо весь цей сірий код. Це тому, що VS-код не автоматично виділить синтаксис у файлах .vue.

Vetur може виправити це для нас та надати інші функції, спрямовані на покращення досвіду розробника.

Тож давайте встановимо його зараз. Відкрийте магазин розширень.

Потім знайдіть "Vetur", виберіть його в результатах пошуку та натисніть "Встановити". Потім натисніть кнопку "Перезавантажити".

Особливості Ветура

Тепер, коли Vetur встановлений, давайте розглянемо його функції.

Виділення синтаксису Ввівши команду + P та ввівши ім’я .vue-файлу, ми можемо відкрити файл About.vue. Як бачите, тепер наш код отримує належне підкреслення синтаксису. Дивовижний - більше немає сірого коду.

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

Сніппети Ще одна особливість Vetur поставляється в комплекті з його фрагментами коду. Це економічні "фрагменти" коду, що дозволяють швидко створювати часто використовувані фрагменти коду.

Давайте створимо новий компонент, щоб побачити це в дії. Ми зватимемо EventCard.vue. Тепер, якщо ми введемо слово "ешафот" у файл .vue і натиснемо ENTER, це автоматично заповнить цей файл скелетом або ешафотом одного компонента .vue-файлу.

Emmet Vetur також поставляється в комплекті з Emmet. Це популярний інструмент, який дозволяє використовувати ярлики для створення вашого коду.

Наприклад, ми можемо набрати h1 і натиснути клавішу enter, і це створить елемент, що відкриває і закриває h1.

Коли ми наберемо щось складніше, наприклад, div> ul> li, воно створить:

        
                
  •         
    

Якщо Emmet, здається, не працює для вас, ви можете додати це до налаштувань користувача:

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

Щоб дізнатися більше про те, як Еммет може прискорити ваш розвиток, перейдіть сюди.

Встановлення ESLint & Prettier

Тепер нам потрібно переконатися, що у нас встановлені ESLint та Prettier. У магазині розширень ми здійснимо пошук ESLint, потім продовжимо та встановимо його. І ми зробимо те ж саме для Pretteer. Після його встановлення ми натиснемо перезавантажити, щоб перезавантажити VS-код.

Налаштування ESLint

Тепер, коли вони встановлені, нам потрібно додати трохи додаткової конфігурації до них.

Коли ми створили наш проект з терміналу, ми вирішили створити його з виділеними конфігураційними файлами, які дали нам цей файл .eslintrc.js, де ми можемо налаштувати ESLint для цього проекту. Якби ми не вибрали виділені файли, ми знайшли б конфігурації ESLint в нашому пакеті.json.

Отже, у наш .eslintrc.js файл ми додамо:

'плагін: красивіше / рекомендовано'

Це дозволить підтримувати гарнішу підтримку в ESLint із налаштуваннями за замовчуванням.

Отже наш файл зараз виглядає приблизно так:

module.exports = {
      корінь: вірно,
      env: {
        вузол: вірно
      },
      'продовжує': [
        'плагін: vue / basic',
        'плагін: красивіше / рекомендовано', // ми додали цей рядок
        '@ vue / красивіше'
      ],
      правила: {
        'no-console': process.env.NODE_ENV === 'виробництво'? 'помилка': 'вимкнено',
        'без налагодження': process.env.NODE_ENV === 'виробництво'? 'помилка': 'вимкнено'
      },
      parserОпції: {
        parser: 'babel-eslint'
      }
    }

Налаштування красивіше

У нас також є можливість створити файл конфігурації Prettier, додати деякі спеціальні налаштування відповідно до нашого особистого стилю або вподобань нашої команди.

Ми створимо його тут і назвемо .prettierrc.js.

А всередині ми введемо:

module.exports = {
        одиночна цитата: true,
        напів: помилково
    }

Це перетворить подвійні лапки в одиничні, і переконайтеся, що крапки з комою не вставляються автоматично.

Налаштування користувача

Для подальшої оптимізації коду VS для чудового досвіду розробки ми додамо деякі налаштування до наших Налаштувань користувача. Щоб отримати доступ до налаштувань користувача, натисніть Код у верхній навігаційній панелі, потім Налаштування, потім Налаштування. Це відкриє вікно налаштувань користувача, де ви можете додати налаштування в json.

Спочатку ми хочемо додати:

"vetur.validation.template": помилково

Це вимкне функцію підшивки Vetur. Натомість ми будемо покладатися на ESLint + Prettier.

Тепер ми хочемо сказати ESLint, якими мовами ми хочемо його перевірити (vue, html та javascript) та встановити autoFix на true на кожному:

"eslint.validate": [
        {
            "мова": "vue",
            "autoFix": вірно
        },
        {
            "мова": "html",
            "autoFix": вірно
        },
        {
            "мова": "javascript",
            "autoFix": вірно
        }
    ],

Тоді для гарної міри ми скажемо ESLint автоFixOnSave.

"eslint.autoFixOnSave": вірно,

І скажіть самому нашому редактору в форматіOnSave.

"editor.formatOnSave": true,

Тестуючи це

Щоб перевірити, що це працює, ми додамо сюди властивість даних до нашого компонента EventCard та додамо цитату: "Я хочу бути єдиним", тоді ми також введемо крапку з комою. Коли ми натискаємо зберегти, наші лапки перетворюються на одиничні лапки і крапка з комою видаляється. Дивовижно - це працює.

Додаткові інструменти

Тепер розглянемо кілька додаткових інструментів, які можуть допомогти прискорити ваш розвиток.

Копіювати відносний шлях Копіювальний відносний шлях - це розширення, яке дозволяє копіювати місцезнаходження, в якому живе файл, виходячи з його відношення до каталогу, до якого він посилається.

Давайте шукатимемо його, встановлюємо та переглядаємо його в дії.

У нашому файлі Home.vue ми бачимо, що тут вже є відносний шлях, куди ми імпортуємо компонент HelloWorld.

Щоб отримати відносний шлях до файлу, який ми хочемо імпортувати, ми клацніть правою кнопкою миші на файл, а потім виберіть Копіювати відносний шлях. Тепер, коли ми вставляємо те, що було скопійовано, ми бачимо, що ми маємо точний відносний шлях. Помітьте це src. Коментар тут дає нам знати, що через те, як налаштований наш проект, ми можемо використовувати @ натомість.

Інтегрований термінал Зручною вбудованою функцією редактора VS Code є вбудований термінал, який ви можете використовувати замість переключення на окремий термінал. Відкрити його можна за допомогою комбінації клавіш: `ctrl +` `

Більше фрагментів Якщо вам цікаво встановити додаткові зручні фрагменти коду, ви можете завантажити повний набір фрагментів Vue VSCode, створений членом команди Core Vue Team Sarah Drasner.

Давайте шукатимемо розширення з її іменем, sarah.drasner. Ось вони. Тепер ми можемо встановити та перезавантажити.

Давайте поглянемо на них у дії.

Якщо ми введемо vif на елемент нашого шаблону, він надасть нам v-if операцію, а введення von дасть нам повний обробник подій. Замість того, щоб вручну вводити властивість даних, ми можемо просто набрати vdata, який створить для нас. Ми можемо зробити те ж саме, щоб додати реквізит з vprops. Ми навіть можемо використовувати його для створення коду для швидкого імпортування бібліотеки з vimport-lib. Як бачите, це дуже корисні та економії часу фрагменти.

Зауважте, що якщо ви використовуєте це розширення Snippets, рекомендується додати рядок до налаштувань користувача:

vetur.completion.useScaffoldSnippets має бути помилковим

Це дозволить переконатися, що ці фрагменти не конфліктують з Vetur's.

Кольорові теми Нарешті, якщо вам цікаво, як змінити тему в коді VS або вам цікаво, яку я тут використовую, ви можете перейти до коду> налаштування> кольорова тема.

Як бачите, я використовую FlatUI Dark. Тут ви можете змінити колір теми на будь-який із цих параметрів або шукати інші теми в магазині розширень.

Якщо ви не бачите потрібного, ви також можете перейти до мережі Visual Studio Market в Інтернеті. Тут ви можете переглянути багато різних плагінів і тем, наприклад, Night Owl від нашої подруги Сари Драснер. Ви можете встановити його безпосередньо з браузера, а потім знайти його у своїх налаштуваннях кольорової теми.

Продовжувати навчання

Щоб продовжувати вчитися зі мною, ви можете пройти повний курс Real World Vue на VueMastery.com.