Per i progetti recenti, abbiamo utilizzato la guida allo stile JavaScript di Airbnb per i nostri progetti. Sono un fan e penso che aiuti a scrivere JavaScript pulito e leggibile (sembra che sia stato scritto dalla stessa persona – l’obiettivo finale degli standard di codifica, giusto?).<\/p>\n
In questo post, illustrer\u00f2 il processo di installazione in Visual Studio Code.<\/a><\/strong><\/p>\n Questo post presuppone che tu abbia familiarit\u00e0 con la configurazione di Node Package Manager<\/a><\/strong> sul tuo computer locale.<\/p>\n Se non lo sei, allora ho una guida su come farlo in questo post<\/a><\/strong>. La scorciatoia? \u00c8 letteralmente cos\u00ec semplice (<\/a><\/strong> una volta installato Homebrew):<\/p>\n Dopo averlo configurato (usando detto post o se \u00e8 gi\u00e0 impostato), sarai pronto per andare avanti con l’installazione effettiva degli strumenti necessari per configurare il linting JavaScript in Visual Studio Code.<\/p>\n Supponiamo, ad esempio, di eseguire un progetto da una directory denominata acme nella directory Progetti in Dropbox. In tal caso, vai alla directory dei plugin per detto progetto. Probabilmente assomiglier\u00e0 a questo:<\/p>\n Per qui, dovrai installare ESLint e i file di configurazione di Airbnb. Fortunatamente, \u00e8 davvero facile da fare. Dal terminale, inserisci semplicemente il seguente comando:<\/p>\n Presumo che nessuno dei pacchetti di cui sopra sia gi\u00e0 installato. In tal caso, come eslint, puoi rimuovere quel particolare argomento dalla riga sopra.<\/p>\n Inoltre, \u00e8 importante capire che il progetto eslint-plugin-import \u00e8 importante per aggiungere il supporto per l’importazione e l’esportazione di moduli JavaScript.<\/p>\n \u00c8 necessario un altro passaggio prima di ottenere l’impostazione della configurazione in Visual Studio Code. Vale a dire, si tratta di creare un file di configurazione ESLint. Dall’interno della directory acme-plugin<\/strong> come mostrato sopra, inserisci il seguente comando:<\/p>\n Questo creer\u00e0 un file vuoto (o un file punto vuoto come alcuni potrebbero riferirsi ad esso) ed \u00e8 qui che la nostra configurazione far\u00e0 riferimento alla guida di stile di Airbnb.<\/p>\n Nel file \u00e8 sufficiente aggiungere le seguenti righe di codice di configurazione:<\/p>\n Ora che hai installato ESLint, hai un riferimento a Airbnb Styleguide e hai un riferimento al supporto di una sintassi aggiuntiva, \u00e8 il momento di configurare Visual Studio Code.<\/p>\n Secondo me, questa \u00e8 la parte pi\u00f9 facile. Apri il pannello delle estensioni usando il modo che preferisci (cliccando sull’icona o usando il collegamento) e quindi esegui una ricerca per ESLint. Potresti vedere diversi risultati, ma quello che vuoi \u00e8 quello che assomiglia a questo:<\/p>\n![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164307-61e7634149707.png\")
<\/a><\/p>\nLinting JavaScript nel codice di Visual Studio<\/h2>\n
![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164307-61e763461bd2a.png\")
<\/a><\/p>\n1 Installazione di ESLint<\/h3>\n
$ cd ~\/Dropbox\/Projects\/acme\/wp-content\/plugins\/acme-plugin<\/code><\/pre>\n$ npm i -S eslint eslint-config-airbnb-base eslint-plugin-import<\/code><\/pre>\n2 La configurazione ESLint<\/h3>\n
$ touch .eslintrc.js<\/code><\/pre>\nmodule.exports = {\n\u00a0 \"extends\": \"airbnb-base\"\n};<\/code><\/pre>\n3 Impostazione del codice di Visual Studio<\/h3>\n
![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164307-61e7634f24def.png\")
<\/a><\/p>\n![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164307-61e7635536e51.png\")
<\/a><\/p>\n