Share
Visual Studio Code es uno de los niños más nuevos en el "bloque" de IDE y está haciendo mucho ruido. Tomar un poco de tiempo para ganar tracción, tal vez porque es uno de los pocos productos de código abierto de Microsoft, pero se ha tomado la comunidad de código abierto por asalto. Los desarrolladores que una vez juraron su lealtad a Sublime Text 3 y Atom se están convirtiendo lentamente por el poder y la simplicidad de VS Code, sin mencionar su increíble biblioteca de extensiones..
Comencé mi propia vida de codificación en Sublime Text 3, me mudé a Atom, luego a PHPStorm, luego, después de que mi suscripción expirara con JetBrains, pensé en probar el Código VS. Sigue haciendo mi vida más fácil y, al hacerlo, me convierte en un mejor desarrollador..
Esta introducción lo llevará de cero a héroe, lo pondrá en funcionamiento con VS Code, centrándose específicamente en mis extensiones de desarrollo de aplicaciones para usuario favoritas, asegurándose de que todos los aspectos de su flujo de trabajo estén cubiertos.
Voy a asumir algunos puntos para este artículo:
Lo primero es lo primero, si aún no tiene instalado VS Code, diríjase al sitio web de Visual Studio Code. VS Code es multiplataforma, por lo que nuestras configuraciones funcionarán en Windows, Mac y Linux.
VS Code también está disponible como paquete Homebrew Cask en Mac: brew cask install visual-studio-code
Un paso que encuentro que muchos tutoriales suelen omitir es la capacidad de ejecutar código VS desde el terminal. Hay algunas maneras de hacer esto. Si ya tiene una configuración .bash_profile puede agregar esto:
export PATH = "$ PATH: / Applications / Visual Studio Code.app/Contents/Resources/app/bin"
O, para un enfoque más multiplataforma, presione el atajo de Command Palette: Mayús + Comando + P y escribe la palabra cáscara - Esto te dará una opción llamada: Instalar el comando de código en PATH - pulsa enter y ya está. Ahora, puede iniciar archivos y carpetas en cualquier lugar desde el terminal escribiendo: ruta del código / a / archivo / o / dir
Lint su código: es la mejor manera de detener los errores antes de que le causen un estrés excesivo!
Si está ejecutando la última versión de ECMA Script, entonces ESLint es para usted. Esta extensión integra el reconocedor de patrones ESLint directamente en VS Code y lo ayuda con los errores comunes que los desarrolladores cometen con la nueva sintaxis. Requiere que tenga el paquete NPM ESLint instalado localmente en su proyecto o globalmente.
Para aquellos de ustedes que disfrutan escribiendo Sass más programático, Sass Lint le proporciona un conjunto de configuraciones fácil de usar para escribir Sass que cumple con los estándares.
JS Hint es otro gran Linter de JavaScript que lo ayuda con la lógica, la sintaxis y más, según su configuración..
Si eres un fan de TypeScript, entonces la extensión TSLint es tu mejor amigo. Dado que TypeScript es un lenguaje precompilado, tiene control total sobre lo que el compilador hace para usted, así como las opciones de formato automático..
Todas estas extensiones ofrecen formas amigables con Git de administrar configuraciones personalizadas / compartidas entre los desarrolladores de su equipo, especialmente en .eslintrc y .sass-lint.yml o .jshintrc
He dejado a propósito nuestros Linters HTML aquí. Mientras que usaré una extensión como Beautify para formatear y tabular mi HTML de acuerdo a una .editorconfig Encuentro que los Linters HTML funcionan bastante mal. No consideran la semántica y tienden a hacer un mal trabajo para ayudarlo con sus inquietudes de accesibilidad. Como el significado de HTML puede ser relativamente ambiguo, es mejor usar un conjunto de herramientas que hagan trabajos más pequeños.
Para ampliar la funcionalidad HTML en VS Code, uso lo siguiente:
Se podría mejorar un poco, pero siempre me gustó la funcionalidad de la etiqueta de cierre automático de Sublime Text 3. La extensión mencionada anteriormente le ayudará con esto en el Código VS.
Esta es otra extensión HTML útil que permite a los usuarios hacer clic dentro de un elemento HTML y cambiar su nombre, mientras que al mismo tiempo cambian el nombre de la etiqueta de cierre.
Me alejé de Grunt hace algún tiempo, pero casualmente no parece haber ninguna extensión de Grunt en el mercado, al menos no con suficiente tracción como para causar un gran impacto. Las extensiones a continuación se centran principalmente en Gulp y Webpack, ya que parecen estar liderando la carrera en el mundo de la gestión de tareas en este momento..
Esta extensión le permite usar la paleta de comandos en el código VS para inyectar fácilmente configuraciones útiles de Gulp en su Gulpfile.js; A debe tener si todavía estás un poco tembloroso acerca de la configuración de Gulp.
La configuración de Webpack puede ser una de las tareas más temibles que un desarrollador debe realizar. La extensión Webpack para VS Code le quita el miedo al proporcionarle un mínimo webpack.config.js para comenzar su proyecto. Si eres una persona del progreso, y no te gusta que te dejen en la oscuridad mientras tu Terminal piensa en las cosas, entonces la extensión Webpack Progress es para ti. Proporciona una barra de progreso agradable para cuando Webpack está haciendo su trabajo..
Una de las extensiones más poderosas para el control de versiones en VS Code es:
Tanto para los recién llegados como para los usuarios avanzados, Git Lens es una fuente inagotable. Hace que sea fácil hacer que Git y sus múltiples complejidades sean más manejables y visuales. He disfrutado tanto con el uso que, aparte de usar el Terminal para agregar, cometer, bifurcar y empujar, he eliminado completamente las GUI de Git..
Casi todos los ajustes son personalizables. Git Lens proporciona información en tiempo real de los datos de Git mientras estás codificando. ¿Quieres saber quién escribió esa función que no funciona? ¿Quieres ver cuánto ha cambiado el código en las últimas confirmaciones? ¿No está seguro de cómo manejar un conflicto de combinación en un archivo que nunca escribió o tiene poco contexto? Git Lens maneja todo esto por ti.
En la medida en que otros IDE tienen soporte completo para la mayoría de los idiomas, VS Code lo deja a usted en su mayor parte. Cuando lo necesite, puede agregar Soporte de idioma para cualquier tecnología con la que esté trabajando, se proporcionan HTML y CSS listos para usar, así como JavaScript, pero si necesita Python es solo un clic lejos. En mi flujo de trabajo utilizo Python de vez en cuando, pero Node fue muy importante para mí.
Intellisense esencialmente se encarga de las terminaciones. Puede pulsar la pestaña o desplazarse sobre una ruta de archivo, por ejemplo, y VS Code hará el trabajo duro por usted.
Si usted es una de esas personas que ama usar las nuevas tecnologías en su flujo de trabajo y está loco por la nueva edición de JavaScript, entonces la guía Babel ES6 / ES7 es para usted..
Esta es una extensión brillante que autocompleta / sugiere rutas de archivos mientras escribe. Si viene de un fondo PHPStorm, sabrá la sensación!
Una gran extensión al usar exigir() o importar en Node.js, esta extensión autocompleta las rutas de los archivos a los módulos de nodo.
Esta es una extensión muy útil para completar automáticamente los nombres de clase CSS definidos en sus archivos CSS vinculados. Si eres un Bootstrap, Foundation o solo un fan del framework en general, esto te ahorrará mucho tiempo.!
Para los fanáticos de CSS precompilados, esta extensión hace posible la inteligencia para importaciones, mezclas, inclusiones y funciones en SCSS.
Si aún no te has topado con PostCSS, te estás perdiendo. Es un conjunto de complementos avanzados y extremadamente avanzados para CSS que hace que CSS sea mucho más potente. Yo uso dos extensiones PostCSS: Sintaxis y Clasificación; uno habilita el soporte de sintaxis para nuevos módulos de nivel 4 de CSS como el anidamiento y el otro me permite ordenar las propiedades de CSS alfabéticamente.
Si bien en realidad no solo Intellisense, esta es una gran extensión para el desarrollo de Vue.js. Es una solución todo en uno para agregar linting, intellisense y formatear al desarrollo de Vue.js y ya incluye algunas de las extensiones que he mencionado anteriormente..
Esta es una solución completa para desarrollar aplicaciones React Native. Por defecto, VSCode tiene un montón de soporte integrado para React.
Pasas mucho tiempo frente a tu IDE, así que asegurarte de que sea fácil para los ojos y legible es tan importante como cualquier otro aspecto que mencioné.
Primero, obtenga algunos íconos de carpeta / archivo para que pueda distinguir fácilmente los archivos que está usando.
Cobalt 2 no es demasiado oscuro ni demasiado claro, y tiene un gran contraste para un tema editor. También tiene una configuración de color correspondiente para los terminales ZSH..
Si no has oído hablar de Dash, debería ser tu nuevo mejor amigo. Dash es una aplicación de documentación de API para Mac, pero esta extensión se conecta directamente a VS Code. Al hacer clic en cualquier método, se abrirá Dash a la página correspondiente. El mismo complemento es compatible con Zeal, que es una alternativa de Windows y Linux..
Como mencioné anteriormente, la extensión Beautify es una gran herramienta si está convencido del formato de código y la estandarización del editor. También le permite establecer una .jsbeautifyrc Archivo que puedes enviar a los repositorios de Git para la colaboración. Beautify también puede ser usado como un reemplazo para .editorconfig Si no lo apoyas. Embellecer formatos JS, CSS, Sass, JSON y HTML.
Cada vez más IDE proporcionan soporte para EditorConfig, lo que le permite incluir un .editorconfig en tus proyectos repos. Esto le permite a sus compañeros desarrolladores IDE y linters leer de un archivo para estandarizar las tabulaciones y el espaciado, así como el final de línea en todos los proyectos.
Para una solución más robusta, pruebe Prettier. Prettier sigue el mismo paradigma de configuración que ESLint, proporcionándole una .más bonito Archivo que se comprometerá a los repositorios. También se leerá del .editorconfig archivo si existe. De hecho, puede deshacerse de ESLint y Sass Lint y usar Prettier como su solución integral. Tiene sus propias extensiones para EsLint, StyleLint y más.
Recientemente me mudé a ZSH, que ha transformado completamente mi experiencia de terminal. Si bien no es una extensión directa de VS Code, se puede integrar a través del panel Terminal. Tuve que hacer bastante configuración para que funcionara en Mac, especialmente con colores y temas.
ZSH presenta funciones como la finalización de pestañas para directorios, archivos, sucursales de Git y más. Puede leer más sobre la configuración de ZSH en el repositorio de Github o dejarme un mensaje en los comentarios a continuación si desea obtener más información..
Visual Studio Code viene con la depuración de JavaScript de inmediato. Puedes ir un paso más allá usando las siguientes extensiones:
Esta extensión permite una sincronización directa entre VS Code Debugger y Chrome Developer Tools, lo que le permite establecer puntos de interrupción y saltar directamente al código..
De eso se trata la configuración de mi extensión para Visual Studio Code, ¿cuáles son tus favoritos personales? Antes de irme, no olvides que la codificación debería ser divertida; Es posible que necesites algunas melodías para ayudarte. La extensión de Spotify agrega un pequeño reproductor multimedia en línea a la interfaz de usuario de VS Code.
Accentsconagua