Strumenti di cui avrei voluto sapere quando ho iniziato a scrivere codice

Foto di energepic.com di Pexels

Nel mondo della tecnologia, ci sono migliaia di strumenti che le persone ti diranno di usare. Come dovresti sapere da dove cominciare?

Come qualcuno che ha iniziato a scrivere codice relativamente di recente, questo diluvio di informazioni era troppo lungo da esaminare. Mi sono ritrovato a installare estensioni che non mi hanno davvero aiutato nel mio ciclo di sviluppo e spesso mi sono persino ostacolato.

Non sono affatto un esperto, ma nel tempo ho compilato un elenco di strumenti che mi sono stati estremamente utili. Se stai appena iniziando a imparare a programmare, questo si spera ti offrirà qualche consiglio. Se sei uno sviluppatore esperto, spero che imparerai ancora qualcosa di nuovo.

Ho intenzione di suddividere questo articolo in estensioni di Chrome ed estensioni VS Code. So che ci sono altri browser e altri editor di testo, ma sono disposto a scommettere che la maggior parte degli strumenti sono disponibili anche per la tua piattaforma preferita, quindi non iniziamo un argomento religioso sulle nostre preferenze personali.

Sentiti libero di saltare.

Estensioni di Chrome

Foto di Caio Resende di Pexels

Ora che sono uno sviluppatore web autoproclamato, vivo praticamente nella mia console Chrome. Di seguito sono riportati alcuni strumenti che mi consentono di trascorrere meno tempo lì:

  • WhatFont - Il nome dice tutto. Questo è un modo semplice per scoprire i caratteri utilizzati dal tuo sito Web preferito, in modo da poterli prendere in prestito per i tuoi progetti.
  • Pesticidi - Utile per vedere i contorni dei tuoi
    e modificare i CSS. Questo è stato un vero toccasana quando stavo cercando di imparare il mio modello di scatola.
  • Colorzilla - Utile per copiare colori esatti da un sito Web. Questo copia un colore direttamente negli appunti in modo da non perdere per sempre a cercare la giusta combinazione RGBA.
  • CSS Peeper - Utile per guardare i colori e le risorse utilizzate in un sito Web. Un buon esercizio, soprattutto all'inizio, è la clonazione di siti Web che ritieni interessanti. Questo ti dà una sbirciatina sotto il cofano per la loro combinazione di colori e ti consente di vedere quali altre risorse esistono sulla loro pagina.
  • Wappalyzer - Utile per vedere le tecnologie utilizzate su un sito Web. Vi siete mai chiesti che tipo di framework utilizza un sito Web o su quale servizio è ospitato? Non guardare oltre.
  • Strumenti Dev React - Utili per il debug delle tue applicazioni React. Vale la pena ricordare che questo è utile solo se stai programmando un'applicazione React.
  • Redux Dev Tools - Utile per il debug di applicazioni che utilizzano Redux. Vale la pena ricordare che questo è utile solo se stai implementando Redux nella tua applicazione.
  • JSON Formatter - Utile per rendere JSON più pulito nel browser. Hai mai guardato in faccia un brutto blob JSON, cercando di capire quanto siano nidificate le informazioni che desideri? Bene, questo lo rende in modo che ci vogliono solo 2 ore invece di 3.
  • Vimeo Repeat and Speed ​​- Utile per velocizzare i video Vimeo. Se guardi tutorial video come la maggior parte degli sviluppatori web, sai quanto è utile consumarli a 1,25 volte la normale velocità di riproduzione. Esistono anche versioni per YouTube.

Estensioni di codice VS.

Foto per gentile concessione di Pexels

Visual Studio Code è il mio editor preferito.

