Beépülő modulok a Visual Studio kódjához. ✨ A Visual Studio Code bővítményei, amelyek a következő szintre emelik a fejlesztési folyamatot. Automatikus oldalfrissítés beállítása PHP-fájlokhoz a Live Server használatával

Virágoznak a webalapú szövegszerkesztők. Az Atom, a VS Code, a Brackets a rock szörnyeihez hasonlóan egyre népszerűbb a webfejlesztők körében (várjunk csak, melyik évszám szerepel a "popular monsters of rock" naptárában? 🙂 - Kb. a szerk.). Az IDE-ről és egyszerűen a natív szerkesztőkről egyaránt átváltanak rájuk. Az ok rendkívül egyszerű: a repository-k hemzsegnek a hasznos bővítményektől, a hiányzókat pedig mindenki saját maga készítheti el, pusztán webes technológiák segítségével.

A hivatalos tárolókban folyamatosan növekszik a kiterjesztések száma, és hogy ne vesszenek el bennük, összeállítottunk Önnek egy listát a legnépszerűbb webfejlesztést leegyszerűsítő bővítményekről.

A szerző ízlése szerint

Engedelmes szolgád az összes felsorolt ​​szerkesztőt használta, és végül a VS Code mellett döntött. Ennek több oka is van, de a legfontosabb a teljesítmény. A Microsoft remek munkát végzett, és a késői megjelenés ellenére (a VS Code utoljára jelent meg a színen), hatalmas közösséget sikerült maguk köré gyűjteniük. Ez pozitív hatással volt a beépülő modulokra: véleményem szerint némelyikük felülmúlja az Atom alternatíváit. Ezzel kapcsolatban a kifejezetten a VS Code-hoz tartozó kiterjesztések nevei villogni fognak az ismertető szövegében. Az alábbiakban található egy hivatkozás az Atom hozzávetőleges verziójához a funkcionalitás szempontjából. Ne lepődj meg, ha kimásolod a beépülő modul nevét, és keresel az Atom tárolóban, és nem találsz semmit. Használja a leírásban található linkeket.

A népszerűség okai

A web-alapú szerkesztők nagyjából ugyanezekkel a problémákkal küzdenek. Az egyik legfontosabb a teljesítmény. A fejlesztők dolgoznak a szerkesztők sebességén, de legyünk őszinték – ezt a problémát nem valószínű, hogy 100%-osan megoldják. A natív megoldások még mindig felülmúlják a sebességet, és ezt figyelembe kell venni a szerkesztő kiválasztásakor.

Nos, a natív megoldások teljesítménye páratlan. Vajon minek köszönhető, hogy az újonnan kifejlesztett "könnyű" szerkesztők annyi fejlesztői szívet nyertek? A fő „mellett” érv a technológiai halom. Mit jelent néhány Sublime vagy Notepad bővítmény fejlesztése ? Így van, meg kell küzdenie C-vel, Python (itt bármilyen más programozási nyelv használható), a szerkesztő SDK-ja és egyéb, a fő munkához nem szükséges dolgok.

Melyik webfejlesztő vállalná ezt a bravúrt? Elege van a gondjaiból és a technológiáiból (a megoldások igazi forradalma zajlik a frontendben). Így kiderült, hogy a natív szerkesztők webfejlesztőinek plugin-ökoszisztémája mindig is szenvedett a speciális megoldások hiányától.

Az ötlet, hogy webes technológiákon alapuló szerkesztőket hozzanak létre ugyanezen technológiák mesterei számára, hatékonyan megoldotta a harmadik féltől származó modulok rossz ökoszisztémájának problémáját. A külső webfejlesztők gyorsan felkapták a hullámot, és hozzáláttak a szükséges modulok elkészítéséhez. Az eredmények könnyen követhetők – a hivatalos adattárak tele vannak bővítményekkel a legkülönfélébb feladatokhoz. Az új bővítmények létrehozása egyszerűbbé vált: már nem kell idegen programozási nyelvet tanulni, elég a JavaScript.

Sajnos a szerkesztő funkcióinak véglegesítésének megkönnyítése érdekében teljesítménnyel és erőforrásokkal kell fizetni. A könnyű szerkesztők gyakran több rendszererőforrást igényelnek, és nem állnak készen a versenyre a natív szerkesztőkkel a sebességben. A tesztelés során az Atomnak egy úri bővítménykészlettel sikerült megelőznie a WebStormot a memóriafogyasztás tekintetében.

