¿Conoces las herramientas para personalizar styled-components? Styled-components es una herramienta que nos permite utilizar ES6 y CSS para estilizar nuestras aplicaciones de una manera mucho más fácil. Como toda herramienta en el mundo de la programación, podemos personalizar la forma en la que trabajamos con styled-components para hacer que su código sea más cómodo de leer y utilizar.
En este post, te enseñaremos dos herramientas para personalizar styled-components y, de esta forma, empezar a estilizar tus aplicaciones.
¿Qué es styled-components?
Styled-components es una herramienta que nos permite combinar la potencia del CSS clásico con la sintaxis de JavaScript, lo que nos permite crear líneas de código como props.variant === ‘primary’ accentColor: ‘white’.
Esta herramienta se utiliza especialmente en React, la librería de JavaScript que permite crear interfaces de usuario en el proceso de desarrollar aplicaciones de una sola página o SPA o single page application.
Además, para conocer más sobre styled-components y su uso en React, te invitamos a explorar nuestro blog de desarrollo web, donde encontrarás una gran variedad de posts al respecto.
Herramientas para personalizar styled-components
A continuación, te detallamos dos herramientas para personalizar styled-components:
vscode-styled-components
Como has podido leer en nuestro post sobre cómo utilizar Prettier en Visual Studio Code, en el mundo de la programación existen diversas extensiones que nos permiten hacer que nuestro código sea más legible y que su jerarquía y lógica se mejoren de manera automática. Una de las herramientas para personalizar styled-components que te traemos en este post hace precisamente eso.
La extensión vscode-style-components es una herramienta que podrás encontrar e instalar en Visual Studio Code. Con ella, verás que las propiedades de estilo que nos inserta styled-components serán más legibles, pues han sido cambiadas de color. Por tanto, también notarás que las claves tienen un color distinto a los valores. Del mismo modo, los elementos que tienen que ver con JavaScript tendrán un color diferente, así como lo tendrán los strings y los métodos.
Con la extensión vscode-styled-components también podrás hacer que el software te sugiera las opciones de comandos según lo que estás escribiendo. Es decir, tendrás acceso al autocompletado de las propiedades de estilo de styled-components. Del mismo modo, podrás acceder al autocompletado de los valores de estas propiedades. Esto quiere decir que si escribes, por ejemplo, align-self, basta con escribir f para que te aparezcan las opciones de valor flex-end y flex-start.
Fira code con ligaduras
La segunda de las herramientas para personalizar styled-components es realmente muy útil para cualquier línea de código que escribas en Visual Studio Code. ¿Has notado que los símbolos como === o => en algunos tutoriales se ven más como un único símbolo en vez de como una cadena? Puede parecer complejo lograr ese look en tu código, pero en realidad es un tipo de fuente con ligaduras.
Para darle esta apariencia a tus líneas de código, solo debes definir la fuente Fira Code como fuente de editor en tu archivo settings.JSON. Allí, además, deberás definir la propiedad prettier.singleQuote como true, lo que hará que tengas las ligaduras que te dan este estilo. Si defines este valor como false, verás que el símbolo se separa y se ve como una cadena en vez de una sola línea.
¿Qué sigue?
Con las 2 herramientas para personalizar styled-components que has aprendiendo en este post, ¡ya puedes empezar a estilizar tus proyectos en React! Para aprender más sobre el desarrollo de proyectos de programación para la web, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás herramientas y lenguajes como JavaScript, React, HTML y CSS. ¿A qué esperas para empezar a crear tus propios proyectos? ¡Inscríbete ya y conviértete en un verdadero experto!
