Я перепробовал все возможные комбинации плагинов и расширяет .eslint
, чтобы он хорошо сочетался с красивыми. Я хочу, чтобы редактор (vscode) не отображал более красивые ошибки при написании кода, потому что я ожидаю, что он поймет, что ошибка будет исправлена при сохранении кода (с помощью опции fixOnSave в vscode). Итак, вот мой конфиг eslint, который не работает:
{
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2018,
"jsx": true,
"useJSXTextNode": true
},
"env": {
"browser": true,
"jest/globals": true,
"cypress/globals": true
},
"plugins": ["@typescript-eslint", "react-hooks", "jest", "prettier"],
"extends": [
"plugin:react/recommended",
"airbnb",
"plugin:cypress/recommended",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:import/typescript",
"prettier/react",
"plugin:prettier/recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended"
],
"rules": {
"prettier/prettier": "error",
"import/extensions": [
"error",
"ignorePackages",
{
"js": "never",
"jsx": "never",
"ts": "never",
"tsx": "never"
}
],
"import/no-extraneous-dependencies": [
"error",
{
"devDependencies": [
".storybook/**",
"**/stories/**",
"jest.setup.js",
"**/*.spec.[jt]s?(x)",
"scripts/**",
"src/test/**",
"next.config.js",
"cypress/**"
]
}
],
/**
* @description rules of eslint official
*/
/**
* @bug https://github.com/benmosher/eslint-plugin-import/issues/1282
* "import/named" temporary disable.
*/
// "import/named": "off",
"react/jsx-props-no-spreading": "off",
"react/react-in-jsx-scope": "off",
/**
* @bug?
* "import/export" temporary disable.
*/
"import/export": "off",
"import/prefer-default-export": "off", // Allow single Named-export
"no-unused-expressions": [
"warn",
{
"allowShortCircuit": true,
"allowTernary": true
}
], // https://eslint.org/docs/rules/no-unused-expressions
/**
* @description rules of @typescript-eslint
*/
"@typescript-eslint/prefer-interface": "off", // also want to use "type"
"@typescript-eslint/explicit-function-return-type": "off", // annoying to force return type
/**
* @description rules of eslint-plugin-react
*/
"react/jsx-filename-extension": [
"warn",
{
"extensions": [".jsx", ".tsx"]
}
], // also want to use with ".tsx"
"react/prop-types": "off", // Is this incompatible with TS props type?
/**
* @description rules of eslint-plugin-react-hooks
*/
"react-hooks/rules-of-hooks": "error",
"@typescript-eslint/ban-ts-ignore": "off",
"no-console": "off",
"react/destructuring-assignment": "off"
}
}
Вот более красивый конфиг:
{
"semi": true,
"trailingComma": "all",
"singleQuote": true,
"printWidth": 80
}
Я не совсем понимаю, как эти плагины играют вместе в extends
. Надеюсь, что это правильный вопрос для stackoverflow:)