Részletek

A beépülő modulok a szerkesztők számára külön bővítményosztályt alkotnak. Nagyon népszerűek, és szinte minden modern keretrendszerre vagy könyvtárra van egyedi ajánlat a tárhelyeken. A kivonatok időt takarítanak meg. Le kell írnia egy osztálycsonkot? Nem probléma, beírunk pár karaktert és pár sornyi kész kódot kapunk. Nincs értelme részletesen elemezni a plugin-részleteket – túl sok van belőlük. Íme néhány link a népszerű technológiák kivonat-bővítményeihez. A hiányzókat megtalálod.

VS kód:

atom:

Burkoló HTML-hez

Az oldaljelölések leírásánál folyamatosan blokkokat kell becsomagolni, vagyis be kell ágyazni az egyik blokkot a másikba. Megírtam a blokkjelölést, majd rájöttem, hogy a stílus kényelme érdekében jobb, ha egy további blokkba csomagolja. Könnyű megtenni: a legelejére írjuk a nyitó címkét, görgessük a blokkot a végére, és helyezzük el a záró címkét. Csak egy probléma van - kényelmetlen ezt megtenni nagy tömbökön. Minden esély megvan arra, hogy rossz helyre tegye a „közelebbet”, és megtörje a jelölést. Hasonló probléma jelentkezik az egyes szövegrészek formázásakor is. Próbáljon meg gyorsan beilleszteni több kezdő és záró címkét, és ne őrüljön meg. A beépülő modulok segítenek a problémák kezelésében. htmltagWrapés Atom csomagolás a címkében. Segítségükkel a megoldás egy kódrészlet / sor kiemelésében és a gyorsbillentyűk kombinációjának megnyomásában merül ki.

• VS kód: htmltagwrap
• atom: Atom csomagolás a címkében

A gyorsbillentyűk megszokása

Amikor új szerkesztőre/IDE-re vált, mindig ugyanabba a problémába ütközik – új gyorsbillentyűket kell megtanulnia. Csak megszoktam egy kombinációt, mint a bam - és minden más. A megszokottnál több időt kezdesz eltölteni a megszokott cselekvésekkel, és újra elgondolkozol azon, hogy érdemes-e egyáltalán valami újra váltani. Biztos vagyok benne, hogy azok a fejlesztők, akik 10-15 évvel ezelőtt kezdték pályafutásukat, többször találkoztak ezzel, így minden bizonnyal értékelni fogják a népszerű szerkesztők számára a kulcskötésekkel rendelkező bővítmények erejét. A lényeg egyszerű: szokja meg a Visual Studio gyorsbillentyűinek elrendezését - töltse le a megfelelő bővítményt, és az új szerkesztő reagálni kezd az ismerős parancsokra.

VS kód:

atom:

Fájlok automatikus kiegészítése

Alapértelmezés szerint egyik szerkesztő sem biztosítja a fájlnevek automatikus kiegészítését, amikor csatlakoztatva vannak. Ez gyakran a hibák oka. Emlékeznie kell a fájl helyének teljes elérési útjára. Ha a projekt összetettebb, mint a Hello world, akkor a fájlok több könyvtárba vannak csoportosítva, és az elérési út megadásához egy fájlkezelő szolgáltatásait kell igénybe venni. Nem túl kényelmes. Könnyebb engedélyezni az automatikus kiegészítést az AutoFileName és az automatikus kiegészítés+ beépülő modulokkal. Ezután már csak a fájl / könyvtár nevének első betűit kell begépelni, majd a bővítmény helyettesítési lehetőségeket kínál.

• VS kód: AutoFileName
• atom: automatikus kiegészítés + útvonaljavaslatok

Linters

A modern fejlesztési folyamat elképzelhetetlen automatizálás nélkül. Ha valami automatizálható és eszközökre cserélhető, érdemes megtenni. Sehol nincs mindenféle linter a frontendben, így amikor a következő projekten dolgozik, azonnal gondoskodnia kell az olyan megoldásokról, mint az ESLint, HTMLHint, CSSLint,<твой_линтер>. A Linterek szabályozzák a kódírás stílusát, és a konfigurációtól való eltérés esetén azonnal rámutatnak a hibákra.

