我有一个带有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]
我想保留更漂亮的格式规则，但禁用这个与我的样式配置规则冲突的规则。
我的。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"
我想保持更漂亮的格式规则，但禁用这个与我的样式配置规则冲突的规则。
当使用Prettier时，不可能关闭数字前的前导零。Prettier是一个固执己见的格式化程序，只有一组有限的选项。
您可以使用特殊注释忽略代码部分，例如:
const Faq = styled(About)`
h2 {
/* prettier-ignore */
padding-bottom: .2rem;
}
但这可能是不可取的。
如果您打算使用Prettier，我建议您接受它的意见并配置style - int，这样它就不会与之冲突。style - lint-config- Prettier配置会关闭style - int中与Prettier格式重叠的所有规则。