Najlepszy edytor kodu dla Vue.js

Przy rosnącej liczbie edytorów kodu jakości do wyboru możesz zastanawiać się, jaki jest najlepszy edytor kodu dla Vue.js. Niektórzy programiści są tak samo oddani swoim redaktorom, jak i ich przekonaniom politycznym, więc otrzymasz różne odpowiedzi w zależności od tego, kogo zapytasz.

Ale jeśli chodzi o kodowanie w Vue, jednym z najlepszych ludzi jest Evan You, twórca Vue. Czego on używa? Kod Visual Studio.

W wywiadzie zapytano go o ten temat i odpowiedział:

… Przełączałem się tam iz powrotem, aż do niedawna zacząłem używać TypeScript, a ponieważ VS Code TypeScript jest tak dobry, przełączyłem się (na stałe) na VS Code.

Chociaż Vue nie wymaga używania TypeScript, wkrótce zostanie w nim napisany kod źródłowy, jak opisano w tym poście na temat Vue 3.0.

Być może myślisz… Ale nie pracuję nad kodem źródłowym i nie koduję Vue za pomocą TypeScript, czy VS Code jest nadal dla mnie odpowiedni?

To prowadzi mnie do tematu Vetur, który jest bogatym w funkcje rozszerzeniem, które oferuje takie rzeczy, jak podświetlanie składni w plikach .vue, fragmenty, szarpanie, sprawdzanie błędów i formatowanie, a także automatyczne uzupełnianie i debugowanie. W tym momencie jest to najlepsze rozszerzenie Vue dla edytora kodu. Tak powinno być, ponieważ został opracowany przez Pine Wu, który jest członkiem podstawowego zespołu Vue.

Jeśli więc chcesz korzystać z VS Code do programowania Vue (lub już je masz), możesz postępować zgodnie z poniższymi instrukcjami, ponieważ pokażę Ci, jak zoptymalizować VS Code.

Czego się nauczymy?

Będziemy uczyć się, jak:

  • Uzyskaj wyróżnianie składni w naszych plikach .vue
  • Użyj fragmentów kodu, aby przyspieszyć przepływ pracy
  • Skonfiguruj nasz edytor, aby automatycznie formatował nasz kod
  • I zapoznaj się z innymi przydatnymi rozszerzeniami, które poprawią nasze wrażenia programistyczne

Instalowanie Vetur

Istnieje kilka funkcji, które czynią VS Code doskonałym środowiskiem dla rozwoju Vue, w tym Vetur, wtyczka zaprojektowana przez Pine Wu, głównego członka zespołu Vue.js.

W VS Code, jeśli otworzymy plik .vue, taki jak ten plik About.vue, zobaczymy cały szary kod. To dlatego, że VS Code nie podświetla automatycznie składni w plikach .vue.

Vetur może to dla nas naprawić i udostępnić nam inne funkcje zaprojektowane w celu poprawy jakości pracy programisty.

Więc zainstalujmy teraz. Otwórz sklep z rozszerzeniami.

Następnie wyszukaj „Vetur”, zaznacz go w wynikach wyszukiwania i kliknij Zainstaluj. Następnie kliknij przycisk Załaduj ponownie.

Funkcje Vetur

Teraz, gdy Vetur jest zainstalowany, spójrzmy na jego funkcje.

Podświetlanie składni Wpisując polecenie + P i wpisując nazwę pliku .vue, możemy otworzyć plik About.vue. Jak widać, teraz nasz kod otrzymuje właściwe podświetlanie składni. Niesamowite - nigdy więcej szarego kodu.

Sprawdzając plik Home.vue, możemy zobaczyć, że nasz JavaScript jest również poprawnie podświetlany.

Fragmenty Kolejna funkcja, którą Vetur jest dostarczany wraz z fragmentami kodu. Są to „fragmenty” oszczędzające czas kodu, które pozwalają szybko tworzyć często używane fragmenty kodu.

Utwórzmy nowy komponent, aby zobaczyć to w akcji. Nazywamy się EventCard.vue. Teraz, jeśli wpisamy słowo „rusztowanie” w pliku .vue i naciśniemy ENTER, spowoduje to automatyczne wypełnienie tego pliku szkieletem lub rusztowaniem pojedynczego pliku .vue.

