How can I disable 'Insert `0` eslint(prettier/prettier)'?

Question

I have a React application with Styled Components with ESlint / Stylelint / Prettier that makes a conflict of rules that excludes number-leading-zero on css rules.

So given this code:

import React from 'react';
import styled from 'styled-components/macro';
import { About } from '../styles';

const Faq = styled(About)`
  display: block;

  span {
    display: block;
  }

  h2 {
    padding-bottom: .2rem;
    font-weight: lighter;
  }

  .faq-line {
    width: 100%;
    height: .2rem;
    margin: 2rem 0;
    background: #ccc;
  }

I get printed in the console:

Insert `0` eslint(prettier/prettier) [13, 21]
Insert `0` eslint(prettier/prettier) [19, 13]

I want to keep prettier format rules but disabling this one that conflicts with my stylelint config rules.

Here's my .eslintrc.js:

module.exports = {
  root: true,
  env: {
    node: true,
    es6: true,
  },
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module', // Allows for the use of imports
    project: './tsconfig.json',
    tsconfigRootDir: './',
  },
  ignorePatterns: ['node_modules/*', '.next/*', '.out/*', '!.prettierrc.js'],
  extends: ['eslint:recommended'],
  overrides: [
    // This configuration will apply only to TypeScript files
    {
      files: ['**/*.ts', '**/*.tsx'],
      parser: '@typescript-eslint/parser',
      settings: { react: { version: 'detect' } },
      env: {
        browser: true,
        node: true,
        es6: true,
      },
      plugins: ['testing-library', 'jest-dom', 'import'],
      extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended', // TypeScript rules
        'plugin:react/recommended', // React rules
        'plugin:react-hooks/recommended', // React hooks rules
        'plugin:testing-library/recommended',
        'plugin:testing-library/react',
        'plugin:jest-dom/recommended',
        'plugin:jsx-a11y/recommended', // Accessibility rules
        'plugin:prettier/recommended', // Prettier recommended rules
      ],
      rules: {
        // eslint-plugin-import rules
        'import/named': 'error',
        'import/namespace': 'error',
        'import/default': 'error',
        'import/export': 'error',
        'import/order': [
          'error',
          {
            groups: ['builtin', 'external', 'parent', 'sibling', 'index'],
            alphabetize: {
              order: 'asc',
            },
            pathGroups: [
              {
                pattern: 'react',
                group: 'builtin',
                position: 'before',
              },
            ],
            pathGroupsExcludedImportTypes: ['builtin'],
          },
        ],
        // React, Next & Typescript rules
        // We will use TypeScript's types for component props instead
        'react/prop-types': 'off',

        // No need to import React when using Next.js
        'react/react-in-jsx-scope': 'off',

        // This rule is not compatible with Next.js's <Link /> components
        'jsx-a11y/anchor-is-valid': 'off',

        // Why would you want unused vars?
        '@typescript-eslint/no-unused-vars': ['error'],

        // I suggest this setting for requiring return types on functions only where useful
        '@typescript-eslint/explicit-function-return-type': [
          'warn',
          {
            allowExpressions: true,
            allowConciseArrowFunctionExpressionsStartingWithVoid: true,
          },
        ],
        'prettier/prettier': ['error', {}, { usePrettierrc: true }], // Includes .prettierrc.js rules
      },
    },
  ],
};

.stylelintrc:

 {
  "extends": [
    "stylelint-config-standard",
    "stylelint-a11y/recommended"
  ],
  "plugins": [
    "stylelint-a11y",
    "stylelint-order"
  ],
  "rules": {
    "number-leading-zero": "never",
    "a11y/font-size-is-readable": true,
    "a11y/no-text-align-justify": true,
    "a11y/no-obsolete-element": true,
    "a11y/no-obsolete-attribute": true,
    "a11y/content-property-no-static-value": true,
    "order/properties-order": [
      "top",
      "bottom",
      "right",
      "left",
      "width",
      "height",
      "margin",
      "padding",
      "color",
      "text-align",
      "text-decoration",
      "font-size",
      "font-weight",
      "border",
      "border-radius"
    ]
  }
}

.prettierrc:

{
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": true,
  "printWidth": 80,
  "proseWrap": "always",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "useTabs": false,
  "vueIndentScriptAndStyle": false
}

DevDependencies:

"@types/styled-components": "^5.1.7",
"@typescript-eslint/eslint-plugin": "^4.16.1",
"@typescript-eslint/parser": "^4.16.1",
"eslint": "^7.21.0",
"eslint-config-prettier": "8.1.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest-dom": "^3.6.5",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-testing-library": "^3.10.1",
"husky": "^5.1.3",
"lint-staged": "^10.5.4",
"prettier": "^2.2.1",
"prettier-stylelint": "^0.4.2",
"stylelint": "^13.11.0",
"stylelint-a11y": "^1.2.3",
"stylelint-config-standard": "^20.0.0",
"stylelint-order": "^4.1.0"

Answer 1

I want to keep prettier format rules but disabling this one that conflicts with my stylelint config rules.

When using Prettier, it's not possible to turn off leading zeros before numbers. Prettier is a opinionated formatter with a limited set of options.

You can ignore sections of code using special comments, e.g.:

const Faq = styled(About)`
  h2 {
    /* prettier-ignore */
    padding-bottom: .2rem;
  }

But this is may not be desirable.

If you intend to use Prettier, I recommend embracing its opinions and configuring stylelint so that it doesn't conflict with it. The stylelint-config-prettier config turns off any rules in stylelint that overlap with Prettier's formatting.