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
Related
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"
}
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 am using VisualStudioCode 1.20.1 Version. Emmet is inbuilt according to VSC website.But when i am trying on VSC IDE and using anchor tag and referring to class dropdown-toggle the class is not auto suggested or recognized by vsc.
In your vscode user setting, add
"emmet.includeLanguages": {
"javascript": "html"
}
That way you can use emmmet in your js files.
in vs code user setting add these
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html",
"razor": "html",
"plaintext": "jade"
}
This following worked for me:
Open Command Palette (Ctrl + Shift + P)
Open Settings (JSON)
Add to the end:
"emmet.showSuggestionsAsSnippets": true,
"files.associations": {
"*html": "html",
"*njk": "html"
},
I'd like to add to the others posting about emmet.includeLanguages, you can also add "vue": "html", so like:
"emmet.includeLanguages": {
"vue-html": "html",
"vue": "html",
"javascript": "html"
}
Emmet does not work on js file by default. To solve that problem you have to enable emmet abbreviation in the vscode's settings.
First, open settings.json from any directory:
vim ~/.config/Code/User/settings.json
To be more specific, on windows, you need to go to File > Preferences > Settings > Type in "Launch" > click on "Edit in settings.json"
Now you have to declare in settings.json that you will use emmet at js files:
(Its very simple just copy and paste into code setting file the code highligted)
{
/*here are your existing settings*/
/*THE CODE BELOW*/
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html",
"razor": "html",
"plaintext": "jade"
}
/*^^^^THE CODE ABOVE^^^^*/
}
Now just save it. Not necessary restart vscode.
For more details see that post at vscode official webite.
The issue is that you need to include the language in your settings file.
With newer versions of VSCode, you can open up settings by selecting Code > Preferences > Settings and then search for "Emmet: Include Languages" and simply add your language there.
I just did this to get emmet working on my react code.
Something I ran into that was driving me crazy trying to figure out was that the setting "emmet.showExpandedAbbreviation" will affect emmet working in your javascript files too.
To solve, remove it from your settings.json or set it to:
"emmet.showExpandedAbbreviation": "always"
Check the file extension icon, does it show up as html5 or dj (which stands for django)?
If it shows as dj, then you have the Django VSCode extension. You can do 2 things:
Remove the Django extension
Add "django-html": "html" to emmet.includeLanguages (as per this issue), so mine now looks like this:
"emmet.includeLanguages": {
"vue-html": "html",
"javascript": "javascriptreact",
"django-html": "html",
},
This happened to me in HTML files because another extension (for Django, a Python web framework) was overriding .HTML file types without a way to turn it off. I removed the extension, restarted VSCode, and now it's working again.
find setting.json file and add this code
and save it and if you don't know how to do it then watch this video
https://www.youtube.com/watch?v=AUuP_hriEc4`
"files.associations": {"*html":"html"},
"emmet.triggerExpansionOnTab": true
`
With aspnetcorerazor and razor language selection add the below code in your setting.json file:
"emmet.includeLanguages": { "aspnetcorerazor" : "html", "razor" : "html" }
In your setting.json file add this line "emmet.triggerExpansionOnTab": true,. Then ! and tab will do the work.
Go to VS Code settings -> Search Emmet -> In section Emmet:Include Languages, add {item, value}
{javascript :javascriptreact}
Tried all above , didn't work.
Updated my VScode by reinstalling it from here and everything works like a charm now.
Simply uninstall the extension related to HTML or CSS
And it work for me nicely
"editor.defaultFormatter": "VisualStudioExptTeam.vscodeintellicode"
for me emmet auto-fill stopped to work on single html page ; turnout it was bcz i used "<" twice not on a tag ( like withen the text) ,
remove them or but \ before them or use them inside (prism cdn is recomended then) will solve the issue
I ran into this issue today and realized that the following setting wasn't checked. When I checked the box, I went back to a test HTML file and used "!" to bring up the boilerplate, and this time it worked.
"Emmet: Use inline Completions"
Step 1: Start your VS Code. Click on the Settings or press Ctrl+, to open the VS Code Settings.
Step 2: Click on the Extensions tab on the left side of the settings. Click on HTML.
Step 3: Click on the Edit in settings:json hyperlink to edit the settings in JSON format.
Step 4: Inside the curly braces, enter the following code under the already written JSON code:
“emmet.triggerExpansionOnTab”:true,
“files.associations”: {“*html”:“html”},
“emmet.useInlineCompletions”:true
Step 5: Save the file. Now if you try to apply Emmet in your code, it will work smoothly!!
You have to uninstall your VS code and Node.js by going into control panel → program & features.
After the uninstall is copmlete, go to C:\Users\your_user_name_folder.
After reaching there, delete the .vscode folder.
Go to AppData\Roaming\Code (delete this Code folder).
Go to C:\Users\<your_user>\AppData\Local\Programs and delete the Microsoft VS code folder.
Now go to C:\Users\rajat\AppData\Local and delete the npm_cache folder.
Now reinstall Node.js and VSCode.
I use Visual Studio Code with Vetur extension, when I right click on my .vue file and chose "Format Document" option Visual Studio Code automatically add the semicolons that intentionally removed them.
How do I stop this?
Put this in your user settings and it won't change your semis:
"vetur.format.defaultFormatter.js": "vscode-typescript",
Forget the earlier answer, gives me runtime issues.
Install Prettier- code formatter extension and disable the addition of semi colons by unchecking the Prettier:Semi as in the screenshot below
Note : Dont forget to reload your vs code after you install the extension and before u do the config changes
Adding .prettierrc file in project root worked for me with following settings:
{
"semi": false,
"singleQuote": true
}
Changing prettier settings in VSCode Workspace did not work in my case.
You can go to VSCode settings and search for the prettier section.... there's an option for turning off adding semicolons....
Or, just add this line to your custom settings in VSCode:
"prettier.semi": false
I was trying to find a way to do this in the eslint config, and have vs code pick up whatever settings are in the eslint settings... but haven't found it yet. In the meantime, the above works for me...
You can add in your VSCode settings.json
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false
}
},
go to settings
Go to Text Editor's Settings
"javascript.format.semicolons": "remove",
"typescript.format.semicolons": "remove",
"typescriptHero.imports.insertSemicolons": false,
"typescript.preferences.quoteStyle": "single",
"javascript.preferences.quoteStyle": "single",
Editor
YouTube Video
May be, you have different extensions installed where the usage of semicolons (;) is defined.
Try to go to VSCode settings and search for "semicolon". All settings regarding the usage of semicolon will be shown and you can configure it as you like.
This is what worked for me:
"typescript.format.semicolons": "remove"
Add this line to your custom settings in VSCode (helps with js files):
"autoimport.useSemiColon": false
setting organizedimports to false worked for me
"editor.codeActionsOnSave": {
"source.organizeImports": false
},
Easiest fix is go to "Settings" in vs code, Search for ";"
In the search result that follows, remove ";" as demonstrated in the below screenshots.
Before the change:
After the change:
I have checked my preference multiple times and ensured that all options related to format-on-save are set to false. And yet everytime I save a .json file I see my file getting formatted.
EDIT: Uninstall the extension, there are many other far better maintained formatters out there (e.g. Beautify)
OK, check if you have installed this extension: "JS-CSS-HTML formatter".
Now if you have, press CTRL+SHIFT+P, type "Formatter" and you should see an option that says Formatter Config.
After selecting that option, a file named formatter.json opens and all you do is edit the property (named onSave) from having true to being false.
Restart vs code and voilà!! It stopped auto formatting. (yay!!!!)
In Visual Studio Code, in order to stop autoformatting only for your json files add the following in settings.json file by opening User Settings - Preferences.
{
"[json]": {
"editor.formatOnSave": false
}
}
In VS Code by default Save without Formatting is done by -
on Windows :
STEP 1 : Press CTRL + K then
STEP 2 : Press CTRL + Shift + S
on MAC :
STEP 1 : Press CMD + K then
STEP 2 : Press S
I am using the below version of VS Code
Version: 1.28.2 (user setup)
Commit: 7f3ce96ff4729c91352ae6def877e59c561f4850
Date: 2018-10-17T00:23:51.859Z
Electron: 2.0.9
Chrome: 61.0.3163.100
Node.js: 8.9.3
V8: 6.1.534.41
Architecture: x64
And turned it off with the following steps:
CTRL+SHIFT+P
Type Settings
Select Preferences: Open User Settings
Now follow these image instructions:
Select Save All
Restart VS Code
look for Settings.json into "project/.vscode/settings.json"
{
"editor.formatOnSave": false
}
Worth to note
I like the json formatting that is enabled by default but only wanted to disable it when editing certain files (i.e. I didn't want some massive json files expanded after formatting).
To exclude those certain files from auto formatting, I made my changes and saved without formatting.
Go into your vs code keyboard shortcuts and see what Save without formatting is set to. In my case (mac user) it was CMD+K followed by S. If it's not set, create your own custom shortcut.
go to file -> preferences -> settings -> search for
Editor: Auto Indent and select none from drop down
also make this change in setting.json
"editor.formatOnSave": false,
yah this will work...
Solutions All In One
solution 1
config your settings.json file which in the .vscode folder, if not exists, just create one in the project root level directory.
1.1 disabled format on save for all files
{
"eslint.autoFixOnSave": false,
"editor.formatOnSave": false
}
1.2 only disabled format on save for .json file
{
"[json]": {
"editor.formatOnSave": false
}
}
solution 2
just using the VS Code GUI
To open your user and workspace settings, use the following VS Code menu command:
On Windows/Linux: File > Preferences > Settings
On macOS: Code > Preferences > Settings
2.1 open workspace settings
Command + Shift + P / Win + Shift + P
2.2 search the keyword (like, json) and set your config as you want
refs
https://code.visualstudio.com/docs/getstarted/settings
In addition to answers here, there are settings other than "editor.formatOnSave" that might be having a similar effect, which you might also want to disable - for example, I had enabled the following in my User Preferences (settings.json):
"editor.codeActionsOnSave": {
"source.organizeImports": true
},
my format was set to CMD k + s by default for VS Code to save without formatting. you could try that out
Disable the checkbox to disable the code formattor.
If it's for lonefy.vscode-js-css-html-formatter-0.2.3\out\src\formatter.json,
try applying:
{
"onSave": false,
"javascript": {...
...
}