Emmet Vetur jest również dostarczany z Emmetem. Jest to popularne narzędzie, które pozwala używać skrótów do budowania kodu.

Na przykład możemy wpisać h1 i nacisnąć Enter, a to utworzy otwierający i zamykający element h1.

Kiedy wpisujemy coś bardziej złożonego, na przykład div> ul> li, spowoduje to:

        
                
  •         
    

Jeśli wydaje się, że Emmet nie działa dla Ciebie, możesz dodać to do Ustawień użytkownika:

„emmet.includeLanguages”: {
          „vue”: „html”
      },

Aby dowiedzieć się więcej o tym, jak Emmet może przyspieszyć rozwój, przejdź tutaj.

Instalowanie ESLint i Prettier

Teraz musimy upewnić się, że mamy zainstalowany ESLint i Prettier. W sklepie z rozszerzeniami przeszukamy ESLint, a następnie go zainstalujemy. Zrobimy to samo dla Prettier. Po zainstalowaniu klikniemy przycisk Załaduj ponownie, aby ponownie załadować kod VS.

Konfigurowanie ESLint

Teraz, gdy są one zainstalowane, musimy dodać im trochę dodatkowej konfiguracji.

Kiedy tworzyliśmy nasz projekt z terminala, postanowiliśmy go utworzyć z dedykowanymi plikami konfiguracyjnymi, które dały nam ten plik .eslintrc.js, w którym możemy skonfigurować ESLint dla tego projektu. Gdybyśmy nie wybrali plików dedykowanych, znaleźlibyśmy konfiguracje ESLint w naszym pliku package.json.

W naszym pliku .eslintrc.js dodamy:

„plugin: ładniejszy / polecany”

Umożliwi to obsługę ładniejszej wersji w ESLint przy domyślnych ustawieniach.

Nasz plik wygląda teraz tak:

module.exports = {
      root: true,
      env: {
        węzeł: prawda
      },
      „rozszerza”: [
        „plugin: vue / essential”,
        „plugin: ładniejszy / polecany”, // dodaliśmy tę linię
        „@ vue / prettier”
      ],
      zasady: {
        „no-console”: process.env.NODE_ENV === „produkcja”? „error”: „off”,
        „no-debugger”: process.env.NODE_ENV === „produkcja”? „error”: „off”
      },
      parserOptions: {
        parser: „babel-eslint”
      }
    }

Konfigurowanie ładniejszego

Mamy również opcję utworzenia pliku konfiguracji ładniejszego, aby dodać specjalne ustawienia zgodnie z naszym osobistym stylem lub preferencjami naszego zespołu.

Stworzymy go tutaj i nazwiemy .prettierrc.js.

A w środku napiszemy:

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

Spowoduje to konwersję podwójnych cudzysłowów na pojedyncze cudzysłowy i upewni się, że średniki nie są wstawiane automatycznie.

Ustawienia użytkownika

Aby jeszcze bardziej zoptymalizować VS Code, aby zapewnić wygodę programowania, dodamy kilka konfiguracji do naszych Ustawień użytkownika. Aby uzyskać dostęp do Ustawień użytkownika, kliknij Kod na górnym pasku nawigacyjnym, następnie Preferencje, a następnie Ustawienia. Spowoduje to wyświetlenie okna Ustawienia użytkownika, w którym możesz dodać ustawienia w json.

Najpierw chcemy dodać:

„vetur.validation.template”: false

Spowoduje to wyłączenie funkcji kłaczkowania Vetur. Zamiast tego będziemy polegać na ESLint + Prettier.

Teraz chcemy powiedzieć ESLint, w których językach chcemy sprawdzać poprawność (vue, html i javascript) i ustawić autoFix na wartość true dla każdego:

„eslint.validate”: [
        {
            „language”: „vue”,
            „autoFix”: prawda
        },
        {
            „language”: „html”,
            „autoFix”: prawda
        },
        {
            „language”: „javascript”,
            „autoFix”: prawda
        }
    ],

