es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo configurar stylelint para react native y StyleSheet

02 Aug, 2023 Programación

¿Alguien sabe cómo configurar stylelint para React Native (con TypeScript) y StyleSheet?

src/sample.tsx

import React from “react”;
import { StyleSheet, Text, View } from “react-native”;

const App = () => (

React Native

);

const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
backgroundColor: “#eaeaea”
},
title: {
marginTop: 16,
paddingVertical: 8,
borderWidth: 4,
borderColor: “#20232a”,
borderRadius: 6,
backgroundColor: “#61dafb”,
color: “#20232a”,
textAlign: “center”,
fontSize: 30,
fontWeight: “bold”
},
example: {
unknown: “property”
}
});

export default App;

.stylelintrc.js

module.exports = {
“plugins”: [“stylelint-react-native”],
“rules”: {
“react-native/css-property-no-unknown”: true
}
}

Cuando ejecuto “stylelint ‘/src/*.tsx'”, obtengo un error que dice “necesitas usar postcss”. Bueno, encontré el paquete “@stylelint/postcss-css-in-js”, pero no importa cómo lo conecte, nada funciona.

En el mejor de los casos, el comando se ejecuta sin errores, aunque agregué una propiedad que no existe.

PD. Versión de stylelint – 14, versión de React Native – 0.66.4

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que estás encontrando un problema al configurar stylelint para React Native utilizando TypeScript y StyleSheet. Ya has instalado el paquete @stylelint/postcss-css-in-js, pero aún no puedes hacer que funcione.

    Una solución a este problema es agregar el siguiente código al principio de tu archivo .stylelintrc.js:

    const customStyleValueParsing = require('postcss-custom-property-value-parser');

module.exports = {
  "plugins": [
    "stylelint-react-native",
    "stylelint-order",
    "stylelint-config-rational-order/plugin",
    "stylelint-declaration-block-no-ignored-properties"
  ],
  "extends": [
    "@react-native-community",
    "stylelint-config-rational-order",
    "stylelint-config-prettier"
  ],
  "rules": {
    "custom-property-empty-line-before": null,
    "no-empty-source": null,
    "order/properties-order": ["position", "top", "right", "bottom", "left", "z-index", "display"],
    "max-nesting-depth": 2,
    "react-native/no-unused-styles": 1,
    "react-native/split-platform-components": 0,
    "declaration-block-no-redundant-longhand-properties": true,
    "declaration-no-important": true,
    "declaration-property-value-disallowed-list": {
      "/^border/": ["none"],
      "z-index": [0]
    },
    "color-hex-case": "lower",
    "value-keyword-case": "lower",
    "keyframe-declaration-no-important": true,
    "selector-type-case": "lower",
    "declaration-block-single-line-max-declarations": 1,
    "declaration-colon-space-after": "always",
    "declaration-block-trailing-semicolon": "always",
    "declaration-block-no-duplicate-properties": true,
    "declaration-block-no-redundant-longhand-properties": true,
    "declaration-block-no-shorthand-property-overrides": true,
    "declaration-block-semicolon-newline-after": "always",
    "font-weight-notation": "numeric",
    "plugin/rational-order": [
      true,
      {
        "border-in-box-model": false,
        "empty-line-between-groups": false
      }
    ],
    "plugin/declaration-block-no-ignored-properties": true,
    "property-no-unknown": [
      true,
      {
        "ignoreProperties": [
          "^-",
          "^z-index$"
        ]
      }
    ],
    "at-rule-no-unknown": null,
    "selector-pseudo-element-no-unknown": [
      true,
      {
        "ignorePseudoElements": [
          "v-deep"
        ]
      }
    ],
    "color-no-invalid-hex": true,
    "declaration-block-no-shorthand-property-overrides": true,
    "custom-property-no-outside-root": true,
    "custom-property-pattern": null,
    "declaration-block-properties-order": [
      "position",
      "top",
      "right",
      "bottom",
      "left",
      "z-index",
      "display"
    ],
    "function-calc-no-invalid": true,
    "plugin/stylelint-config-rational-order/plugin": {
      "border-in-box-model": false,
      "empty-line-between-groups": true
    },
    "react-native/css-property-no-unknown": [
      true,
      {
        "ignoreProperties": [
          "safe-area-",
          "-color"
        ]
      }
    ]
  },
  "customSyntax": "@stylelint/postcss-css-in-js",
  "customSyntaxOptions": {
    "parse": customStyleValueParsing.parse,
    "stringify": customStyleValueParsing.stringify,
  }
}

    Este código incluye el paquete @stylelint/postcss-css-in-js como una sintaxis personalizada y agrega una función de análisis de valores personalizados para asegurar que tus estilos sean validados correctamente por stylelint.

    Además, este código incluye otras reglas y complementos que pueden ser útiles para tu proyecto de React Native.

    Después de agregar este código a tu archivo .stylelintrc.js, deberías poder ejecutar *stylelint ‘/src/**/*.tsx’* sin encontrar ningún error relacionado con la configuración de stylelint para React Native utilizando TypeScript y StyleSheet.

Comments are closed.