I'm using a reduced line height in VS Code to fit more code on screen, which has served me pretty well for my mostly-web work.
Now I'm dipping my toes into Rust and VS Code helpfully underlines mutable variables. The underline is pretty far from the text though and interferes with the next line:
VS Code is so very customizable, is there a way to move that line a few pixels up?
I'm not looking to disable it, but I would also consider alternative highlighting (e.g. background, bold, italics).
I'm not sure what your VSCode settings are, but they are most certainly non-standard.
This is what it looks like at my screen:
You can look at your settings by doing Ctrl + , and clicking Open Settings (JSON) in the top right corner.
Those are my settings:
{
"breadcrumbs.enabled": true,
"editor.formatOnSave": true,
"editor.renderWhitespace": "boundary",
"files.trimTrailingWhitespace": true,
"files.trimFinalNewlines": true,
"files.insertFinalNewline": true,
"telemetry.telemetryLevel": "off",
"window.titleBarStyle": "custom",
"workbench.editor.showTabs": false,
"workbench.editor.enablePreview": false,
"workbench.editor.enablePreviewFromQuickOpen": false,
"workbench.startupEditor": "none",
"workbench.enableExperiments": false,
"workbench.tree.indent": 24,
"workbench.tree.renderIndentGuides": "always",
"editor.detectIndentation": false,
"crates.useLocalCargoIndex": false,
"rust-analyzer.cargo.features": "all",
"window.zoomLevel": 1
}
If you configured the line distance that short on purpose, I'm not sure if you can actually modify the underline position. You could disable the underline, however: How do I disable the underlining of Rust variables and their methods in Visual Studio Code?
But I think the underline serves an important purpose, so I myself would increase the newline distance in your editor.
I often need to open and make small changes to projects which use different code formatting options than the ones I use. In order not to reformat the whole file, I usually open the user settings, search for settings containing "format", and then disable the options Editor: Format On Paste, Editor: Format On Save, Editor: Format On Type. When I return to my projects, I re-enable those options.
I would like this to be simpler, such as, binding a keyboard shortcut to quickly toggle all three of those options. However, I could not find shortcut actions that could bind to those.
Does anyone know if what I'm trying to achieve is possible?
You can do this with an extension: Toggle, which allows you to toggle many settings at the same time.
In your keybindings.json:
{
"key": "alt+capslock", // whatever keybinding you wish
"command": "toggle",
"when": "editorTextFocus",
"args": {
"id": "toggleFormats",
"value": [
{
"editor.formatOnType": true,
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"window.enableMenuBarMnemonics": false
},
{
"editor.formatOnType": false,
"editor.formatOnPaste": false,
"editor.formatOnSave": false,
"window.enableMenuBarMnemonics": true
}
]
}
},
I haven't tested it but it should work.
The only problem is there is no visual indicator which state you are in - perhaps you can find some other setting to toggle that would do so and be "innocuous." That is why I threw enableMenuBarMnemonics in there, on my keyboard the capslock key lights up when the formats are set to false and you can also check by doing alt+F to see if the main menu File option is opened. You may not need a visual reminder to indicate the state or come up with a better one.
Prettier extension on my VS code is unable to format HTML.
On load of VS code I am getting this error in my console -
On trying to format, I see this message in the bottom -
Note - TS files and SCSS files are being formatted properly. It is breaking only for HTML files.
Below is my HTML language based settings -
{
"tslint.rulesDirectory": "./node_modules/codelyzer",
"typescript.tsdk": "node_modules/typescript/lib",
"window.zoomLevel": 0,
"editor.formatOnSave": true,
"prettier.singleQuote": true,
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"files.associations": {
"*.html": "html"
}
}
These are the extensions installed and enabled -
Prettier version - 2.2.2
VS Code version (from About VS code section) :
Version: 1.38.1
Commit: b37e54c98e1a74ba89e03073e5a3761284e3ffb0
Date: 2019-09-11T13:31:32.854Z
Electron: 4.2.10
Chrome: 69.0.3497.128
Node.js: 10.11.0
V8: 6.9.427.31-electron.0
OS: Darwin x64 17.7.0
Please let me know how to get this issue fixed. Please leave a comment if any more info is needed. Thanks.
Same for me. I managed to solve it as follow:
{
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.formatOnType": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
}
}
This allowed me to use prettier globally and use built in html formatter for html.
Also allowed the formatting to happen on save and while typing.
The part responsible for Prettier formatting html
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
I got the same issue, the cause can be updating the VS Code.
fixed it by setting the Default Formatter of Text Editor
Go to Settings (Ctrl+, for windows), search for 'Default Formatter'
Set the formatter in dropdown (esbenp.prettier-vscode) for prettier. this can change if you are using any other formatter.
Short Answer:
open Prettier from the button on right bottom corner
scroll up to see error list.
fix the wrong semantic you wrote.
ex:
photo for error example
Long Answer:
Most of the times the reason why Prettier doesn't work is that you have a markup error.
ex: you haven't close the angle braces or you close the tag more that one time
to know the error and fix it : look at short answer.
Firstly, you may want to solve the compilation error you have in regards to Vue.js. You may need to grab some extensions for VS-code as detailed here.
I have heard that Prettier has some issues formatting HTML at times, and VS Code itself already has HTML formatting support. You can stop prettier from formatting HTML specifically using the following command:
"prettier.disableLanguages": ["html"]
You could also change this line in your configs to enable VS code html language support instead.
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
}
Hope that helps!
For me i found that prettier was refusing to format files, however there was no errors in the output window in vs code. usually this happens when the html is not valid: missing tags, or tags closed twice, or tags that are not closed.
To see the errors, i ran prettier from the command line, and for each file it refused to format, it showed an error of what was wrong, like in the image below:
Had this problem crop up today after working fine with HTML previously.
Tried editing default formatter, format on save, reloading prettier etc.
Eventually tried the solution proposed above
edit settings.json
make sure "[html]": has default formatter line set to the below, found it on line 40.
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
Disabling "editor.formatOnSaveMode": "modifications" fixed the issue for me in Angular's .component.html files.
I had a lot of problems with getting Prettier to format on save. It turned out to be an issue with the default timeout settings in VSCode. Using these settings finally worked for me:
{
...
"editor.codeActionsOnSaveTimeout": 100000,
"editor.formatOnSaveTimeout": 100000,
...
}
For reference, here are all my settings concerning linting and formatting:
{
"editor.codeActionsOnSave": { "source.fixAll": true },
"editor.codeActionsOnSaveTimeout": 100000,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.formatOnSaveTimeout": 100000,
"editor.formatOnType": true,
"eslint.alwaysShowStatus": true,
"eslint.enable": true,
"html.format.enable": false,
"htmlhint.enable": true,
"prettier.requireConfig": false,
"prettier.useEditorConfig": true,
"stylelint.autoFixOnSave": true,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
}
I use the following extensions (again limited to linting/formatting):
ESLint (dbaeumer.vscode-eslint)
Prettier (esbenp.prettier-vscode)
stylelint-plus (hex-ci.stylelint-plus)
HTMLHint (mkaufman.htmlhint)
You might want to make sure that all the npm packages needed by your extensions are installed. Locally if possible.
I sincerely hope this helps. Setting up linters and formatters is still a science in its own right.
P.S. I get an error like your 'cannot format' message whenever I try to format a file that is not inside the working directory. But looking at the path in your message suggests that this is not an issue in your case.
If the formatting fails, see if there are any errors in the Prettier console.
If not, use the following settings:
"[html]": {
// "editor.defaultFormatter": "esbenp.prettier-vscode"
"editor.defaultFormatter": "vscode.html-language-features"
},
Once the file has been formatted, put back the original settings:
"[html]": {
// "editor.defaultFormatter": "esbenp.prettier-vscode"
"editor.defaultFormatter": "vscode.html-language-features"
},
And try formatting again. This time Prettier will have better input to work with.
The requirePragma option should be false (it is by default) in .prettierrc or VS code prettier settings (dotfile overrides VS).
I simply solved it by right-clicking in the file, select 'Format Document with' and choose 'prettier'. I don't know how to permanently set it up but it's a quick workaround.
This is what worked for me.
In the settings.json, capitalize the h in [html]:
...
"[Html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
...
prettier formatter doesn't support Format on selection or Formate On Save for HTML files - modification mode, So for this, you can set formatOnSaveMode:'html' for HTML files in settings.json
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSaveMode": "file"
},
Format selection works on several languages depending on what Prettier itself supports. The following languages currently are supported:
javascript
javascriptreact
typescript
typescriptreact
json
graphql
I just changed the default formatter for HTML to VScode's HTML formatter.
Open the command palette with Ctrl + Shift + P (or use ⌘ + Shift + P for Mac).
To open the user settings.json file search for and select the Open User Settings (JSON) option.
Make the following changes.
// "[html]": {
// "editor.defaultFormatter": "esbenp.prettier-vscode"
// },
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
Adding this to the bottom of my VSCode User settings did the job for me:
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
I have found Prettier to be annoying sometimes with HTML. Hence in my case this worked for me for HTML formatting-
user json file settings as follows-
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "lonefy.vscode-JS-CSS-HTML-formatter"
},
For HTML I use JS-CSS-HTML Formatter extension in VSCode as the default formatter (as you can see in code above). This formats the HTML code well.
I had the same issue and fixed it by navigating to the settings (ctrl + shift + ,)
type in the search default format
then check HTML -> format: enable box
For me, I had to check the notifications in the bottom right corner. Once I clicked on it, you can configure which formatter to use. For some reason, there are more than one editor. I'm gonna go on a limp and assume that it's conflicting somehow with the editors global config file.
To open the command palette, you can use COMMAND + SHIFT + P on macOS or CTRL + SHIFT + P on Windows.
In the command palette, search for format and then choose Format Document.
You may then be prompted to choose which format to use. To do so, click the Configure button. Then choose Prettier - Code Formatter or another prettier code formatter.
Your code is now formatted with spacing, line wrapping, and consistent quotes.
Simple and easy way to make it work.
Steps:
Open VSCode, go to Settings (Ctrl+, for windows), search for Default Formatter
Set the formatter in dropdown (esbenp.prettier-vscode) for prettier. this can change if you are using any other formatter.
Extra step, if you want to use it on the save file. Just search for Format on save, then check that it is TRUE
Restart your VSCode, and Happy coding. 🤗👏
One of my peers installed the following into the workspace vscode:
"prettier.disableLanguages": ["html"],
That would do it.
Use This as your config
"prettier.singleQuote": true,
"prettier.useEditorConfig": false,
"prettier.useTabs": true,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
"[Html]": {
//"editor.defaultFormatter": "vscode.html-language-features"
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
this work for me
Try restarting VS Code
I've had Prettier stop formatting things when VS Code prompted me to restart to update. Closing and opening VS Code got it working again.
While coding I hit some ctrl keys and totally lost my screen display. The font size has to be 60px! Removed Vs code from Control Panel and deleted settings.json. Downloaded and installed latest Vs code. When Vs code was brought up I started entering values. Added values from saved settings.json file before deletion. Problem returned.
Deleted vscode program via Control Panel, deleted settings.json.
Downloaded and installed latest release of Windows 10 VSCode
Started reentering settings.json values.
Problem returned. Feel like it is a UI problem??
{
"workbench.startupEditor": "newUntitledFile",
"workbench.iconTheme": "vscode-icons",
// Controls the font size in pixels.
"editor.fontSize": 8,
// Controls if the editor should automatically adjust the indentation when
// users type, paste or move lines. Indentation rules of the language must be
// available.
"editor.autoIndent": true,
// The number of spaces a tab is equal to. This setting is overridden based
// on the file contents when `editor.detectIndentation` is on.
"editor.detectIndentation": true,
"editor.insertSpaces": true,
"editor.tabSize": 4,
"editor.wordWrap": "on",
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"workbench.colorTheme": "Oceanic Next (dimmed bg)",
"editor.minimap.enabled": false,
"files.autoSave": "off",
"window.zoomLevel": 21,
"terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
"explorer.confirmDelete": false,
"vsicons.dontShowNewVersionMessage": true,
// Enable/disable built-in PHP validation.
"php.validate.enable": true,
// Points to the PHP executable.
"php.validate.executablePath": "C:/Program Files/PHP/php.exe",
"phpfmt.php_bin": "\"C:\\Program Files\\PHP\\php.exe\"",
}
Tried to include several screen dumps but could not figure out how to do it.
I can best describe the problem as trying to display a 60" TV screen on a 15" Laptop Monitor.
I had the same problem. For me it was this line in settings.json:
"window.zoomLevel": -1,
Setting it to the following solved the issue:
"window.zoomLevel": 0,