Następnie, dla pewności, powiemy ESLint, aby autoFixOnSave.

„eslint.autoFixOnSave”: prawda,

I powiedz naszemu redaktorowi, aby sformatowałOnSave.

„editor.formatOnSave”: true,

Testuję to

Aby przetestować, czy to działa, dodamy tutaj właściwość danych do naszego komponentu EventCard i dodamy cytat: „Chcę być singlem”, a także tutaj wstawimy średnik. Po naciśnięciu przycisku zapisz nasze cytaty są konwertowane na pojedyncze cudzysłowy, a średnik jest usuwany. Wspaniale - działa.

Dodatkowe narzędzia

Przyjrzyjmy się teraz dodatkowym narzędziom, które mogą przyspieszyć Twój rozwój.

Kopiuj ścieżkę względną Kopiuj ścieżkę względną to rozszerzenie, które pozwala skopiować lokalizację pliku, na podstawie jego stosunku do katalogu, do którego prowadzi łącze.

Wyszukajmy go, zainstalujmy, a następnie zobaczmy w akcji.

W naszym pliku Home.vue widzimy już ścieżkę względną, w której importujemy komponent HelloWorld.

Aby uzyskać ścieżkę względną pliku, który chcemy zaimportować, kliknij plik prawym przyciskiem myszy, a następnie wybierz opcję Kopiuj ścieżkę względną. Teraz, kiedy wklejamy to, co zostało skopiowane, widzimy, że mamy dokładną ścieżkę względną. Zwróć uwagę na to src. Komentarz tutaj informuje nas, że ze względu na konfigurację naszego projektu możemy zamiast tego użyć @.

Zintegrowany terminal Wygodną wbudowaną funkcją edytora VS Code jest zintegrowany terminal, którego można używać zamiast przełączania na osobny terminal. Możesz go otworzyć za pomocą skrótu klawiaturowego: `ctrl +` `

Więcej fragmentów Jeśli chcesz zainstalować dodatkowe wygodne fragmenty kodu, możesz pobrać pełny pakiet fragmentów kodu Vue VSC, stworzonych przez Sarah Drasner, członka zespołu Core Vue.

Szukajmy rozszerzenia z jej nazwiskiem, sarah.drasner. Tam są. Teraz możemy zainstalować i załadować ponownie.

Rzućmy okiem na nich w akcji.

Jeśli wpisujemy vif na elemencie w naszym szablonie, otrzymamy instrukcję v-if, a wpisanie von da nam pełną obsługę zdarzeń. Zamiast ręcznie wpisywać właściwość danych, możemy po prostu wpisać vdata, która ją dla nas utworzy. Możemy zrobić to samo, aby dodać rekwizyty z vprops. Możemy nawet użyć go do stworzenia kodu do szybkiego importowania biblioteki z vimport-lib. Jak widać, są to bardzo pomocne i oszczędzające czas fragmenty.

Pamiętaj, że jeśli używasz tego rozszerzenia Snippets, zalecamy dodanie wiersza do Ustawień użytkownika:

vetur.completion.useScaffoldSnippets powinien mieć wartość false

Dzięki temu te fragmenty nie będą kolidować z kodami Vetur.

Motywy kolorowe Wreszcie, jeśli zastanawiasz się, jak zmienić motyw w VS Code lub zastanawiasz się, którego tu używam, możesz przejść do Code> Preferencje> Motyw kolorów.

Jak widać, używam FlatUI Dark. Możesz zmienić kolor motywu na dowolną z tych opcji tutaj lub wyszukać inne motywy w sklepie z rozszerzeniami.

Jeśli nie widzisz takiego, którego chcesz, możesz także przejść do Visual Studio Marketplace online. Tutaj możesz wyświetlić podgląd wielu różnych wtyczek i motywów, takich jak Night Owl autorstwa naszej przyjaciółki Sarah Drasner. Możesz zainstalować go bezpośrednio z przeglądarki, a następnie znaleźć w preferencjach motywu kolorów.

Kontynuuj naukę

Aby kontynuować naukę ze mną, możesz wziąć pełny kurs Real World Vue na stronie VueMastery.com.