11 SATRIECOŠI JAVASCRIPT PAPLAŠINĀJUMI VISUAL STUDIO KODAM

Viena no iespaidīgākajām Visual Studio Code daļām ir pielāgojamība, it īpaši, izmantojot paplašinājumus. Es neaptveršu specifiskus paplašinājumus, taču šeit ir daži no labākajiem paplašinājumiem VS kodā JavaScript rakstīšanai.

Satura rādītājs

JavaScript (ES6 koda fragmenti)
Kūka
Skaistāk
Atkļūdotājs pārlūkam Chrome
ESLint
Importa izmaksas
Ceļš Intellisense
Skatīt mezglu paketi
Labāki komentāri
NPM Intellisense
Wallaby.js
Secinājums

JavaScript (ES6 koda fragmenti)

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

Fragmentu paplašinājumi ir viena no populārākajām paplašinājumu kategorijām, un šis ir tam līdzīgs. Tas iekļauj fragmenti mūsdienīgam ES6 JavaScript , ko jums vajadzētu rakstīt (vai mācīties, ja vēl neesat to izdarījis). Lai gan šis fragments nav raksturīgs nevienam ietvaram, šos fragmentus var aktivizēt, izmantojot dažādus failu tipus.

JavaScript (ES6 koda fragmenti)
Kūka
Skaistāk
Atkļūdotājs pārlūkam Chrome
ESLint
Importa izmaksas
Ceļš Intellisense
Skatīt mezglu paketi
Labāki komentāri
NPM Intellisense
Wallaby.js
Secinājums

Šeit ir daži mani favorīti, kurus jums vajadzētu izmēģināt!

JavaScript (ES6 koda fragmenti)
Kūka
Skaistāk
Atkļūdotājs pārlūkam Chrome
ESLint
Importa izmaksas
Ceļš Intellisense
Skatīt mezglu paketi
Labāki komentāri
NPM Intellisense
Wallaby.js
Secinājums

Ir daudz citu, tāpēc dodieties izmēģināt!

Kūka

https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

Vai esat kādreiz vēlējies izmēģināt kādu funkciju vai spēlēties ar kādu JavaScript kodu? Dažreiz varat pārbaudīt tieši Chrome izstrādātāju rīku konsolē, dažreiz atverot CodePen. Izmantojot Quokka.js, jūs varat izveidot skrāpēšanas paliktni tieši VS Code iekšpusē!

Pārbaudiet savu JavaScript ātri un viegli, izmantojot Quokka.js.

Skaistāk

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Atbilstošs koda formatētājs, kas var automātiski formatēt jūsu JavaScript kodu. Uzstādot Prettier, jums nekad nav jāuztraucas par formatējumu; vienkārši ļaujiet datoram par to parūpēties!

Var būt nedaudz grūti pierast pie tā, ka jūsu formatējums tiek apstrādāts jūsu vietā, jo esmu pārliecināts, ka daudziem izstrādātājiem ir savs stils, kas viņiem patīk. Ja komandā Prettier tiek nodrošināts, ka visi ievēro vienādu kodēšanas stilu.

Atkļūdotājs pārlūkam Chrome

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Lai gan console.log () ir sava vieta, tas nav labākais veids, kā atkļūdot. Pārlūkā Chrome ir iebūvēti atkļūdošanas rīki, taču vai zinājāt, ka varat arī to darīt atkļūdojiet tieši VS kodā izmantojot šo paplašinājumu?

Es personīgi labprātāk atkļūdoju, izmantojot šo paplašinājumu. Tas nozīmē, ka es varu palikt redaktorā, pie kura esmu pieradis, veikt izmaiņas lidojuma laikā utt. Jūs varat darīt lielāko daļu to, ko gaidījāt, veicot atkļūdošanu.

JavaScript (ES6 koda fragmenti)
Kūka
Skaistāk
Atkļūdotājs pārlūkam Chrome
ESLint
Importa izmaksas
Ceļš Intellisense
Skatīt mezglu paketi
Labāki komentāri
NPM Intellisense
Wallaby.js
Secinājums

