Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Visual Studio Code: estensioni divertenti

A volte lavorando è utile anche divertirsi. Ecco alcune estensioni di Visual Studio Code, che vi faranno distrarre un po'
A volte lavorando è utile anche divertirsi. Ecco alcune estensioni di Visual Studio Code, che vi faranno distrarre un po'
Link copiato negli appunti

Non bisogna sempre pensare al lavoro ed alla professionalità. Anche l'occhio vuole la sua parte ed ogni tanto è bene fare le cose "perché son belle e basta". Ecco a voi una serie di estensioni di Visual Studio Code che, non miglioreranno la vostra produttività, ma son comunque belle a vedersi.

Power Mode

Una delle mie estensioni preferite è probabilmente la Power Mode, con id estensione hoovercj.vscode-power-mode.

Pagina di installazione per l'estensione Power mode

Cosa fa

La Power Mode è una modalità che farà "tremare" l'editor a colpi di tastiera, trasformerà la scrittura del codice in un gioco a combo e aggiungerà alcuni effetti grafici per ogni tasto premuto.

Abilitarla

Una volta installata, per abilitarla basta andare nelle impostazioni tramite barra dei menu ("File > Preferenze > Impostazioni") o scorciatoia (CTRL+,):

Come aprire le impostazioni di power mode

Si possono trovare tutte le impostazioni correlate selezionando "Estensioni > Power Mode" nelle impostazioni oppure scrivendo "Power Mode" nella barra di ricerca.

Cercare le impostazioni correlate a power mode nelle impostazioni

Da qui per abilitare le funzioni basta cliccare sulla casella di controllo alla voce "Powermode:Enabled"

Abilitare la spunta di powermode

Effetti grafici

Una delle caratteristiche della Power Mode è quella di creare effetti grafici in corrispondenza di dove si sta scrivendo del testo. Gli effetti possono essere di vario genere:

  • Particles o particelle, appaiono delle particelle sopra il testo come se si stesse scolpendo su pietra.
  • Fireworks o fuochi d'artificio, sopra il testo si vedranno comparire dei fuochi d'artificio.
  • Flames o fiamme, sopra il testo appariranno delle fiamme.
  • Magic o magico, si vedranno in corrispondenza del testo delle nuvolette colorate come piccole esplosioni magiche.
  • Clippy, questo merita di essere provato per i vecchi nostalgici che ricordano la piccola "spilletta rompiscatole" di "Microsoft.
  • simple-rift o spaccatura, genera a fine testo una spaccatura magica tipo portale extra-dimensionale.
  • exploding-rift o spaccatura esplosiva, genera delle esplosioni blu alternate a spaccature orizzontali.

Per cambiare effetto andare nella sezione "General" quindi "Presets".

Cambiare effetto di powermode

Questi effetti sono chiamati anche "esplosioni" e si possono disabilitare totalmente andando alla sezione "Explosion":

disabilitare le animazioni di esplosioni

