如何禁用“插入‘0’eslint更漂亮/更漂亮”？

问题描述

我有一个带有 ESlint / Stylelint / Prettier 样式化组件的 React 应用程序，这会产生规则冲突，在 css 规则中排除数字前导零。

所以给出这个代码：

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;
  }

我在控制台打印：

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

我想保留更漂亮的格式规则，但禁用与我的 stylelint 配置规则冲突的规则。

这是我的 .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,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
}

开发依赖：

"@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"

解决方法

我想保留更漂亮的格式规则，但禁用与我的 stylelint 配置规则冲突的规则。

使用 Prettier 时，无法关闭数字前的前导零。更漂亮的是 opinionated formatter with a limited set of options。

您可以ignore sections of code using special comments，例如：

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

但这可能是不可取的。

如果您打算使用 Prettier，我建议您接受其意见并配置 stylelint，以免与它发生冲突。 stylelint-config-prettier 配置关闭 stylelint 中与 Prettier 格式重叠的任何规则。