A linterek különösen hasznosak a csapatfejlesztésben, amikor jelentősen megnő a "tarka" kód megszerzésének esélye. Példák kellenek? Kérem! A JS-fejlesztők között folyamatos vita folyik az idézetek kiválasztásáról. Egyesek a szingli hívei, mások kettősek, mások pedig az inverzek gondolatát támogatják. A Linters segít elérni az egységességet, és időben értesíti a tévútra tévedt fejlesztőt.

Továbbra is csak a tagok számára elérhető

1. lehetőség: Csatlakozzon a "webhely" közösséghez, hogy elolvassa az oldalon található összes anyagot

A meghatározott időszakban a közösségben való tagság hozzáférést biztosít az ÖSSZES Hacker anyaghoz, növeli a személyes kumulatív kedvezményét, és lehetővé teszi a professzionális Xakep Score értékelés felhalmozódását!

Vessünk egy pillantást a legjobb Visual Studio Code szerkesztő beépülő modulokra a webfejlesztéshez 2020-ban.

1. élő szerver
2. Címke automatikus bezárása
3. behozatali költség
4. Anyag téma
5. Apache Conf
6. Orosz nyelvi csomag
7. kis bónusz

1. Élő szerver

A Live Server engedélyezése .html vagy .htm fájlokhoz:

A Live Server engedélyezése, ha nincsenek .html vagy .htm fájlok:

Automatikus oldalfrissítés beállítása PHP-fájlokhoz a Live Server használatával

2. Sass

A Sass szintaxis támogatása: behúzás, automatikus kiegészítés stb

A SASS / SCSS fájlokat valós időben fordítja CSS-re

Nyomja meg a bekapcsoláshoz Nézd Sasst az állapotsorban

Mit tartalmaz a Live Sass Complier:

1. válassza ki a lefordított fájl exportálási mappáját
2. választás css stílusban(kiterjesztett, kompakt, tömörített, beágyazott)
3. a kiterjesztés nevének kiválasztása (.css vagy .min.css)
4. kiterjesztés kompatibilis élő szerver
5. a szállítói előtagok automatikus beszúrásának beállítása
6. Stb

Címkék kiemelése – nyitás és zárás

A címkekiemelés testreszabható. Az én beállításom:

"highlight-matching-tag.leftStyle": ( "borderWidth" : "2px 2px 2px 2px" , "borderStyle" : "solid" , "borderColor" : "yellow" , "borderRadius": "5px") , "highlight-matching-tag.rightStyle": ( "borderWidth" : "2px 2px 2px 2px" , "borderStyle" : "solid" , "borderColor" : "yellow" , "borderRadius": "5px") ,

Webszínek kiemelése a szerkesztőben a megfelelő színnel

A hosszabbító a szimmetrikus konzolokat ugyanolyan színűre színezi, de különbözik a többi konzoltól.

Egyik cseréjekor páros címke, a második automatikusan megváltozik.

Alapértelmezés szerint a bővítmény minden nyelven működik, módosítható ezt a beállítást használja a következő kódot:

"auto-rename-tag.activationOnLanguage": [ "html" , "xml" , "php" , "javascript" ],

8. Címke automatikus bezárása

Címke automatikus bezárása

Alapértelmezés szerint minden nyelven működik: HTML, PHP, JavaScript, markdown, liquid stb. A beállításokat a setting.json fájlban módosíthatja

"auto-close-tag.activationOnLanguage": [ "php" , "javascript" , "javascriptreact" , "typescript" , "typescriptreact" , "plaintext" , "markdown" , "vue" , ​​"liquid" , ]

9. Import költség

Ez a bővítmény soron belül jeleníti meg az importált csomag méretét a szerkesztőben.

10. Anyag téma

A VS Code egyik legnépszerűbb témája. Telepíthet olyan betűtípust is, amely támogatja a ligatúrákat (karakterek sorozatának egyetlen elemmé történő konvertálása)

Ezután a settings.json beállításai ilyenek lesznek

"editor.fontLigatures" : true , "editor.fontFamily" : "Fira Code" , "editor.fontWeight" : "100" ,

11. Apache Conf

Apache szintaxis támogatás. Kényelmes a kiterjesztésű fájlok szerkesztéséhez .htaccess. A következő fájltípusokat is támogatja: .conf, .htgroups, .htpasswd

Visual Studio Code – ingyenes, több platformon szöveg szerkesztő a Microsofttól, amely könnyedsége, erőteljes és bővíthető funkcionalitása és természetesen "ingyenes" miatt vált népszerűvé, ellentétben a PHPStorm, Sublime stb.