Le persone adorano i loro editor di testo e io non faccio eccezione. Tuttavia, sono disposto a scommettere che la maggior parte di queste estensioni funziona anche per qualsiasi editor che stai utilizzando. Dai un'occhiata alle mie estensioni preferite:

  • Rinomina automaticamente tag: rinomina automaticamente i tag HTML associati. Hai creato un tag

    . Ora vuoi cambiarlo, così come il suo tag

    incluso in qualcos'altro. Basta cambiare uno e l'altro seguirà. Teoricamente migliora la produttività di un fattore 2.
  • Supporto CSS HTML - Supporto CSS per documenti HTML. Ciò è utile per ottenere evidenti suggerimenti sulla sintassi e suggerimenti sul codice in modo che i CSS ti facciano venire voglia di smettere di scrivere codice un paio di volte al giorno.
  • Snippet HTML - Snippet di codice utili. Un altro bel risparmio di tempo. Abbina questo a Emmet e non dovrai quasi mai digitare nuovamente il vero HTML.
  • Babel ES6 / ES7 - Aggiunge JavaScript Colorazione della sintassi di Babel. Se stai usando Babel, questo renderà molto più facile differenziare ciò che sta accadendo nel tuo codice. Questo è perfetto se ti piace giocare con le moderne funzionalità di JavaScript.
  • Bracket Pair Colorizer - Aggiunge colori alle parentesi per una visualizzazione più semplice dei blocchi. Questo è utile per quei bug fin troppo comuni in cui non hai chiuso accuratamente parentesi o parentesi.
  • ESLint: integra ESLint nel codice di Visual Studio. Questo è utile per ottenere suggerimenti sui bug durante la scrittura del codice e, a seconda della configurazione, può aiutare ad applicare un buon stile di codifica.
  • Guide: aggiunge ulteriori linee guida al codice. Questo è un altro segnale visivo per assicurarsi di chiudere correttamente le parentesi. Se non puoi dirlo, sono una persona molto visiva.
  • Utilità console JavaScript: semplifica la registrazione della console. Se sei come la maggior parte degli sviluppatori, ti ritroverai ad accedere alla console nel tuo flusso di debug (so che dovremmo usare il debugger). Questa utility semplifica la creazione di utili istruzioni console.log ().
  • Controllo ortografico del codice - Controllo ortografico che rappresenta camelCase. Un'altra fonte comune di bug è il fat-thumbing di un nome di variabile o funzione. Questo correttore ortografico cercherà parole non comuni ed è utile per tenere conto del modo in cui scriviamo le cose in JavaScript.
  • Git Lens - Rende più facile vedere quando e da chi sono state apportate le modifiche. Questo è utile per incolpare la persona appropriata quando il codice viene violato, dal momento che non è assolutamente colpa tua.
  • Path Intellisense - Completamento automatico del percorso del file. Questo è molto utile per importare cose da altri file. Rende la navigazione dell'albero dei file un gioco da ragazzi.
  • Più carina - Formattatore di codice automatico. Dimentica i giorni in cui dovevi inserire manualmente il codice e rendere le cose leggibili dall'uomo. Prettier lo farà per te molto più velocemente e meglio di quanto tu possa mai fare da solo. Non posso raccomandare abbastanza questo.
  • VSCode-Icons - Aggiunge icone all'albero dei file. Se guardare la struttura dei file fa male agli occhi, questo potrebbe aiutare. C'è un'icona utile per qualsiasi tipo di file che stai creando che renderà più semplice distinguere ciò che stai guardando.

In conclusione

Probabilmente hai il tuo set di strumenti indispensabili per il tuo ciclo di sviluppo. Spero che alcuni degli strumenti che ho menzionato sopra possano rendere più efficiente il tuo flusso di lavoro.

Non cadere nella trappola, tuttavia, di installare tutti gli strumenti che incontri prima di imparare a usare quelli che hai già, in quanto questo può essere un enorme spreco di tempo.

Ti incoraggio a lasciare i tuoi strumenti preferiti nei commenti qui sotto, in modo che tutti possiamo imparare insieme.

Se ti è piaciuto questo articolo, dai qualche applauso e dai un'occhiata agli altri articoli che ho scritto qui, qui, qui e qui. Inoltre, dammi un seguito su Twitter.