I can't get the prettier extension to use my config files. It keeps using the global settings (as defined in the config path setting in vscode). I made an example project:
https://github.com/Supperhero1/prettierTest
I set tabWidth to 1 in the .prettierrc file. When I run "npx prettier --write ." the prettier package properly formats the test.ts document to have an indentation of one, but if i save the file (I have format on save turned on) it gets formatted back to the global setting (4 spaces). I deleted all settings in the global setting but then it defaults to a tab with of two spaces. The extension seems to ignore the config file completely. A collegue has the extension and it works fine with config files.
I'm trying to figure out what could be overriding the setting, the exension description says the precedence for figuring out settings is:
Prettier configuration file
.editorconfig
Visual Studio Code Settings (Ignored if any other configuration is present)
And in the official docs, the config file resolution precedence is:
A "prettier" key in your package.json file.
A .prettierrc file written in JSON or YAML.
...
Seeing how I don't have a prettier key in my package.json file, there should be nothing that can override my .prettierrc file. I tried restarting vscode but that didn't help. Has anyone else had this issue, I'm not sure where to look to solve this problem...
In VS Code press Ctrl + shift + p to open command palette then chose
Preferences: Open Settings(JSON) and add the line among other settings you have:
"prettier.configPath": ""
Save the file. Now the Prettier extension respect your local .prettierrc config files. Basically Prettier: Config Path Path to the prettier configuration file option overrides all other config files regardless of placement.
I have encountered this problem it took me a lot of time to solve it. And finally, I found the solution to my problem similar to yours.
In VS Code Press open Command Palette (Ctrl + Shift + P)
Search and select this: Format Document With...
After selecting this choose Prettier - Code formatter to make as default formatter
It seems that the VSCode prettier extension uses the config file in the VSCode settings over the local one, even if that config is an empty json file it then falls back to the default settings instead of the local ones (from .prettierrc). When I removed the path from Prettier: Config Path setting in VSCode it worked as expected.
I guess I expected the file in this path to be the fallback for when you don't have a local config file but, seeing how this file seems to overwrite every other setting, I guess the intended use is to set a User setting as default and then set a workspace setting for every workspace where you don't want to use the default. Or just leave the prop empty in the user settings.
For me it seems that my VSCode was already set to use its own internal parser and because of that it was being used instead (for example when doing format on save
I needed this in my settings.json
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
So, i got the same trouble with mistake: "Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used"
The solution is to disable this options in vscode prettier:
Prettier: Use Editor Config - mark it as disabled
enter image description here
I tried so many different ways that other people recommended; however, nothing worked for repository. The only way that worked with me was uninstalling prettier from VScode. My work repository currently has the following formatting rules in ".editorconfig", ".eslintrc.json", ".prettierrc.html.json", ".prettierrc.ts.json", ".prettierrc.scss.json" locally.
Adding the editor.defaultFormatter on the VSCode settings has worked for me,
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.formatOnPaste": false,
"prettier.useEditorConfig": false,
"prettier.useTabs": false,
"prettier.configPath": ".prettierrc"
}
Related
There is a question about suppressing editor.formatOnSave for specific file extensions (languages) but I have a different question instead: how can I suppress this feature for one specific file in my workspace?
I want to suppress it in the repository somehow, with a config or hint in a comment, or some such, so I can prevent anyone from accidentally doing it wrong. I cannot tell my 20ish teammates to always "save without formatting", nor could I myself remember that at all times.
I have a ./vscode/settings.json file that has:
"editor.formatOnSave": true,
and it works wonderfully for all files in my workspace. However, I want to suppress it for my app-routing.module.ts file (it's an Angular project) because the auto-formatting there hurts readability more than it helps.
How to disable editor.formatOnSave for one specific file?
When I or a colleague use "Save" (CTRL + S on Windows) or "Save All" (CTRL + K, S on Windows) the auto formatting should not be triggered for that file.
What I've tried:
Check all answers in the related question (so e.g. "[javascript]": { "editor.formatOnSave": false }
Have a .vscode/settings.json folder in subfolders, but that's not supported
Include /* eslint-disable prettier/prettier */ in my file (AFAIK prettier is my formatter for TypeScript files), and read through this open prettier issue on GitHub
Create a .prettierignore file and add my file
None of these worked.
Just save your file with:
ControlK then S on Linux and Windows
⌘ CommandK then S on Mac
I have Visual Code Studio(1.41.1) Editor and I need Auto Formatter
I have installed this code format: Prettier - Code formatter Successfully installed but not working,
I also tried to use the command ext install esbenp.prettier-vscode
that too was successful installation but is not working.
I checked that the composer is installed properly and the environment variable path is given correctly in my system, Also, I added it to the settings.json file by looking in the document: "phpformatter.composer": true but not success in auto-formatting my code
Visual Studio Code and System Restart also tried but did not succeed
Why can't I Auto Formatter in my Visual Studio code use this "Prettier - Code Formatter"? No errors are received, but the auto formatter is not working
try this, it worked for me
File -> Preferences -> Settings (for Windows)
Code -> Preferences -> Settings (for Mac)
Search for "Default Formatter". In the dropdown, prettier will show as esbenp.prettier-vscode.
Maybe the prettier extension is not working for javascript file. Open your settings.json for vs code and paste
{ "editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } }
This might work for you
You may have local .vscode directory in the root of your project with settings that prevent formatting. Try to edit or remove .vscode local configurations if you have. After close and reopen VS Code.
as #harkesh kumar said : press Ctrl+shift+p and type format document then select prettier format, it may work for you
Make sure you have a file in the root folder with this name .prettierrc.js
inside you should have something like:
module.exports = {
bracketSpacing: false,
jsxBracketSameLine: true,
singleQuote: true,
trailingComma: 'all',
arrowParens: 'avoid',
};
If you don't have and don't want a prettier config file for some reason, you can uncheck the option "Prettier: Require Config"
In settings.json it's "prettier.requireConfig": true
In the UI it looks like this:
For me it was failing silently because I was using await inside of a function that wasn't marked with async. That raises another question - why would it fail silently here. Regardless, once I fixed that error then prettier began working again.
I finally found the issue. I was trying to format code on a remote server.
In the extension page for Prettier, it says:
This extension is disabled in this workspace because it is defined to run in the Remote Extension Host
Then I clicked on the button "install on remote host ..." and it worked
For about a month now, my Prettier extension has stopped working as it normally does. Most notably - format on save does not work. Other notes:
Format on typing a ; works
I get this error type symbol in the status bar next to the Prettier button - I can't find any reference to this relating to Prettier on Google:
]
I have my format on save checked in Settings:
'Format Document,Format SelectionandFormat Document with` command palette options all do nothing
Timing of the break coincides with moving from Prettier 2-3
I've followed the migration steps and think all is in order. Some snippets of the configuration between eslint and prettier that I have:
As per the prettier documentation, my VS Code settings has:
"eslint.autoFixOnSave": true, // (even though VSCode has this as deprecated), have tried with and without this line
"editor.codeActionsOnSave": {
"source.organizeImports": true,
"source.fixAll.eslint": true
},
My Dev dependencies include:
"eslint-config-prettier": "^6.5.0",
"eslint-plugin-prettier": "^3.1.2",
"prettier-eslint": "^9.0.0",
I have a prettier.config.js file
My .eslintrc.js file includes:
extends: ['airbnb', 'prettier'],
plugins: ['react', 'jsx-a11y', 'import', 'react-hooks', 'plugin:prettier/recommended'],
Anyone have any idea on how to fix this or further debugging tests to do here? It's driving me nuts!
Follow these steps:
CTRL + SHIFT + P
Format Document (in pop-up bar)
Select Format Document
Select Configure Default Formatter...
Select Prettier - Code formatter
Done!
In VSCode settings, search for "Editor: Default Formatter" and set it to esbenp.prettier-vscode
Configuration has changed you need to add this into you vs-code settings:
According to the documentation: "You can enable Auto-Fix on Save for ESLint, TSLint or Stylelint and still have formatting and quick fixes"
"editor.codeActionsOnSave": {
// For ESLint
"source.fixAll.eslint": true,
// For TSLint
"source.fixAll.tslint": true,
// For Stylelint
"source.fixAll.stylelint": true
}
On VScode go to Settings > Text Editor > Formatting
Then check the Format On Save checkbox.
For me, using prettier+(svipas.prettier-plus) -- because the default prettier plugin is no good -- ONLY changing:
"editor.formatOnSaveMode": "modifications",
to
"editor.formatOnSaveMode": "file",
solved my problem.
Try to make your code prettier manually by pressing CTRL + SHIFT + P >>> Format Document. If your file is being formatted without any issues, it means that the issue lies in formatOnSave settings. Probably, you can try to make further debugging from there.
in my case the issue was that the default formatter setting was not being used for typescript files. Looking at my settings.json I saw
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
After adjusting the value for [typescript] the issue was resolved.
I couldn't find a place Settings UI where the default formatter can be changed for TS only, but it would be a nice feature though.
For formatonSave was already checked and the defaultFormatter was prettier ... when I switched into settings.json, it was like!!
"[javascript]": { "editor.formatOnSave": false }, "eslint.autoFixOnSave": true, "prettier.disableLanguages": [ "js" ],
After changing it to
"[javascript]": { "editor.formatOnSave": true }, "eslint.autoFixOnSave": true, "prettier.disableLanguages": [],
it did work...
I had to add a jsconfig.json file containing:
{
"exclude": ["node_modules"]
}
to my app directory, and reload Visual Code, in order for Prettier to work.
Also, I can't choose "Format Document With..." in the Visual Code command palette until I add this file.
Basically it tells Visual Code that the project is written in JavaScript (if I understand it correctly) and to exclude node_modules from intellisense.
This was after doing everything else people mentioned here.
First check if Prettier works fine. You can try to format a single file using Shift + Cmd + P and Format Document. If this doesn't work then it is most likely an issue with Prettier extension. Disable and Enable Prettier extension from Extensions.
If Formant Document works fine on single file then the best way to resolve these type of issues is going to settings.json and looking up the config. I had an issue where the first few lines in settings.json had issues and hence the other settings like format on save (editor.formatOnSave) and defaultFormatter which were below the ill-formatted line wasn't working.
I tried checking the "format on save" box but it didn't do it for me, even prettier selected as a default formatter.
Editing the settings' json file worked for me :
Open the command palette with ctrl + maj + p
Search 'open settings json'
Select the user option
enter image description here
In the file look for "editor.defaultFormatter" for html (line 16 in my case)
Set its value to "esbenp.prettier-vscode"
enter image description here
Done
I had one repo formatting on save and another not, in two different VSCode windows. The broken repo was using this filename:
// incorrect
.prettierrc.json
The functioning repo was using this filename:
// correct
.prettierrc
Dropping the .json extension corrected the problem.
I have ESlint configured with vscode using the plugin, now I'm wondering is there some way I can stop ESlint from showing me the parser/syntax errors, so I can instead view the syntax errors that the Salsa language service provides by default.
Update: please refer this updated answer
Open up settings.json and add the property:
"eslint.enable": false
Check:
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
The old:
"eslint.enable": false
Is deprecated, now you need to use the builtin VSCode mechanism for disabling extensions:
In order to disable ESLint only for a specific repo (instead of disabling it globally). Create .vscode folder in your project root and there create a settings.json then add the following config:
{
"eslint.enable": false
}
Maybe after this setting you should consider adding the .vscode/settings.json line to your .gitignore file too, but it is based on your dev team's preference.
}
Additionally if you'd like to ignore only some vendor/3PP .js files only then you should consider creating an .eslintignore file. Read more about this here.
go to File => Preferences => Settings
go to Extensions=>ESLint
Uncheck the EsLint:Enable
1-) npm install -g eslint
2-) Open up settings.json and add the property: "eslint.enable": false
In VSCode, go to
File >> preferences >> settings
Type 'eslint quiet' in the search bar and click
the check box for quiet mode.
In quiet mode, eslint would ignore basic errors.
This should work for many VSCode users as at March 4, 2022.
You're welcome!
Please open settings.json file and edit the configuration as below:
"eslint.enable": false
Hope this helps.
I don't understand why some answers states that eslint.enable is depracted. it works for me. in my WorkSpace settings (JSON), I add the following configuration and eslint errors disapears
{
...
"settings": {
"eslint.enable": false
},
}
When opening any PHP file in the Windows version of Visual Studio Code (version 0.10.1), I get the message:
Cannot validate the php file. The php program was not found. Use the 'php.validate.executablePath' setting to configure the location of 'php'
I don't have PHP installed locally -- is there some way to turn off the automatic validation for PHP, either for the project or globally?
Starting with version 0.10.5, there is a setting under the PHP Configuration Options section in settings.json to control validation. You can modify either the workspace settings or the global settings depending on what you want to accomplish.
// Whether php validation is enabled or not.
"php.validate.enable": true,
For Windows it doesn't seem to work since it starts as a null pointer.
"php.validate.executablePath": null
If you change it into something like:
"php.validate.executablePath": "C:\\php\\php.exe"
and put an empty file (could be a text file) named as "php.exe" it stops showing the warning, although I do not know if there could be any side effects when VS Code actually tries to use it.
But I would like to add that installing php may be a better option. It just executes when called upon, so the only extra resource that you may end up using would be some hard drive space.
Not sure how to accomplish this in the Windows version. But for the Linux version (and Mac?):
Adding a path of /dev/null seems to suppress the message.
File -> Preferences -> User Settings (or Workspace Settings).
"php.validate.executablePath": "/dev/null"
Setting PHP validation to false in Preferences/User settings.json and/or Preferences/Workspace settings.json does currently work in Windows (year 2016, VSC Version 1.4.0) to end the validation messages. User preference settings are applied globally, while Workspace settings are applied to specific folders or projects.
Just to clarify what may not be obvious to newbies, custom settings in User 'settings.json' and Workspace 'settings.json' pages must be bracketed, otherwise the defaults will not be overwritten.
After the settings have been entered, the page must be saved (File/Save). A backup of 'settings.json' may be exported via Save As by changing the file name and/or choosing another folder. For example, 'myfolder\2017-01-01_vsc_user_settings.json'. To use the backup file, open it in VSC and copy/paste the code back into Preferences/User or Preferences/Workplace 'settings.json'.
https://code.visualstudio.com/docs/customization/userandworkspace
Turn off PHP validation: settings.json
// Place your settings in this file to overwrite default and user settings.
{
"php.validate.enable": false
}
Use comma separators to overwrite multiple default settings: settings.json.
// Place your settings in this file to overwrite default and user settings.
{
"php.validate.enable": false,
"files.trimTrailingWhitespace": true,
"editor.autoClosingBrackets": false,
"editor.wordWrap": true
}
If you are opening a php file in visual studio code, then I assume you would like to use intellisense. Just install the extension PHP Debug in Visual Studio Code, and follow all the instructions till you create and save the JSON file in Visual Studio Code.