Mint a legtöbb modern IDE, VSCode számos kiegészítéssel rendelkezik, amelyek kibővítik eredeti képességeit. Kiválasztottunk 15 bővítményt, amelyek hasznosak lesznek minden programozó számára, aki ebben a szerkesztőben dolgozik.

Megnyitás böngészőben

Alapértelmezés szerint be Visual Studio kód nincs mód a fájl megnyitására a böngészőben. Ez a bővítmény nemcsak a "Megnyitás böngészőben" funkciót adja hozzá, hanem lehetővé teszi a fájlok megnyitását a számítógépére telepített bármely böngészőben.

Quokka

Quokka- egy segédprogram, amely lehetőséget ad egy adott kódrészlet végrehajtásának eredményének előnézetére, megadva a függvények végrehajtásának eredményeit és a változók számított értékeit. A bővítmény könnyen beállítható, és a dobozból kivéve működik jsx vagy gépelt projektek.

Hamisító

Lehetővé teszi véletlenszerű adatok gyors beszúrását (tetszőleges nevek, címek, képek, telefonszámok stb.) a kódba. Minden kategóriának megvannak a maga alrészei, amelyek lehetővé teszik a programozó igényeihez való pontosabb igazodást.

CSS Peek

Ezzel a bővítménnyel nyomon követheti az osztály- és azonosítódefiníciókat egy CSS-fájlban. Ehhez kattintson a jobb gombbal a HTML-fájlban lévő választóra, és válassza ki Lépjen a Definíció elemre(Ugrás a definícióhoz) vagy Peek definíció(Lásd a definíciót).

HTML Boilerplate

HTML Boilerplate leegyszerűsíti a HTML-lel való munkát, így nincs szükség saját címkék írására fejés test. Üresen tárcsázza html fájl, nyomja meg a Tab billentyűt és Visual Studio kód dokumentumsablont generál!

Csinosabb

Csinosabb egy webfejlesztők körében népszerű kódszerkesztő, amely lehetővé teszi a különböző emberek által írt kódok egyetlen megjelenését. A beállításokban Csinosabb beállíthatja az autorun-t, amely lehetővé teszi a JS-ben és CSS-ben írt kód azonnali formázását.

szín információ

Egy kis bővítmény, amely gyors segítséget ad a CSS-ben használt színekről. Ha egy szín neve fölé viszi az egérmutatót, láthatja, hogyan néz ki, és hogyan írhatja be másokba. színes formátumok (hatszögletű, rgb, hslés cmyk).

SVG Viewer

Ez a kiterjesztés lehetővé teszi az SVG fájlokkal való munkát: szerkesztheti SVG fájlok, konvertálja őket erre PNG formátumés hozzon létre sémaadatok URL-címét.

TODO Kiemelés

Ez a kiegészítő lehetővé teszi, hogy címkéket helyezzen el a kód befejezetlen helyeire, ami leegyszerűsíti a projektet. Alapértelmezés szerint csak a címkék vannak beállítva. CSINÁLNI(befejezés) és JAVÍTS MEG(javítás), de saját címketípusokat is létrehozhat.

Betűtípusok ikonokkal

Kiterjesztés, amely hozzáad Visual Studio kód körülbelül 20 népszerű ikon-betűtípus támogatása, beleértve Font Awesome , Ionicons, Glyphicons, anyagtervezés...

Minimalizálás

A kód optimalizálására és tömörítésére szolgáló segédprogram. Minimalizálás dolgozik vele HTML, JSés css fájlokat, és remekül működik olyan bővítményekkel, mint a uglify-js, tiszta cssés html minifier.

Change Case

VS kód lehetővé teszi, hogy a kijelölést csak a kis- és nagybetűkre helyezze át. Használva Change Case, akkor nagyszámú regiszterhez fog hozzáférni (szerpentin, teve stb.).

Regex Previewer

Kiegészítő, amely lehetővé teszi a reguláris kifejezésekkel való munkát. Regex Previewer alkalmazza a mintát reguláris kifejezés bármely megnyitott szövegfájlba, kiemelve az összes egyezést. Akárcsak

Visual Studio kódáltal kifejlesztett ingyenes, többplatformos szövegszerkesztő Microsoft. Kiváló teljesítményének és rengeteg szolgáltatásának köszönhetően gyorsan mindenki kedvencévé válik.