Esistono due modalità di rendering per le Gif che rappresentano le esplosioni, "mask" (ovvero viene mixata la Gif allo sfondo dell'editor usando la composizione grafica) e "image" (la Gif viene semplicemente incollata sopra). Per cambiarla basta cliccare su "Background Mode" sempre nella sezione "Explosions" delle impostazioni di Power Mode:

cambiare modalità di rendering dell'esplosione

Il primo metodo è quello più graficamente appagante (il colore di alcune animazioni cambia in base al colore del testo), il secondo è quello più performante.

Personalizzare l'esplosione

Si può anche personalizzare l'immagine dell'esplosione, per farlo basta andare nella sezione "Explosions > Custom Explosions" e cliccare su "Edit in settings.json":

Impostazione per inserire un animazione personalizzata

Si verrà reindirizzati ad un file JSON in una particolare riga con chiave: powermode.explosions.customExplosions

Modificare il json specificando l'url dell'animazione o il base64

Qui si possono scrivere due tipologie di valori:

  • un indirizzo Web per una Gif online racchiusa tra doppi apici (i.e.: "indirizzo.web/nomegif").
  • una Gif decodificata come stringa BASE64, preceduta dalla scritta data:image/gif;base64, il tutto tra doppi apici (i.e.: "data:image/gif;base64,CODICEBASE64").

L'indirizzo non può essere locale, solo remoto.

L'editor che trema

Uno degli effetti d'animazione che fornisce Power Mode è quello che fa vibrare l'editor ogni volta che si preme un tasto. Questo effetto può dare ovviamente fastidio, si può disattivare o cambiare l'intensità della vibrazione nella sezione "Power Mode">"Shake":

Deselezionando la spunta "Enabled" si disattiva la vibrazione, mentre cambiando il valore di "Intensity" si può decidere di quanto deve spostarsi lo schermo per ogni tasto premuto.

Contatore combo

Se tra un tasto digitato ed un altro non passano più di 10 secondi il contatore delle combo aumenta, questo è normalmente visibile in alto sulla destra con la scritta "VALORE X" ed una barra che diminuisce di grandezza nel tempo (fino a sparire).

Il contatore è perfettamente configurabile in posizione, aspetto e tempistiche dalle impostazioni. Ad esempio per spostare il contatore dall'editor sulla status bar (dove magari non copre il testo) si deve selezionare l'impostazione "Combo:Location" nella sezione "Combo" della Powermode.

Impostazione per la posizione delle combo

Si può disabilitare dalla voce "Enabled", aumentare o diminuire la dimensione del contatore tramite le voci "Counter Enabled" e "Counter Size".

impostazioni generiche per il contatore delle combo

Inoltre si può attivare il valore "Threshold" che serve ad attivare la funzione di "combo" solo dopo aver digitato un numero ben specificato di tasti, per farlo si deve scrivere un valore maggiore di zero nell'apposita casella.

Impostazione soglia minima di combo per abilitare il contatore

Si può disabilitare il timer (solo a livello visivo, dietro le quinte continuerà ad scorrere) o cambiare il valore entro cui si resetta:

Impostazione timeout per le combo

In realtà si può anche disattivare come funzione, inserendo come valore "0" alla voce "Timeout" non si resetterà mai il numero di combo.

Resource Monitor

Più che un estensione "funny" è un estensione anche utile, che permette di avere a portata di status bar tutte le informazioni principali del nostro PC come:

  • livello di batteria.
  • Uso della CPU.
  • Livello di RAM occupata.
  • Disco.

Per installarla si deve cercare l'estensione con id mutantdino.resourcemonitor oppure "Resource Monitor" nella barra di ricerca delle estensioni.

Pagina installazione estensione Resource Monitor

Aspetto

Una volta installata appariranno nella status bar in basso le principali informazioni hardware del vostro PC aggiornate in tempo reale:

Posizione del monitor di risorse sulla status bar

Impostazioni

Non ci sono purtroppo impostazioni grafiche di alcun tipo. Si può tuttavia modificare manualmente il JSON e aggiungere delle voci. Per farlo si deve andare nelle impostazioni e cliccare l'icona in alto a destra con il foglio piegato:

Modificare il json per le impostazioni dell'estensione resource monitor

Si devono poi ggiungere in coda al file (prima della parentesi graffa chiusa, preceduto da virgola) una o più di queste opzioni, seguite da un valore:

  • resmon.show.cpuusage: mostra l'uso della CPU (inserire true o false).
  • resmon.show.cpufreq: mostra la frequenza (inserire true o false).
  • resmon.show.mem: mostra l'utilizzo di memoria (inserire true o false).
  • resmon.show.battery: mostra la percentuale di batteria rimasta (inserire true o false).
  • resmon.updatefrequencyms: si può cambiare da questo valore la frequenza in millisecondi dell'aggiornamento dei valori, ad esempio impostando il numero 1000, l'estensione chiederà dopo 1 secondo gli aggiornamenti dei valori.
  • resmon.freq.unit: si può decidere quale unità di misura utilizzare per la frequenza della CPU (si può inserire una stringa a scelta tra Hz, KHz, MHz, e Ghz).
  • resmon.mem.unit: si può decidere quale unità di misura utilizzare per la memoria RAM (si può inserire una stringa a scelta tra B, KB, MB, e GB).
    • Nota che nella mia versione di Visual Studio Code questa opzione non ha funzionato.

Esempio di json modificato per estensione resource monitor

Le storie di Visual Studio Mode

Invece delle storie su Instagram, potreste pensare alle storie su Visual Studio Code! L'estensione "Stories" serve a condividere con altri sviluppatori alcuni momenti della nostra vita.

Per installarla si deve cercare nella barra di ricerca "Stories" oppure l'estensione con id: bar9.stories.

Pagina installazione per l'estensione stories

Apparirà sul pannello laterale una nuova icona, con una S cerchiata.

Posizione nella sidebar dell'estensione Stories

Cliccandoci sopra si vedranno le storie degli altri programmatori che condivideranno parti di codice con voi sotto formato di video (a cui si può anche cambiare la velocità di riproduzione).

Come si vede una storia generica

Pubblicare una storia

Per pubblicare una storia bisogna prima di tutto autenticarsi, aprire il pop-up dei comandi con la scorciatoia CTRL+Shift+P quindi scrivere "Stories:Authenticate" e cercare il comando giusto:

Come autenticarsi per l'estensione Stories

Si verrà reindirizzati ad una pagine Web dove autenticarsi con il proprio profilo di GitHub. Ora si può registrare una propria storia cliccandp in basso a destra su "Record Story" nella barra di stato.

Registrare una storia

Inizierà la registrazione che poi potrete fermare manualmente cliccando lo stesso tasto. Verrà aperta l'anteprima della storia ed in basso a destra potrete pubblicarla o scartarla.

Publicare o scartare una storia

Nota a margine: scollegarsi da Stories

Se doveste disinstallare l'estensione potreste voler anche "scollegare" il vostro account Github dalle storie. Per farlo andate sul vostro account Github, sezione "Impostazioni".

Come andare nelle impostazioni di Github per disaccoppiare l'estensione Stories

Si deve quindi andare su "Applications" sotto "Integrations" (pannello laterale sinistro).

Posizione delle applicazioni con autorizzazione su github

Ora bisogna andare sulla scheda "Authorized OAuth Apps", cliccare i tre puntini vicino all'applicazione Stories e quindi "Revoke".

Posizione delle applicazioni con autorizzazione di terze parti su github

Animali da compagnia

A tutti fa piacere avere un animale da compagnia, ma non tutti hanno la possibilità di tenerne uno. Quindi perché non averne uno nel proprio editor di codice? Con l'estensione vscode-pets si può.

Per installarla, cercare "vscode-pets" tra le estensioni oppure l'estensione con id tonybaloney.vscode-pets.

Pagina di installazione dell'estensione pets

Una volta installata apparirà, nella sezione "Explorer" del vostro editor si troverà un nuovo menù chiamato "VS CODE PETS".

Posizione nell'explorer di pets

Qui è già possibile vedere un gattino che si muove all'interno del riquadro che si apre.

Aggiungi animali

Si possono aggiungere altri animali. Per farlo si deve andare sopra con il mouse al titolo del pannello e cliccare il tasto "+".

Aggiungere un animaletto

Verrà chiesto che tipo di animale si vuole aggiungere da un pannello che apparirà in alto:

Tipo dell'animaletto da aggiungere

E quindi il nome:

Nome dell'animaletto da compagnia

È possibile vengano richieste altre informazioni come il colore, se disponibili per l'animale scelto.

Rimuovi animali

Per rimuovere un animale cliccare l'icona del cestino che appare sempre portando il mouse sul titolo del pannello degli animali.

Cancellare un animaletto da compagnia

Verrà quindi richiesto quale animale si vuole rimuovere dal menu a tendina che appare in alto.

Nome dell'animaletto da eliminare

Lanciare una pallina

Per fare giocare l' animaletto di compagnia si può lanciare.. una pallina di pixel!

Per farlo ci si deve portare sul titolo del pannello e quindi cliccare sull'icona della pallina.

Lanciare una pallina all'animaletto

Il piccolo animaletto inseguirà la pallina appena lanciata.

Pannello individuale

Volendo il pannello degli animali si può rendere "individuale" staccandolo dalla sezione di explorer. Per farlo basta andare nelle impostazioni ("File>Settings" dalla barra dei menu oppure CTRL+, da tastiera) e cercare l'estensione vscode pets (da barra di ricerca o indice a sinistra).

Impostazioni dell'estensione pets e della posizione del riquadro

Cercare e cambiare l'opzione "position" inserendo come valore "panel". Il pannello sparirà, per aprirlo si deve avviare una sessione di "pet coding", ovvero premere sulla tastiera CTRL+Shift+P per aprire il pannello dei comandi e digitare "start pet" e premere l'opzione risultante.

Iniziare una sessione di coding dell'estensione pets

Apparirà ora sulla destra dell'editor la finestra degli animali.

Pannello pets sul lato

Ovviamente si può ridimensionare a piacere l'output, spostarlo in altri riquadri o chiuderlo.

Ti consigliamo anche