0
300
Vistas¿Cómo escribir CSS / SCSS / PostCSS dentro del archivo React .tsx como cadena de JavaScript en VSCode y WebStorm?
Estoy tratando de configurar una nueva autoconvención para que mi código React esté mejor organizado de la siguiente manera:
export default function HeaderExample() { const compStyle = getStyle(); return ( <> <h1>Hello World</h1> <style jsx>{compStyle}</style> </> ) } function getStyle() { return ` h1 { color: blue; } ` } Funciona bien, pero escribir el retorno en getStyle() es bastante difícil porque no obtengo ayuda para formatear o resaltar la sintaxis del IDE.
¿Cómo puedo obtener esos? Complemento/Biblioteca/Configuración/Dándole un tipo? Cualquiera de esos ayudará.
Y al mismo tiempo, ¿crees que esto puede causar algún problema en el futuro?
2 Respuestas
Responde la pregunta0
En vscode puede usar la extensión ES6 String css vscode
Simplemente agregue /*css*/ antes de ` así
function getStyle() { return /*css*/` h1 { color: blue; } ` }0
WebStorm tiene una característica incorporada Language Injection . para eso.
Aquí encontrará documentación detallada de esa función.
Version corta.
- Coloque el cursor en el bloque de código correspondiente y haga clic en
alt + enter.
- En el menú desplegable, seleccione
Inject language or reference. Sin hacer clic a la derecha, haga clicenterde nuevo.
- Debería abrirse una ventana, ahora seleccione el idioma que desea inyectar. Si selecciona
CSS, el resultado debería ser:
Para responder a tu segunda pregunta. No debería causar ningún problema en el camino.
editar adición:
Es posible activar el mismo comportamiento con un comentario laguange=css
