Более привлекательная ошибка `␍⏎*···mapStateToProps,␍⏎**··mapDispatchToProps,␍⏎**’ с ·mapStateToProps,*mapDispatchToProps`

#reactjs #eslint #prettier #eslintrc

#reactjs #eslint #красивее #eslintrc

Вопрос:

Я столкнулся со следующим сообщением об ошибке Replace `␍⏎····mapStateToProps,␍⏎····mapDispatchToProps,␍⏎··` with `mapStateToProps,·mapDispatchToProps` prettier/prettier

Ребята, которые работают в моей команде, не имеют этой ошибки в своих редакторах. Я попытался отключить мои плагины eslint и prettier в VSCode, а также удалить prettier глобально, но безуспешно. Я также попытался удалить prettierrc.js и

Вот мои prettierrc.js и eslintrc.js файлы. Но ошибка все равно сохранялась

Любые предложения будут оценены.

 module.exports = {
    printWidth: 80,
    tabWidth: 2,
    useTabs: false,
    semi: true,
    singleQuote: true,
    trailingComma: 'all',
    endOfLine: 'auto',
};
  

И eslintrc.js

 const path = require('path');

module.exports = {
  extends: [
    'airbnb',
    'plugin:import/errors',
    'plugin:import/warnings',
    'prettier',
    'prettier/react',
  ],
  plugins: ['flowtype', 'prettier', 'import'],
  parser: 'babel-eslint',
  rules: {
    'linebreak-style': 0,
    'prefer-const': 0,
    'spaced-comment': 0,
    'padded-blocks': 0,
    'import/imports-first': 0,
    'import/prefer-default-export': 0,
    'import/no-extraneous-dependencies': 0,
    'comma-dangle': 0,
    'no-shadow': 0,
    'arrow-body-style': 0,
    'quote-props': 0,
    'no-unused-vars': 1,
    'consistent-return': 0,
    'max-len': 0,
    'no-use-before-define': ['error', { functions: false, classes: true }],
    'no-underscore-dangle': 'off',
    'react/prefer-stateless-function': ['off'],
    'react/jsx-filename-extension': ['off'],
    'react/forbid-prop-types': ['off'],
    'editor.formatOnSave': true,
    // Enable per-language
    '[javascript]': {
      'editor.formatOnSave': true,
    },
    'react/no-danger': 0,
    'react/prop-types': 0,
    'no-throw-literal': 'error',
    'no-bitwise': ['off'],
    'dot-notation': ['off'],
    'prettier/prettier': ['error'],
    'flowtype/define-flow-type': 1,
    camelcase: ['off'],
    'jsx-a11y/label-has-for': ['off'],
    'no-nested-ternary': 'off',
    'react/no-this-in-sfc': 'off',
    'no-param-reassign': 'off',
    'react/sort-comp': [
      1,
      {
        order: [
          'static-methods',
          'instance-variables',
          'lifecycle',
          '/^on. $/',
          'everything-else',
          'rendering',
        ],
        groups: {
          rendering: ['/^render. $/', 'render'],
        },
      },
    ],
  },
  parserOptions: {
    ecmaVersion: 6,
    sourceType: 'module',
    ecmaFeatures: {
      spread: true,
      legacyDecorators: true,
    },
  },
  globals: {
    global: true,
    document: true,
    window: true,
  },
  settings: {
    'import/extensions': ['.js', '.jsx'],
    'import/parser': 'babel-eslint',
    'import/resolver': {
      // You can use only webpack but with this approach webstorm doesn't show
      // any red highlight for alias imports
      // If you forget to add alias here build still will work if there are aliases in
      // webpack.config but with this webstorm works better.
      // eslint-import-resolver-alias
      alias: [
        ['app', path.join(__dirname, 'src/app/')],
        ['assets', path.join(__dirname, 'src/assets/')],
        // ['TT', 'src/app/test/'],
      ],
      // It also works but with alias there are no red highlight in webstorm
      // and with this approach build works but I still see red highlights in webstorm
      // eslint-import-resolver-webpack
      webpack: {
        config: './webpack/webpack.prod.js',
      },
    },
  },
};
  

Ответ №1:

  1. Проверьте свои vscode настройки, чтобы убедиться, что prettier.endOfLine не установлено ничего, кроме auto .

  2. Убедитесь, что .editorconfig (если таковые имеются) не конфликтует с вашей .prettierrc конфигурацией.