Почему ошибка при установке prettier?

Question

[cester]

Добрый день! Объясните пожалуйста почему при установке prettier, eslint-plugin-prettier webstorm материться что

Error: Failed to load plugin prettier/react: Cannot find module 'eslint-plugin-prettier/react'

Error: Failed to load plugin prettier/react: Cannot find module 'eslint-plugin-prettier/react'
    at Function.Module._resolveFilename (module.js:538:15)
    at Function.resolve (internal/module.js:18:19)

В чем может быть проблема, все зависимости установлены как глобально так и локально?
Уже все перепробовал.
Буду благодарен...

Answer 1

[Антон Спирин]

ставьте плагин eslint-plugin-react. Дополнительно если не установлены:
eslint
babel-eslint
eslint-plugin-jsx-a11y
eslint-plugin-import
eslint-config-prettier
eslint-config-airbnb
eslint-plugin-prettier
Добавляйте так:

{
  "extends": [
    "airbnb",
    "prettier",
    "prettier/react"
  ],
  "plugins": [
    "prettier"
  ],
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "node": true
  },
  "rules": {
    "no-plusplus": 0,
    "no-confusing-arrow": 0,
    "no-restricted-syntax": 0,
    "guard-for-in": 0,
    "class-methods-use-this": 0,
    "jsx-a11y/no-static-element-interactions": 0,
    "jsx-a11y/anchor-is-valid": 0,
    "react/no-danger": 0,
    "react/prop-types": 0,
    "react/jsx-filename-extension": 0,
    "react/jsx-curly-brace-presence": ["error", { "props": "never", "children": "never" }],
    "import/no-unresolved": ["error", { "commonjs": true }],
    "import/extensions": 0,
    "import/no-extraneous-dependencies": ["error", {"devDependencies": true}],
    "import/prefer-default-export": 0,
    "prettier/prettier": ["error", {
      "singleQuote": true,
      "trailingComma": "all"
    }]
  }
}

Правила настройте под себя.

Если хотите precommit проверку, то поставьте lint-stаged и husky, и добавьте следующие строки в package.json:

"scripts": {
    // ваши скрипты
    "precommit": "./node_modules/.bin/lint-staged",
  },
  "lint-staged": {
    "**/*.js": [
      "./node_modules/.bin/prettier --write",
      "./node_modules/.bin/eslint --fix",
      "./node_modules/.bin/stylelint './app/**/*.js'", // если используете  css in js
      "git add"
    ]
  },

Теперь перед каждым вашим коммитом код будет приводиться в порядок на автомате если это возможно. И прерывать коммит ошибкой если нарушены правила.

Comments

[cester]

Вроде работает, красные warnings исчезли, но webstorm все равно материться

Не понимаю почему.
Еще вопрос..
Где-то читал, что была раньше какая-то проблема со стрелочными функциями.
Замечали какие-то проблемы с этим?

[Антон Спирин]

cester, а когда webstorm ругается? Вы что-то выполняете?
Со стрелочными функциями все отлично.
Убедитесь, что в настройках Webstorm стоит нужная версия JS и настроен ESlint

[cester]

Когда добавляю prettier в .eslintrc.
Скрин такой же..

[Антон Спирин]

cester, может пакеты не все установлены. Попробуйте переустановить.
Конфиг с package.json сбросьте посмотреть

[cester]

Антон Спирин, Кусок конфига

{
  "scripts": {
    "start": "cross-env NODE_ENV=development nodemon --inspect server --ignore client/ --exec babel-node",
    "precommit": "lint-staged",
    "prepush": "yarn test"
  },
  "lint-staged": {
    "*.{js,jsx}": [
      "prettier --write",
      "eslint --fix",
      "git add"
    ],
    "*.{css,scss}": [
      "stylelint --fix",
      "git add"
    ]
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.0.1",
    "babel-jest": "^22.1.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-react-css-modules": "^3.3.0",
    "babel-plugin-react-remove-properties": "^0.2.5",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.23.0",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-1": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "cssnano": "^3.10.0",
    "eslint": "^4.16.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-import-resolver-webpack": "^0.8.4",
    "eslint-plugin-codeceptjs": "^0.3.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.5.1",
    "eslint-watch": "^3.0.1",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.4",
    "html-webpack-plugin": "^2.30.1",
    "husky": "^0.14.3",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^22.1.4",
    "lint-staged": "^6.0.1",
    "nock": "^9.1.6",
    "node-sass": "^4.7.2",
    "nodemon": "^1.11.0",
    "np": "^2.16.0",
    "npm": "^5.4.2",
    "postcss-loader": "^2.0.6",
    "postcss-nested": "^2.1.2",
    "postcss-scss": "^1.0.2",
    "redux-mock-store": "^1.3.0",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.18.2",
    "stylelint": "^8.4.0",
    "stylelint-config-standard": "^18.0.0",
    "stylelint-order": "^0.8.0",
    "stylelint-scss": "^2.2.0",
    "url-loader": "^0.5.9",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-middleware": "^1.12.0",
    "webpack-hot-middleware": "^2.19.1"
  }
}

