我对配置更漂亮和 eslint 有疑问。示例函数:
const foo = () => {
[1, 2, 3].forEach((element) => {
console.log(element);
});
};
当我保存括号从元素中删除时,我收到一个错误:“箭头函数参数周围的预期括号有一个带有花括号的主体。(eslintarrow-parens)。” 此问题仅发生在 TypeScript 文件中。在 JavaScript 中,括号不会被删除。隐式箭头换行和操作符换行规则也会出现同样的问题。我怎样才能让它在 TypeScript 中工作?
vscode settings.json:
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
"[javascript]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
},
"[typescript]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
},
eslintrc.js
const typescriptEslintRecommended = require("@typescript-eslint/eslint-plugin").configs.recommended;
module.exports = {
parser: "babel-eslint",
env: {
browser: true,
jest: true,
},
extends: ["plugin:react/recommended", "airbnb", "eslint:recommended"],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: "module",
},
plugins: ["react"],
rules: {
"max-len": [
"error",
{
code: 200,
},
],
"no-restricted-syntax": ["error"],
"no-lonely-if": 0,
allowElseIf: 0,
"prefer-template": 2,
"default-case": 2,
"no-mixed-operators": 1,
"no-confusing-arrow": 0,
"no-new": 0,
"no-undef": 2,
"no-bitwise": 1,
"import/no-unresolved": [
1,
{
ignore: [".+/components/.+"],
},
],
"arrow-spacing": [
"error",
{
before: true,
after: true,
},
],
"object-curly-spacing": ["error", "always"],
"keyword-spacing": [
"error",
{
before: true,
after: true,
},
],
"space-infix-ops": [
"error",
{
int32Hint: false,
},
],
"func-call-spacing": ["error", "never"],
"key-spacing": [
"error",
{
beforeColon: false,
},
],
"arrow-parens": [
2,
"as-needed",
{
requireForBlockBody: true,
},
],
"no-nested-ternary": "warn",
"no-multiple-empty-lines": [
"warn",
{
max: 1,
},
],
"require-atomic-updates": "error",
radix: ["error", "as-needed"],
"react/prop-types": [1],
"linebreak-style": 0,
"jsx-a11y/click-events-have-key-events": [0],
"jsx-a11y/no-noninteractive-element-interactions": [0],
"react/require-default-props": [0],
"no-console": [1],
"prefer-const": "error",
"react/forbid-prop-types": [1],
"react/state-in-constructor": 0,
"react/jsx-props-no-spreading": 0,
"react/jsx-filename-extension": [
2,
{
extensions: [".js", ".jsx", ".ts", ".tsx"],
},
],
"jsx-quotes": 0,
quotes: 0,
"import/no-extraneous-dependencies": 0,
indent: [
"error",
4,
{
SwitchCase: 1,
},
],
"react/jsx-indent": ["error", 4],
"react/jsx-indent-props": ["error", 4],
"max-params": ["error", 7],
"object-curly-newline": [
"error",
{
ObjectExpression: "always",
ObjectPattern: {
multiline: true,
},
ImportDeclaration: "never",
ExportDeclaration: {
multiline: true,
minProperties: 3,
},
},
],
"import/prefer-default-export": "off",
"no-unused-vars": "warn",
"no-plusplus": [
2,
{
allowForLoopAfterthoughts: true,
},
],
"no-submodule-imports": 0,
"import/extensions": 0,
"max-classes-per-file": ["error", 2],
},
settings: {
"import/resolver": {
node: {
paths: ["src"],
extensions: [".js", ".jsx", ".ts", ".tsx"],
},
},
},
overrides: [
{
files: ["**/*.ts", "**/*.tsx"],
parser: "@typescript-eslint/parser",
parserOptions: {
project: "./tsconfig.json",
},
plugins: ["@typescript-eslint"],
rules: Object.assign(typescriptEslintRecommended.rules, {
"@typescript-eslint/no-unused-vars": "off",
"@typescript-eslint/member-delimiter-style": "warn",
"@typescript-eslint/explicit-function-return-type": "off",
"react/prop-types": "off",
"no-use-before-define": "off",
camelcase: "off",
"@typescript-eslint/camelcase": "off",
}),
},
],
};
漂亮的rc.js:
{
"prettier.eslintIntegration": true
}