.prettierrc file not affect on rules

[OriAmir]

Hi,I write project using create-react-app and want to integrate prettier with eslint .

My package.json contain : "eslint-config-prettier": "^2.9.0", "eslint-plugin-prettier": "^2.6.2", "prettier": "^1.13.7", "pretty-quick": "^1.6.0"

.eslintrc file contain: { "extends": ["react-app", "plugin:prettier/recommended"], }

Now i have error that annoyed me and i want to cancel him: [eslint] Replace '../Admin.module.css' with "../Admin.module.css" (prettier/prettier)

So , I try to add .prettierrc file to my project and to add him this json: { "avoidEscape": true }

and also try to set this: { singleQuote: true }

But nothing happened! I try to add also another rules but also nothing happened ..it's looks like this file not affect anything and it's stay the same What I am doing wrong?

Thanks!

[not-an-aardvark]

Hi,

Try using the singleQuote: true option in your .prettierrc file. I don't think prettier has an avoidEscape option.

[OriAmir]

@not-an-aardvark Hi, thank for your quick replay. I try to put this line also but nothing happend , same error. Maybe my . prettierrc has not have any effect on rules ? i could i know this?

Can you please open my question ? because I think it's not my issue

[not-an-aardvark]

What version of prettier are you using?

[OriAmir]

"prettier": "^1.13.7", "pretty-quick": "^1.6.0"

@not-an-aardvark

I also add to my userSettings on my vs code this rules , but i don't know if it's have anything that need to effect on the prettier file:

"editor.formatOnSave": true, "[javascript]": { "editor.formatOnSave": false }, "eslint.autoFixOnSave": true, "eslint.alwaysShowStatus": true, "prettier.disableLanguages": [ "js" ]

[pburdette]

@not-an-aardvark I've got the same issue for the most part. Rules are not being applied when integrating prettier with ESLint. I followed this article https://prettier.io/docs/en/eslint.html

Config:

{
  "root": true,
  "parserOptions": {
    "parser": "babel-eslint"
  },
  "env": {
    "browser": true
  },
  "extends": [
    "plugin:vue/recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": [
    "vue",
    "prettier"
  ],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "semi": false,
        "printWidth": 120
      }
    ]
  }
}

Dev Dependencies

  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^4.15.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-node": "^6.0.1",
    "eslint-plugin-prettier": "^2.6.2",
    "eslint-plugin-promise": "^3.8.0",
    "eslint-plugin-vue": "^4.0.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "prettier": "^1.13.7",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  }

[jorgegonzalez]

@beardedpayton @OriAmir Which rules specifically are not being applied?

[jorgegonzalez]

I was having an issue where my .prettierrc was not changing any rules and it was because a .editorconfig in the same directory was overriding them. Specifically the quote_type and indent_size settings.

[pmithunish]

Using the following setup

{
  "extends": ["react-app", "prettier"],
  "rules": {
    "prettier/prettier": "error"
  },
  "plugins": ["prettier"]
}

instead of the shorthand { extends: ["react-app", "plugin:prettier/recommended"] } did the trick for me. Read more about this here. Hope it helps 😃.

[Brandt-Bowling]

Using the following setup

{
  "extends": ["react-app", "prettier"],
  "rules": {
    "prettier/prettier": "error"
  },
  "plugins": ["prettier"]
}

instead of the shorthand { extends: ["react-app", "plugin:prettier/recommended"] } did the trick for me. Read more about this here. Hope it helps 😃.

Thank you so much for that! Was using the short hand but upon switching to this style the updates to .prettierrc take effect now.

[xuchaobei]

I also meet the issue. After a period of trial, I think the eslint plugin of vscode casue the issue. When changing rules in .prettier.js , the eslint server plugged in vsocde doesn't reload the updated rules. But if you run eslint through terminal, you will find the new rules are applied.

One solution is to reopen the vscode, then eslint server will restart and load the new rules in .prettier.js.

[mimafogeus2]

Just had the same problem, and solved it. Apparently, there was a "prettier" definition inside the project's package.json file. When I removed it, my custom .prettierrc settings were finally taken into account.

[robertsLando]

Just go to vs-code actions and select ESLINT: Restart ESLint Server

[penance316]

Just go to vs-code actions and select ESLINT: Restart ESLint Server

I have been having the same issue in PHPstorm recently, it can be solved by a simple restart of the IDE to refresh the ESLint server just the same as for VSCode.

Thanks fo the tip

[NeurAlch]

I also meet the issue. After a period of trial, I think the eslint plugin of vscode casue the issue. When changing rules in .prettier.js , the eslint server plugged in vsocde doesn't reload the updated rules. But if you run eslint through terminal, you will find the new rules are applied.

One solution is to reopen the vscode, then eslint server will restart and load the new rules in .prettier.js.

I'm using IDEA IntelliJ and a restart was also needed.

[DaviidMM]

Just go to vs-code actions and select ESLINT: Restart ESLint Server

This did the trick for me. Thanks!