До сих пор проблема не решана
такое впечатление, что webstorm хочет загрузить этот плагин из папки eslint

[Антон Спирин]

cester, у вас не установлен eslint-plugin-prettier, да и сам prettier не вижу.

yarn add -D prettier eslint-plugin-prettier

[cester]

Антон Спирин, Ошибка исчезла, но сейчас оно не работает, весь файл красный в ошибках как и раньше.
yarn precommmit не работает

[Антон Спирин]

cester, precommit работает когда вы делаете:
git commit
Вы правила настроили по-минимуму?
Смотрите как это работает:

Нажимаете на лампочку и выбираете ESLint: Fix current file:

Весь файл будет исправлен, если это возможно сделать без вашего вмешательства. То есть не изменяя логики.
Если исправить в автоматическом режиме нельзя, смотрите ошибку, гуглите и исправляете.
Так же можно использовать комментарии для отмены правил для определенных блоков и строк.

Так же можете настроить проверку на сохранение.

[cester]

Антон Спирин, Но это все было и без prettier работало, в чем польза prettier тогда?

[Антон Спирин]

cester, https://prettier.io/docs/en/why-prettier.html тут все по пунктам.
Главное сейчас приведите кодовую базу в порядок и вопросов с форматированием возникать больше не будет. Сам инструмент мощней ESLint в плане форматирования.
Взять хотя бы этот кейс:

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne(), noWayYouGottaBeKiddingMe());

Prettier исправит так:

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne(),
  noWayYouGottaBeKiddingMe(),
);

А ESLint выдаст ворнинг max-len

[cester]

Антон Спирин, Значит я что-то не так сделал, у меня он это не исправляет.
Плюс нет этого

[Антон Спирин]

cester, конфиг .eslintrc у вас как выглядит?

[cester]

Антон Спирин,

{
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "node": true,
    "es6": true,
    "mocha": true,
    "jest": true,
  },
  "extends": [
    "airbnb",
    "prettier",
    "prettier/react"
  ],
  "plugins": [
    "prettier"
  ],
  "settings": {
    "import/resolver": {
      "webpack": {
        "config": "./webpack/webpack.dev.config.js"
      }
    }
  },
  "rules": {
    "no-unused-vars": 0,
    "react/require-default-props": 0,
    "no-shadow": 0,
    "no-underscore-dangle": 0,
    "no-console": 0
  }
}

@rockon404,

[Антон Спирин]

cester, попробуйте добавить:

"parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "prettier/prettier": ["error", {
      "singleQuote": true,
      "trailingComma": "all"
    }]
  },

В IDE то у вас настроен путь к локальному eslint из node_modules и автоопределение конфига?

[cester]

Антон Спирин, Получилось, спасибо!)
Последний вопрос, что можно еще сюда добавить (что у вас там)?

"prettier/prettier": ["error", {
      "singleQuote": true,
      "trailingComma": "all"
    }]

[Антон Спирин]

cester, именно это и написано. одинарные ковычки и trailingComma, ставшая негласным стандартом в React разработке.
Так же можете настроить путь к главному конфигу webpack в Webstorm если этого еще не сделали. Это нужно для резолва и автоимпорта алиасов. Ну и одинарные кавычки и прочее. Чтобы автоимпорты были в одинарных кавычках.

[cester]

Антон Спирин, У вас бывали проблемы с ним?
У меня сейчас после команды yarn precommit
он заменяет все '' на ""
плюс удаляет скобки, так что приходится многое исправлять
очень странное поведение...