Csakúgy, mint a legtöbb IDE, a VSCode is rendelkezik saját bővítménytárral, amely több ezer különböző minőségű bővítményt tartalmaz. Annak érdekében, hogy segítsünk kiválasztani azokat a bővítményeket, amelyeket érdemes letölteni, összeállítottuk ezt a bővítménygyűjteményt, amelyet a leghasznosabbnak és legérdekesebbnek találtunk.

A VSCode nem kínál beépített felületet a fájlok közvetlen böngészőben való megnyitásához. Ez a bővítmény egy „Megnyitás böngészőben” helyi menüelemet ad hozzá helyi menü, valamint a kiválasztott kliensben (Firefox, Chrome, IE) megnyitandó parancsok.

A Quokka egy hibakereső eszköz, amely közvetlen lehetőséget ad Visszacsatolás az általad írt kóddal. Ő mutatja előnézet függvény eredményeit és a változók számított értékeit. A kiterjesztés nagymértékben testreszabható, és a JSX vagy TypeScript projektekkel már a dobozból is működik.

Helyőrző adatok gyors beszúrása a népszerű Faker JavaScript könyvtárral. Létrehozhat véletlenszerű neveket, címeket, képeket, telefonszámokat vagy csak a klasszikus Lorem Ipsum bekezdéseit. Minden kategóriának különböző alkategóriái vannak, így az adatokat az Ön igényei szerint szabhatja.

Ezzel a kiterjesztéssel nyomon követheti a CSS osztályok és azonosítók definícióit a stíluslapokon. Ha jobb gombbal kattint a HTML-fájlok egy választójára, válassza ki a "Go To Definition" opciókat, és a "Peek" definíció elküldi Önnek azt a CSS-kódot, amelyben létrehozta őket.

A HTML-sablonbővítmény megkíméli Önt attól, hogy kézzel kelljen megírnia egy új HTML-dokumentum fej- és törzscímkéit. Csak tedd be a html-t üres fájl, nyomja meg a Tab billentyűt, és egy tiszta dokumentumstruktúra jön létre.

Csinosabb a legnépszerűbb kódformázó a webfejlesztők körében. Ezáltal a csapatkód ugyanúgy néz ki, függetlenül attól, hogy ki írta. Ez a bővítmény lehetővé teszi az automatikus alkalmazást Csinosabbés gyorsan formázza az összes dokumentumot JSés css. Ha te is szeretnél használni ESLint, van Csinosabb-Eslint.

Egy kis bővítmény, amely megadja Önnek különféle információk a css-ben használt színekről. Vigye az egeret egy szín fölé, egy nagy ablakot fog látni az adott színnel, valamint a kódolását minden formátumban (hex, rgb, hsl és cmyk).

Ez az eszköz az összes megjegyzést megjelöli CSINÁLNI kódjában, így könnyen nyomon követheti a befejezetlen darabokat, mielőtt továbblépne a gyártásba. Alapértelmezés szerint azt keresi kulcsszavakat CSINÁLNIés JAVÍTS MEG, de hozzáadhat saját kifejezéseket is.

Apró töredékek ikon-betűtípusok projektbe való felvételéhez (a CDN-ből), majd maguknak az ikonoknak a hozzáadásához. A kiterjesztés több mint 20 népszerű ikonkészletet támogat, beleértve a betűtípusokat is Fantasztikus, Ionicons, Glyphiconsés Anyagtervezési ikonok.

Kódminimalizálás kiterjesztése. Rengeteg testreszabási lehetőséget kínál, és automatikusan minimalizálja a .min fájlba való mentés és exportálás lehetőségét. A Minify JavaScripttel, CSS-sel és HTML-lel működik az uglify-js, clean-css és html-minifier segítségével.

VSCode korlátozott a szöveg konvertálási képessége. A dobozból csak kis- és nagybetűs konvertálásra képes. Ez a beépülő modul számos további karakterlánc-módosítási parancsot ad hozzá, beleértve a camelCase, kebab-case, snake_case, CONST_CASE és még sok más parancsot.

Hasznos eszköz a reguláris kifejezések tesztelésére. Úgy működik, hogy bármelyikre reguláris kifejezésmintát alkalmaz szöveges fájl, nyissa meg a szerkesztőben, kiemelve az összes egyezést. Mintha RegExr, hanem közvetlenül a szerkesztőben!