Visual Studio Code (también llamado VS Code y VSCode) es un editor de código multiplataforma rentable pero potente, hecho en forma de una aplicación de escritorio. Según el autor del material, cuya traducción publicamos hoy, VS Code admite muchas herramientas de desarrollo, como
TypeScript y
el depurador de Chrome. Esto, además del hecho de que se ha escrito una increíble cantidad de extensiones de código abierto, hace que VS Code sea un editor muy popular y querido por muchos.
Si desea agregar algo nuevo a su arsenal de programador de JavaScript, el autor del material espera que encuentre algo aquí que sea útil para usted. No todas las veintisiete herramientas revisadas aquí están destinadas exclusivamente al desarrollo de JS. Pero todos ellos pueden ser aplicados con éxito por aquellos que escriben en JavaScript.
1. Fragmentos de proyectos
La
extensión Project Snippets , mi favorita de todos los tiempos, se basa en la herramienta
User Snippets integrada en VS Code.
Si no está familiarizado con esta característica estándar del Código VS, sepa que le permite al usuario diseñar sus propios fragmentos de código en forma de los llamados fragmentos. Esto se hace para reutilizarlos en sus proyectos. ¿Qué significa reutilizar?
Considera un ejemplo. Suponga que a menudo tiene que escribir el mismo código repetitivo. Por ejemplo, esto:
import { useReducer } from 'react' const initialState = {
Se puede emitir un código similar en forma de fragmento. Como resultado, en lugar de escribirlo todo desde el teclado (o copiarlo desde algún lugar), solo necesita ingresar el llamado prefijo, después del cual aparecerá un código correspondiente a este prefijo en el editor.
Si, en VS Code, va a
File > Preferences > User Snippets , puede crear opcionalmente un nuevo
New Global Snippets File global seleccionando el
New Global Snippets File .
Por ejemplo, para crear un nuevo archivo de fragmentos para proyectos de
React que usan TypeScript, puede seleccionar el
New Global Snippets File y establecer el nombre del archivo como
typescriptreact.json . El archivo
.json recién creado se abrirá en el editor, en el que será posible describir fragmentos.
Cree un fragmento basado en un fragmento del código anterior. Para hacer esto, el archivo
typescriptreact.json debe convertirse a lo siguiente:
{ "const initialState = {}; const reducer = (state, action)": { "prefix": "rsr", "body": [ "const initialState = {", " //$1", "}", "", "const reducer = (state, action) => {", " switch (action.type) {", " default:", " return state", " }", "}" ] } }
Ahora que el archivo tiene una descripción del fragmento, puede crear un nuevo archivo TypeScript con la extensión
.tsx e ingresar el prefijo
rsr . Esto provocará una ventana emergente con una descripción del fragmento. Al presionar
Tab completa el procedimiento para insertar un fragmento en un archivo. Estará representado por el siguiente código:
const initialState = {
Algunos inconvenientes de usar fragmentos globales es que están disponibles para todos los proyectos que está desarrollando (sin embargo, en algunos casos, para fragmentos de propósito general, esto, por el contrario, es conveniente). Pero algunos proyectos se pueden configurar de manera especial. Como resultado, si lo que se usa en tales proyectos no es necesario en todos los proyectos, el archivo global de fragmentos puede no ser la mejor solución al problema de procesar fragmentos de código reutilizable.
Supongamos que un proyecto usa una estructura de carpetas especial. Para simplificar el trabajo en este proyecto, se puede preparar algo similar al siguiente código en el archivo
typescriptreact.json :
{ "import Link from components/common/Link": { "prefix": "gcl", "body": "import Link from 'components/common/Link'" }, "border test": { "prefix": "b1", "body": "border: '1px solid red'," }, "border test2": { "prefix": "b2", "body": "border: '1px solid green'," }, "border test3": { "prefix": "b3", "body": "border: '1px solid magenta'," } }
Presta atención al primer fragmento. Puede ser adecuado para un proyecto con una carpeta específica y una estructura de archivos. Pero, ¿qué sucede si estamos trabajando en otro proyecto en el que el componente
Link se encuentra en una ruta como
components/Link ?
Echa un vistazo ahora a otros fragmentos. Usan comillas simples. Su uso conduce a la aparición de estructuras como
border: '1px solid red' en el código.
Tales construcciones se pueden usar perfectamente en JavaScript. Pero, ¿qué sucede si usamos la biblioteca de
componentes con estilo como herramienta para diseñar un proyecto? En este caso, tal sintaxis no nos conviene. De hecho, los componentes con estilo usan construcciones CSS regulares.
De hecho, aquí la extensión de
Project Snippets viene en nuestra ayuda.
Esta extensión le permite crear fragmentos que operan a nivel de proyecto o espacio de trabajo. Dichos fragmentos no entran en conflicto con los fragmentos creados para otros proyectos y no interfieren con el trabajo con ellos. Es muy conveniente.
2. Mejores comentarios
Si desea escribir comentarios en su código, entonces probablemente se encuentre con el hecho de que a veces no es fácil encontrar un comentario escrito hace mucho tiempo. La razón de esto puede ser que el código puede crecer un poco.
Usando la extensión
Better Comments , puede resaltar comentarios en diferentes colores.
Uso de una mejor extensión de comentariosAhora, entre otras cosas, si está trabajando en código en un equipo, ¡será más fácil para usted llamar la atención de otros desarrolladores sobre los comentarios importantes que comienzan
! o .
3. Colorizador de par de soportes
Cuando vi capturas de pantalla por primera vez con los resultados de la extensión
Bracket Pair Colorizer , me di cuenta de que esta extensión simplemente tenía que aparecer en mi caja de herramientas.
La programación es mi pasión, y resaltar los corchetes es algo que definitivamente me ayuda a disfrutar más esta actividad.
Uso de la extensión de color del par de brackets4. Tema material
El tema Material, introducido por la extensión
Material Theme , es un fenómeno grandioso que ahora está disponible para los fanáticos de VS Code. Su uso le permite llevar el código al siguiente formulario.
Hacer código usando el tema MaterialEste debe ser uno de los mejores temas existentes.
5. @ typecript-eslint / parser
Si está escribiendo en TypeScript, probablemente debería considerar cambiar sus configuraciones de TSLint a typescript-eslint. El hecho es que,
según algunos informes , el soporte TSLint de Palantir se suspenderá después de un tiempo. En lugar de TSLint, se utilizará typecript-eslint allí.
Los proyectos están cambiando gradualmente para usar el paquete @ typescript-eslint / parser y los paquetes relacionados. Esto se hace en un esfuerzo por prepararse para futuros cambios en el ecosistema de desarrollo de TS. Si te gusta
Prettier , puedes usar esta herramienta, usando la mayoría de las reglas de ESLint.
6. Stylelint
Stylelint es la herramienta que siempre se usa en mis proyectos. Esto es cierto por varias razones:
- Ayuda a evitar errores.
- Promueve las convenciones de estilo al escribir CSS.
- Funciona bien con Prettier.
- Es compatible con CSS / SCSS / Sass / Less.
- Admite complementos creados por la comunidad de desarrolladores.
7. Markdownlint + docsify
No sé cómo otros desarrolladores toman notas durante las sesiones de lluvia de ideas, pero me gusta hacer notas en formato
Markdown . Este es un formato simple y conveniente. Hay muchas herramientas disponibles para ayudarlo a escribir textos de Markdown. Entre estas herramientas, se puede notar
markdownlint .
Esta es la extensión VS Code, que es un linter que ayuda a verificar estilos en archivos
.md . También es compatible con el formato de texto con Prettier.
Además, generalmente uso
docsify en todos mis proyectos. Esta herramienta admite el formato Markdown y otras características útiles.
8. TODO destacado
Tengo la costumbre de escribir notas directamente en el código sobre lo que hay que hacer en el proyecto. Como resultado, estoy interesado en extensiones como
TODO Highlight . Esta extensión te ayuda a trabajar con TODO notas.
9. Costo de importación
La extensión
Costo de importación pertenece a la categoría de herramientas cuya utilidad se puede sentir cuando se utilizan por primera vez. Sin embargo, después de usar una herramienta similar durante algún tiempo, puede resultar que ya no será necesario. El hecho es que con el tiempo, el desarrollador ya sabe exactamente qué información proporcionará dicha herramienta. Sin embargo, todavía recomiendo usar esta extensión por un tiempo. Bien puede ser que te beneficie.
10. Destaque la etiqueta a juego
A veces, la búsqueda de la parte de cierre de una determinada etiqueta puede convertirse en una tarea difícil. En tales casos, la extensión
Highlight Matching Tag puede ser útil.
Uso de la extensión de etiqueta de coincidencia de resaltado11. vscode-spotify
A veces me aburro con el hecho de que en el proceso de trabajar en VS Code tengo que cambiar constantemente al reproductor de música para cambiar la pista, y luego volver a mi negocio nuevamente.
La
extensión vscode-spotify , que le permite controlar el reproductor Spotify directamente desde VS Code, me ayuda a resolver este problema.
Gracias a esta extensión, puede ver información sobre la canción que se está reproduciendo en la barra de estado del editor. Puede usar las teclas de acceso rápido para cambiar las grabaciones; Spotify también se puede controlar desde el Código VS mediante botones.
12. GraphQL para VSCode
La tecnología GraphQL está creciendo en popularidad, se pueden ver ejemplos de su aplicación en casi todos los rincones del desarrollo de JavaScript. Por lo tanto, es más probable que muchos encuentren útil la extensión
GraphQL para VSCode .
Esta extensión admite resaltado de sintaxis de GraphQL, linting, finalización de código.
Uso mucho Gatsby, así que tengo que leer el código GraphQL todos los días. La extensión GraphQL para VSCode me ayuda con esto.
13. Sangría-Arcoiris
La extensión
Indent-Rainbow es similar a la extensión Highlight Matching Tag descrita anteriormente. Si a veces no le resulta fácil comprender la sangría, esta extensión lo ayudará a resolver el problema al mejorar la legibilidad del código. Aquí hay un ejemplo de su uso.
Usando la Extensión Indent-Rainbow14. Color destacado
Color Highlight es una de esas extensiones que me preguntan: "¿Dónde la encontraste?". Esta extensión ayuda a trabajar con el color. Se ve a continuación.
Uso de la extensión de resaltado de color15. Selector de color
Color Picker es una extensión para VS Code que ofrece al usuario una interfaz gráfica para ayudarlo a elegir colores para usar en CSS.
16. Cliente REST
Cuando tuve la oportunidad de probar la extensión
REST Client por primera vez, no me pareció particularmente útil. No podía soportar la comparación con algo como
Cartero .
Pero gradualmente resultó que esta expansión tiene un gran impacto positivo en mi trabajo. Especialmente cuando necesitaba probar ciertas API.
Al trabajar con él, es suficiente, por ejemplo, crear un nuevo archivo en el que solo habrá una línea:
https:
Para ejecutar la solicitud HTTP GET en esta dirección, simplemente selecciónela, vaya a la barra de comandos (
CTRL + SHIFT + P ) y seleccione el comando
Rest Client: Send Request . Después de eso, se abrirá una nueva pestaña, en la que muy pronto aparecerá información sobre la solicitud y la respuesta. Esto es muy útil
Uso de la extensión de cliente RESTEsta extensión también le permite configurar parámetros o datos para solicitudes POST. Esto se hace con solo un par de líneas de código:
POST https:
Dicha construcción dará lugar a una solicitud POST con los parámetros
{ "email": "someemail@gmail.com", "password": 1 } .
Y esto, de hecho, es solo una descripción extremadamente concisa de las posibilidades de esta extensión.
17. Sincronización de configuraciones
Realmente no me gustó, al configurar un nuevo lugar de trabajo, hacer listas de las extensiones que usé, luego guardarlas en algo como
Evernote , y luego restaurarlas manualmente.
Pude automatizar este proceso usando la extensión de
sincronización de configuración .
Para usarlo, solo necesita tener una cuenta
gist / GitHub . Si es necesario guardar la configuración (esto incluye enlaces de teclado, fragmentos y extensiones, y mucho más), solo use la combinación de teclas
SHIFT + ALT + U Esto cargará todas estas configuraciones en la cuenta general. Sin embargo, estarán disponibles solo para el titular de la cuenta. Para descargar la configuración, por ejemplo, al cambiar a una computadora nueva, simplemente instale esta extensión, ingrese la información de la cuenta general y use la combinación de teclas
SHIFT + ALT + D18. Todo Tree
La extensión
Todo Tree te ayuda a encontrar TODO comentarios en el código de tu proyecto. Prepara estos comentarios en el formato del árbol que se muestra en el lado izquierdo de la pantalla.
Usando la extensión Todo Tree19. Toggle Quotes
Toggle Quotes es una extensión interesante que le permite cambiar la apariencia de las comillas utilizadas en el código. Resulta ser muy útil, por ejemplo, en los casos en que necesita cambiar las comillas regulares a backticks (backticks). Esto puede ser necesario al interpolar cadenas, y puede ser especialmente útil cuando las cadenas de estilo Prettier usan comillas simples regulares.
Uso de la extensión de alternar cotizaciones20. Mejor alineación
La extensión
Better Align le permite alinear el código sin primero resaltarlo.
Para usar esta extensión, debe colocar el cursor en el código que se alineará, abrir la barra de comandos (usando
CTRL + SHIFT + P o el atajo de teclado que asignó para realizar esta tarea) y llamar al comando
Align .
21. Etiqueta de cierre automático
La extensión
Auto Close Tag me ha estado ayudando desde el día en que comencé a trabajar en VS Code. Le permite ingresar algo como
<div> , luego el ícono
/ y luego cierra automáticamente la etiqueta.
Esta función simple y conveniente no está en las características estándar de VS Code, por lo que esta extensión me parece muy útil.
22. Ordenar líneas
No me gustan las matrices cuyos elementos no están en orden alfabético. La extensión
Ordenar líneas me ayuda a lidiar rápidamente con este problema. Si tampoco le gustan tales arreglos, puede ser útil para usted.
23. VSCode Google Translate
Quizás soy la única persona que encuentra útil la extensión
VSCode Google Translate . Pero me ayuda, ya que tengo que participar en el trabajo en proyectos en los que las personas que hablan diferentes idiomas trabajan conmigo. Esta extensión puede ser útil para aquellos que, por traducir algo, no desean colapsar VS Code.
24. Más bonita
Prettier es una extensión para VS Code que puede formatear automáticamente el código escrito en JavaScript, TypeScript y otros idiomas.
25. Tema de icono de material
Me gustan los íconos del paquete
Material Icon Theme más que otros. Usarlos es mucho más fácil de distinguir entre los tipos de archivos. Esto es especialmente cierto para los casos en que se usa un tema oscuro en VS Code.
26. IntelliSense para nombres de clases CSS en HTML
La extensión de nombre largo
IntelliSense para nombres de clase CSS en HTML le permite equipar VS Code con la capacidad de autocompletar
nombres de clase CSS en el atributo de
clase HTML. Su trabajo se basa en las definiciones de clase que se encuentran en su espacio de trabajo.
27. Senda Intellisense
La extensión
Path Intellisense ayuda a completar automáticamente la entrada de nombres de archivo.
Resumen
Esperamos que entre las extensiones para VS Code que acaba de leer, haya algo que le sea útil.
Estimados lectores! ¿Qué extensiones para VS Code agregarías a las discutidas en este artículo?
