Para proyectos recientes, hemos estado usando la gu\u00eda de estilo de JavaScript de Airbnb para nuestros proyectos. Soy un fan\u00e1tico y creo que ayuda escribir JavaScript limpio y legible (que parece haber sido escrito por la misma persona, el objetivo final de los est\u00e1ndares de codificaci\u00f3n, \u00bfno?).<\/p>\n
En esta publicaci\u00f3n, explicar\u00e9 el proceso de configuraci\u00f3n en Visual Studio Code.<\/a><\/strong><\/p>\n Esta publicaci\u00f3n asume que est\u00e1 familiarizado con la configuraci\u00f3n del Administrador de paquetes de nodo<\/a><\/strong> en su m\u00e1quina local.<\/p>\n Si no lo eres, entonces tengo una gu\u00eda sobre c\u00f3mo hacerlo en esta publicaci\u00f3n<\/a><\/strong>. \u00bfEl atajo? Es literalmente tan simple como esto<\/a><\/strong> (una vez que se instala Homebrew):<\/p>\n Una vez que lo haya configurado (ya sea usando dicha publicaci\u00f3n o si ya est\u00e1 configurado), estar\u00e1 listo para seguir adelante con la instalaci\u00f3n real de las herramientas necesarias para configurar el linting de JavaScript en Visual Studio Code.<\/p>\n Digamos, por ejemplo, que est\u00e1 ejecutando un proyecto desde un directorio llamado acme en su directorio de Proyectos en Dropbox. Si ese es el caso, navegue hasta el directorio de complementos para dicho proyecto. Es probable que se vea algo como esto:<\/p>\n Aqu\u00ed, deber\u00e1 instalar ESLint y los archivos de configuraci\u00f3n de Airbnb. Por suerte, es muy f\u00e1cil de hacer. Desde la terminal, simplemente ingrese el siguiente comando:<\/p>\n Supongo que ninguno de los paquetes anteriores ya est\u00e1 instalado. Si es as\u00ed, como eslint, puede eliminar ese argumento en particular de la l\u00ednea anterior.<\/p>\n Adem\u00e1s, es importante comprender que el proyecto eslint-plugin-import es importante para agregar soporte para la importaci\u00f3n y exportaci\u00f3n de m\u00f3dulos de JavaScript.<\/p>\n Se necesita un paso m\u00e1s antes de obtener la configuraci\u00f3n en Visual Studio Code. Es decir, se trata de crear un archivo de configuraci\u00f3n de ESLint. Desde el directorio acme-plugin<\/strong> como se muestra arriba, ingrese el siguiente comando:<\/p>\n Esto crear\u00e1 un archivo vac\u00edo (o archivo de puntos vac\u00edo, como algunos pueden referirse a \u00e9l) y aqu\u00ed es donde nuestra configuraci\u00f3n har\u00e1 referencia a la gu\u00eda de estilo de Airbnb.<\/p>\n En el archivo, simplemente agregue las siguientes l\u00edneas de c\u00f3digo de configuraci\u00f3n:<\/p>\n Ahora que tiene ESLint instalado, tiene una referencia a la gu\u00eda de estilo de Airbnb y tiene una referencia para admitir sintaxis adicional, es hora de configurar Visual Studio Code.<\/p>\n En mi opini\u00f3n, esta es la parte m\u00e1s f\u00e1cil. Abra el panel de extensiones usando la forma que m\u00e1s le convenga (haciendo clic en el icono o usando el acceso directo) y luego ejecute una b\u00fasqueda de ESLint. Es posible que vea varios resultados, pero el que desea es el que se ve as\u00ed:<\/p>\n![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164307-61e7634149707.png\")
<\/a><\/p>\nLinting de JavaScript en Visual Studio Code<\/h2>\n
![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164307-61e763461bd2a.png\")
<\/a><\/p>\n1 Instalaci\u00f3n de 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 configuraci\u00f3n de ESLint<\/h3>\n
$ touch .eslintrc.js<\/code><\/pre>\nmodule.exports = {\n\u00a0 \"extends\": \"airbnb-base\"\n};<\/code><\/pre>\n3 Configuraci\u00f3n del c\u00f3digo de Visual Studio<\/h3>\n
![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164307-61e7634f24def.png\")
<\/a><\/p>\n![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164307-61e7635536e51.png\")
<\/a><\/p>\n