¿El código de Visual Studio puede hacer eso?

 

 

 

  • ¡Registro!
  • Anuncie en la revista Smashing

  • Índice
    1. Zona de juegos interactiva
    2. Ligaduras de fuentes
    3. Asignaciones de teclado
    4. Sincronización de configuración
    5. Hormiga
    6. Intellisense In JSON Files
    7. Type Check Your JavaScript
    8. Prettier
    9. Terminal Access
    10. Live Share
    11. Git Integration
    12. Zero Configuration Node.js Run And Debug
    13. Column Breakpoints
    14. Build, Run, Debug and Deploy Docker
    15. Compound Launch Configurations
      1. MongoDB Administration
      2. Deploying Apps
      3. Yes, VS Code Can Do That
      4. Additional Resources

    ¿Por qué Visual Studio Code (VS Code) es tan popular? ¿Realmente necesitamos otro editor de texto? En este artículo, veremos cómo VS Code amplía los conceptos tradicionales de los editores de texto y abre vías de productividad completamente nuevas para los desarrolladores. Estas son las mejores cosas de VS Code que nadie se molestó en contarte.

     

    Hace unos dos años, abrí Visual Studio Code (VS Code) por primera vez a regañadientes. La única razón por la que lo hice es que estaba trabajando en un proyecto de TypeScript (también a regañadientes) y estaba cansado de pelear con el editor y el compilador y todas las configuraciones que necesitaba para que un proyecto de TypeScript funcionara. Alguien me mencionó que TypeScript "simplemente funciona" en VS Code y me sorprendió gratamente descubrir que tenían razón.

    Aunque esperaba eso. VS Code es de Microsoft, por lo que se espera que TypeScript funcione. Lo que no esperaba era que prácticamente todo lo que necesitaba hacer en VS Code "funcionara" también. Y me refiero a cualquier cosa . Si bien este artículo se centra principalmente en funciones para la web y para desarrolladores de JavaScript, VS Code tiene integraciones con Go, Python, Java y Ruby, solo por nombrar algunos.

    Durante los meses siguientes, comencé a descubrir cosas en VS Code que me parecieron notables. Hice el cambio oficial a VS Code y no he vuelto a mirar atrás desde entonces. A lo largo de los meses, he estado compilando una lista de mis consejos, trucos y extensiones favoritos para VS Code que podrían dejarte con la misma reacción que tuve y sigo teniendo: "¿VS Code puede hacer eso?"

    De aplicaciones web a aplicaciones de escritorio

    ¿Sabías que puedes agregar "desarrollador de aplicaciones de escritorio" a tu currículum con un poco más de esfuerzo? Todo lo que necesita hacer es revisar la documentación de la API y crear su primera aplicación de escritorio moderna.Leer un artículo relacionado →

    Zona de juegos interactiva

    Una de las mejores maneras de aprender los entresijos de VS Code es a través del Interactive Playground.

    Esta es una página especial que analiza conceptos y atajos de teclado comunes, como cursores múltiples, paneles divididos y atajos de teclado. Cada uno de los ejemplos es interactivo para que pueda practicar los tutoriales directamente dentro de los propios tutoriales.

    El tutorial interactivo se encuentra justo en la página de "Bienvenida" cuando se abre el editor por primera vez:

    La sección Interactive Playground en la página de bienvenida de VS Code.

    Mucha gente (incluyéndome a mí) lo pasa por alto por completo porque está debajo del "pliegue" y hacia la parte inferior de la página. Además, ¿quién lee las pantallas de bienvenida?

    Nota : Puede volver al Tutorial interactivo en cualquier momento abriendo la paleta de comandos de VS Code Ctrl/Cmd + Shift + Py seleccionando "Interactive Playground".

    Ahora que domina los conceptos básicos, necesitará una fuente que sea tan hermosa como el código que está a punto de escribir. Para eso, no busque más que FiraCode y Font Ligatures.

    Ligaduras de fuentes

    Las ligaduras de fuentes son fuentes que contienen caracteres especiales que se utilizan para representar símbolos que constan de más de un carácter. Tenemos muchos de estos en programación. Estos serían personajes como =, y .======

    FiraCode es una hermosa ligadura de fuentes para VS Code. Primero, descargue la fuente FiraCode de GitHub y agréguela a las fuentes de su máquina. Luego agregue las siguientes líneas a su archivo de Preferencias de usuario Ctrl/Cmd + ,.

    "editor.fontFamily": "Fira Code", "editor.fontLigatures": true

    Pruebe algunos de los caracteres especiales que mencioné anteriormente para ver la diferencia. Las ligaduras de fuentes aparecen en lugares que normalmente no esperarías. Lugares como www y . ¡Adelante, pruébalo y mira lo que descubres!

    Ahora que tiene una agradable ligadura de fuentes y algunos símbolos nuevos y encantadores, es hora de aprovechar esa memoria muscular que ha desarrollado a lo largo de los años en editores anteriores instalando una asignación de teclado.

    Asignaciones de teclado

    Parte de mis dudas al cambiar a VS Code fue que había invertido cierta frustración y esfuerzo para aprender los atajos de teclado de Sublime Text. También estaba un poco orgulloso de mi destreza con el teclado y no estaba del todo dispuesto a renunciar a eso.

    Afortunadamente, no tuve que hacerlo.

    VS Code tiene algo llamado Keymaps . Estas son extensiones que asignan todos sus accesos directos (bueno, casi todos) a otros editores. ¡Hay mapas de teclas para todos los editores populares, incluidos Sublime, Atom, Emacs e incluso Eclipse!

    Para instalar un mapa de teclas, abra la barra de búsqueda de extensiones presionando Ctrl/Cmd+ K → Ctrl/ Cmd + X. Luego busque "mapa de teclas".

    Extensión de mapa de teclas sublime para VS Code.

    Debo señalar que desde entonces eliminé el mapa de teclas Sublime. Después de un uso suficiente, pude volver a cablear mi cerebro para utilizar los atajos de VS Code tal como salen de la caja. Piense en los mapas de teclas como ruedas de entrenamiento: son una buena idea cuando recién está comenzando, pero en algún momento probablemente quiera quitárselos.

    Ahora bien, si eres como yo, tienes varias computadoras y puedes editar en diferentes lugares según el proyecto y el día. Ya hemos realizado muchos cambios en nuestra configuración de VS Code y vamos a hacer muchos más. No queremos repetir esta configuración en todos los lugares donde usamos VS Code. Ahí es donde entra en juego la extensión Settings Sync.

    Sincronización de configuración

    Con la extensión Settings Sync , puede exportar todas sus configuraciones de VS Code a un Gist y luego extraerlas todas de otra instalación de VS Code y aplicarlas inmediatamente.

    Esta también es una buena manera de compartir su configuración con colegas. Simplemente envíeles la ID a su Gist y podrán sincronizar todas sus configuraciones con su instalación. Algunas tiendas mantienen una esencia central y todos los nuevos desarrolladores del equipo pueden obtener la configuración exacta con un simple comando. ¡Eso es productividad!

    Y hablando de productividad, vayamos directamente a una de mis herramientas de productividad favoritas para desarrolladores web: Emmet.

    Hormiga

    Emmet es una popular herramienta de expansión para marcado y CSS que existe desde hace bastante tiempo. Sin embargo, casi todos los días conozco gente que no ha oído hablar de él o que son nuevos en el desarrollo y recién están aprendiendo sobre él. ¡Está bien! Todos estamos aprendiendo cosas diferentes en momentos diferentes.

    Emmet está integrado en VS Code, por lo que no se requiere ningún esfuerzo adicional para ponerlo en funcionamiento. Simplemente comience a escribir su sintaxis de Emmet en un archivo HTML o CSS y deje que el editor haga el resto. De forma predeterminada, VS Code incluso le mostrará una vista previa de la próxima expansión de Emmet.

    VS Code muestra una vista previa de la próxima expansión de Emmet.

    Un buen truco para usar con Emmet es asignar un método abreviado de teclado ( Ctrl/Cmd+ K → Ctr/Cmd + Sabre asignaciones de teclado) al comando "Ajustar líneas individuales con abreviatura". Esto es similar al antiguo "Ajustar selección como enlace" de Textmate, pero con el beneficio adicional de poder ajustar varias líneas a la vez con una expansión más compleja.

     

    Emmet también se puede utilizar en rebajas, JSX y .vuearchivos. Para habilitarlos, agregue la asignación de idioma correcta a su archivo de Preferencias de usuario Ctrl/Cmd + ,.

    "emmet.includeLanguages": { "javascript": "javascriptreact", "markdown": "html" },

    En el caso de JSX, Emmet es lo suficientemente inteligente como para usar className en lugar de class dentro de la expansión.

    Otra característica interesante de Emmet que era nueva para mí es la capacidad de Emmet de proporcionar automáticamente el ancho y alto de la imagen con solo mirar el archivo de imagen vinculado en src . Esto funciona en HTML y CSS. También funciona tanto con imágenes alojadas localmente en el proyecto como con imágenes en otras URL. Para utilizar esta función, coloque el cursor en la etiqueta de su imagen, abra la paleta de comandos Ctrl/Cmd + Shift + Py seleccione "Actualizar tamaño de imagen". ¡Magia!

    Para profundizar en qué es Emmet y todas las diferentes formas de usarlo en VS Code, consulte este artículo de Trucos CSS.

    While Emmet takes care of productivity in markup and CSS, VS Code itself provides code completion in the form of intellisense; and it works in places that you might not expect.

    Intellisense In JSON Files

    Intellisense is a rather well-known editor feature but is primarily thought of only inside of code files. VS Code extends the classical definition of intellisense and adds it to JSON files as well. You will see this if you add any settings to your User Preferences file. VS Code provides intellisense for package.json files as well. What’s even more impressive is that it provides intellisense to npm packages inside of the package.json. Need a specific package and don’t remember the version? No problem! VS Code will look at npm and return the most recent version in the intellisense.

    Some people have remarked that they don’t hand edit their package.json file. However, I find myself doing it from time to time for some odd reason or another, and having to look up the package version was always a giant pain for me. Now it’s just provided to me by VS Code. One less thing I have to guess at. Korean Beauty

    Even with Intellisense, this is JavaScript, so unless we’re super brave (or addicted to suffering), we’re going to need a linter. VS Code has great ESLint integration via the ESLint extension, but there are another options, and it involves type checking your untyped JavaScript.

    Type Check Your JavaScript

    Remember that great TypeScript integration I told you about earlier? One of the little-known tricks is that you can use the TypeScript compiler to check plain JavaScript files as well. You do this by adding a //@ts-check to the top of any JavaScript file, and you will immediately get TypeScript error checking on the file.

    You wouldn’t want to add that line to each and every file, so you can use TypeScript to check every single JavaScript file in your project by adding the following line to your User Preferences file Ctrl/Cmd + ,.

     

    "javascript.implicitProjectConfig.checkJs": true

    If you want to control specific checking features of TypeScript, just drop a .tsconfig file in your project. When I say TypeScript “just works” in VS Code, I mean it works so well that it’s almost seamless to the developer.

    Now that you have code linting and even type checking when you need it, it’s time to let VS Code handle those pesky formatting issues using Prettier.

    Prettier

    Prettier is a wonderful open-source code formatting tool. It is widely used by teams (and individuals) to make sure that coding styles are universal across projects and developers. It automatically reformats your code to match some defined standards, such as which column to wrap code on, how to format promises and whether to use single or double quotes.

    Prettier is enabled in VS Code with the Prettier Extension. To install it, open the Extensions panel Ctrl/Cmd + KCtrl/Cmd + X and search for “prettier”.

    Once installed, you will see Prettier in the taskbar for any file that Prettier knows how to format. You can invoke Prettier on the file by using the “Format Document” command: Alt/Option + Shift + F.

    A neat trick here (and shown in the above video) is to set VS Code to auto-format on save. This will invoke Prettier whenever the file is saved. To get this functionality, add the following settings to your User Preferences file (Ctrl/Cmd).

    "editor.formatOnSave": true

    Prettier settings can also be tweaked from the User Preferences file. If you would like Prettier to use your ESLint config for settings, just specify the “eslintIntegration” setting.

    "prettier.singleQuote": true, "prettier.eslintIntegration": true, "prettier.tabWidth": 2

    Look at how pretty your code is now! Beautiful. You’ll never want to leave your editor again. Thanks to the terminal options in VS Code, you might not ever have to!

    Terminal Access

    You may have noticed from the video above that VS Code has an integrated terminal. You can launch it by pressing Ctrl + , . Multiple terminal sessions can be opened and will appear in the dropdown list at the top right of the terminal window.

    I have had a hard time breaking my habit on the built-in terminal on Mac. You can open the external terminal at any time from VS Code in the exact location of the file you are currently viewing by using the keyboard shortcut Ctrl/Cmd + Shift + C.

    Silly terminal tricks aside, one of the most important things that a developer can do to increase their productivity is to simply collaborate with other developers. We do this all the time. Some of us are lucky enough to sit next to each other. Some of us do it via Skype. No matter how you pair program, VS Code has just added a feature that is likely going to change the way you think about how you collaborate.

    Live Share

    VS Code Live Share was just announced this past week at Microsoft Connect. It allows multiple developers to pair on a project instantly. It’s not necessary to check code into a repo or fire up a screen sharing tool. Other developers can load up your project in their editor immediately and see your cursor in real time without having to configure anything on their end.

     

    This also works for debugging. If you start a debug session, the other person gets the same full debug experience right inside of their editor. They can even control the debug process by stepping in, out and over the code. If the other person changes your code, it changes in your editor as well.This is really hard to wrap your head around until you see it in action. I highly recommend watching this short demo. I’m still not sure how we’ve made it this long as developers without a feature like this.

    At the time of this writing, VS Code Live share is in preview, but will likely be generally available by the time you read this. In fact, you might already be using it!

    Now that your co-workers have successfully fixed all your bugs (hooray for collaboration!), it’s time to check all of it into GitHub. One of my favorite features of VS Code is that the Git integration is so good, that even I can use Github.

    Git Integration

    I also have a hard time with Git on the terminal because it is a black box. You’re flying blind outside of your editor with only your terminal skills and knowledge of the Git CLI to get you through. That may be enough of some folks, but I have come to rely heavily on the visual Git integration that is provided with VS Code.

    VS Code automatically picks up any Git configuration in your project. There is an entire tab dedicated just to Git options. Out of the box, VS Code supports adding, committing and pushing, branching, stashing and popping, amongst a host of other options. When viewing files in the Git tab, you get a side-by-side comparison between the original and the diff. You can also now view diff’s directly inline in a code file and can even revert from there as well.

    So far we’ve focused heavily on text editing itself, but VS Code is remarkably suited to some much heavier lifting; the kind of things that we normally expect from an Integrated Development Environment (IDE), not a text editor. Here are some of my favorites.

    Zero Configuration Node.js Run And Debug

    VS Code will run and attach a debugger to any JavaScript code without any extensions or configuration whatsoever. Simply press the F5 key and select “Node” from the dropdown list. You can also switch to the debug tab Ctrl/Cmd + Shift + D and click the green arrow button up top. This will launch your application and attach the debugger providing a full-featured debug experience.

    Column Breakpoints

    VS Code also supports inline or column breakpoints. This is when you set a breakpoint in the middle of a line of code. This is particularly useful for debugging promise chains, and any other places where you multiple functions on one line.

    Just right-click during a debug session and choose “Add Column Breakpoint.”

    Set column breakpoints to break inside single lines of code.

    Build, Run, Debug and Deploy Docker

    Microsoft provides a Docker extension for VS Code that will allow you to perform virtually all of your Docker actions in VS Code. In fact, VS Code will automatically create the requisite Docker files for your project (as best it can) based on which runtime you pick and your project structure. For straightforward Node.js apps, this means a zero-configuration Docker setup.

     

    In this example, I take an Express application and use VS Code to create all of the Docker and Docker compose files. VS Code also creates the proper debug configuration so after I run the image I can attach the VS Code debugger and everything simply works. The extension also enables publishing of your image to either Docker Hub or Azure Container Registry.

    Compound Launch Configurations

    While build tools such as Webpack have entirely changed the way we build applications, they have also introduced new development challenges that didn’t exist before. Webpack uses its own in-memory development server to provide “hot reloads,” but when you move to production, Webpack is out of the equation, and your server takes over.

    Basically, it’s now necessary to run as two separate projects in development and one project in production. This means that we typically debug front-end applications in the browser with the Chrome DevTools and the server portion in our text editor.

    VS Code has the ability to launch multiple processes and attach debuggers to both of them from a single launch command. This means that it’s possible to debug front-end JavaScript code and server-side Node.js code right from within VS Code.

    This is called a “Compound Launch Configuration.” In the video above, I use the following code to debug an application that uses Express/Cosmos DB for the backend and React for the front end.

    { "compounds": [ { "name": "Launch Browser/Server", "configurations": ["Launch Browser", "Launch Server"] } ], "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Browser", "url": "https://localhost:3000", "webRoot": "${workspaceRoot}/src" }, { "type": "node", "request": "launch", "name": "Launch Server", "program": "${workspaceRoot}/server/server.js" } ] }

    Note that this requires the Chrome Debugger Extension to be installed. MongoDB Administration

    MongoDB Administration

    VS Code can help you visually administer and query any MongoDB or Cosmos DB database (local or remote) using the Cosmos DB Extension.

    The Cosmos DB extension will connect to any existing Cosmos DB instances in Azure, but it will also connect to any MongoDB instance that is accessible with a mongodb:// URL.

    You can create and drop databases and collections in the sidebar, as well as create and work with MongoDB Scrapbooks to test your queries. VS Code provides full intellisense to collections and the MongoDB API in Mongo Scrapbooks. You can even change the result of your query in the results pane and the changes will be persisted back to the database.

    Deploying Apps

    Another neat extension for VS Code is the Azure AppService extension. If you want to deploy your apps to the cloud, you can do that without ever leaving the editor.

    Microsoft provides an extension called AppService Tools for VS Code that will let you create new sites, manage existing ones and deploy your code either with a right-click or a pre-built shell script which automates the process of checking your code into the right Git endpoint to setup continuous delivery.

    Yes, VS Code Can Do That

    By now you have probably caught on to the theme that there is really nothing that VS Code cannot do. If you want a certain piece of functionality, it’s highly likely that either the editor already supports it (we didn’t even touch on the Git integration) or someone has created an extension for whatever your specific use case might be. Even if that’s turning Markdown into Reveal.js presentations!

    Additional Resources

    • “VS Code Insiders Build,” Visual Studio Code, Microsoft
    • “VS Code Awesome List,” Valerii Iatsko, GitHub
    • “ Consejos y trucos de VS Code ”, Valerii Iatsko, GitHub

    (da, ra, il)Explora más en

    • javascript
    • Herramientas





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    ¿El código de Visual Studio puede hacer eso?

    ¿El código de Visual Studio puede hacer eso?

    ¡Registro! Anuncie en la revista Smashing Índice Zona de juegos interactiva

    programar

    es

    https://aprendeprogramando.es/static/images/programar-el-codigo-de-visual-studio-puede-hacer-esoja-928-0.jpg

    2024-05-20

     

    ¿El código de Visual Studio puede hacer eso?
    ¿El código de Visual Studio puede hacer eso?

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20