ESLint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Izmantojot tik daudz pārsteidzošu rīku, jums nevajadzētu stresot par koda formatēšanu. ESLint ir viens no daudziem, kas to var auto - formatējiet savu kodu (ietaupiet, ja izvēlaties). Turklāt savilkšanas aspekts var kliegt uz jums (labāka vārda trūkuma dēļ), lai mudinātu vai prasītu ievērot noteiktas vadlīnijas.

ESLint vai TSLint (TypeScript) bieži tiek konfigurēti ar daudziem sākuma projektiem, tāpēc jums, iespējams, pat nav jākonfigurē. Vienkārši izveidojot jaunu projektu un atverot to VS kodā, jums būs visa nepieciešamā palīdzība, lai rakstītu konsekventu kodu!

Importa izmaksas

https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

Ja esat noraizējies par to pakotņu un moduļu lielumu, kurus importējat savā lietotnē, pārbaudiet šo paplašinājumu! Blakus importēšanas pārskatiem jūs to darīsit skatiet importējamā iepakojuma lielumu . Tas ir lielisks veids, kā nodrošināt, lai jūsu lietotņu pakas būtu pēc iespējas mazākas!

Ceļš Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Mēģinot atsaukties uz failu savā darbvietā, var būt grūti atcerēties precīzus failu ceļus un nosaukumus. Es cenšos lielāko daļu laika saglabāt savu izvēlnes joslu VS kodā (lai palielinātu koda nekustamo īpašumu), tāpēc es ienīstu nepieciešamību atvērt failu pārlūku, lai vēlreiz pārbaudītu, kur fails atrodas. Šeit ienāk Path Intellisense!

Šis paplašinājums jums nodrošinās intellisense, atsaucoties uz failu ceļiem . Viss, kas jums jādara, ir sākt rakstīt ceļu pēdiņās, un jūs saņemsiet intellisense mapju un failu nosaukumiem.

Skatīt mezglu paketi

https://marketplace.visualstudio.com/items?itemName=dkundel.vscode-npm-source

Noklikšķiniet uz sava pieprasījuma vai importēšanas rindas savā kodā un noklikšķiniet uz GitHub repo.

Ļoti noderīgi, ja vēlaties pāriet uz GitHub, lai skatītu kādu avota kodu vai izskatītu dokumentus/problēmas.

Labāki komentāri

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

Šis paplašinājums, iespējams, ir vismazāk populārais no ķekara, bet man personīgi tas šķiet neticami noderīgi. Tātad, vai jūs zināt, kad jums ir koda fragments, kas jāievieš vai jāpabeidz vēlāk? Vai arī vēlaties atzīmēt koda daļu kā novecojušu? Vai arī jums ir jautājums citam izstrādātājam par koda daļu?

Šis paplašinājums nodrošinās krāsu kodēti komentāri lai atrisinātu visu iepriekš minēto. Šeit ir pieejamo krāsu kodu saraksts.

JavaScript (ES6 koda fragmenti)
Kūka
Skaistāk
Atkļūdotājs pārlūkam Chrome
ESLint
Importa izmaksas
Ceļš Intellisense
Skatīt mezglu paketi
Labāki komentāri
NPM Intellisense
Wallaby.js
Secinājums

NPM Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

Vai esat kādreiz aizgājuši importēt iepakojumu un aizmirsāt, kāds ir tā nosaukums? Nu, ne vairāk! Šis paplašinājums būs importējot nodrošināt paketi intellisense pamatojoties uz jūsu instalētajām NPM pakotnēm.

Wallaby.js

https://marketplace.visualstudio.com/items?itemName=WallabyJs.wallaby-vscode

Veiciet testus, kodējot! No cilvēkiem, kas mums atnesa Quokka.js, šeit ir lielisks rīks, kas paātrina jūsu attīstību.

pārbaudiet ceļu skrējēja e-pastu

Secinājums

Vai jums ir vēl kādi lieliski JavaScript paplašinājumi? Paziņojiet mums komentāros, un mēs to pievienosim šai ziņai kā papildu pieminējumi .

Paldies, ka izlasījāt!

#javascript #visual-studio

scotch.io