eslint 阻止强制将多行转换为单行

Question

现在遇到的问题是如图的代码，我想保留这个格式，但是vs强制让我换成一行，
求教在不改单行长度限制和使用 <Component // 这样的hack怎么解决这个问题？

eslintrc

module.exports = {
  env: {
    browser: true,
    node: true,
  },
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:prettier/recommended',
  ],
  settings: {
    react: {
      pragma: 'React',
      version: 'detect',
    },
  },
  rules: {
    'max-len': [
      2,
      120,
      {
        ignoreStrings: true,
        ignoreTemplateLiterals: true,
        ignoreComments: true,
      },
    ],
    'no-var': 2,
    'one-var': [2, 'never'],
    'no-unexpected-multiline': 0,
    'react/react-in-jsx-scope': 0,
    'comma-spacing': [1, { before: false, after: true }],
    '@typescript-eslint/explicit-function-return-type': 0,
    '@typescript-eslint/explicit-module-boundary-types': 0,
    'react/jsx-first-prop-new-line': [2, 'multiline'],
    'react/jsx-max-props-per-line': [1, { maximum: 1 }],
  },
  parserOptions: {
    ecmaVersion: 10,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
}

prettierrc.js

module.exports = {
  semi: false,
  trailingComma: 'all',
  singleQuote: true,
  tabWidth: 2,
  endOfLine: 'lf',
  bracketSpacing: true,
  jsxBracketSameLine: true,
  arrowParens: "avoid",
  // printWidth: 80,
};

Answer 1

把鼠标移到红线上，看看提示里说的是触发了那条eslint规则？

Answer 2

大概是因为没有在项目中安装eslint， 另外推荐去阅读下面三个插件，读了之后应该会比较清楚extends和plugins中每一项的作用，同时知道prettier和eslint的兼容问题

ESLint-plugin-React
eslint-config-prettier
eslint-plugin-prettier