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,
Related
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 have installed prettier extension for VS Code, set it as default formatter, also set format on save to true in VS Code's settings file, and files are set to be saved automatically after some time delay.
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"files.autoSave": "afterDelay"
But prettier is not formatting my code when file is saved automatically after 2 seconds delay. Code is only formatted if i:
manually format the code using option + Shift + F keyboard shortcut.
press command + S
Here's my .prettierrc file
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true
}
How can i make prettier format my code automatically on file save?
After some searching, i found out that the following setting
"editor.formatOnSave": true
only works if:
Code formatter is available.
The files are NOT set to be saved after a delay.
And the editor must not be shutting down.
I had set the prettier as the default formatter using the following setting:
"editor.defaultFormatter": "esbenp.prettier-vscode"
But I had set files to be saved automatically after a delay as specified in the following setting:
"files.autoSave": "afterDelay"
This setting was the cause of the problem in my case.
"files.autoSave" setting can have one of the following values:
"off": A dirty editor is never automatically saved.
"afterDelay": A dirty editor is automatically saved after the configured files.autoSaveDelay.
"onFocusChange": A dirty editor is automatically saved when the editor loses focus.
"onWindowChange": A dirty editor is automatically saved when the window loses focus.
Setting "files.autoSave" to any possible value other than "afterDelay" will fix the issue. I solved this issue by setting "files.autoSave" to "onFocusChange".
This seemed to have happened with a recent update, but when I start typing anything that could have a suggestion, it drops down a box showing potential completion suggestions; it obscures code and is distracting, and I only want it to happen when I manually activate it, like with Ctrl+Space.
However, I'm not finding the option to stop it from happening while typing... the best I can find is in File > Preferences > Settings > Editor: Quick Suggestions (Controls whether suggestions should automatically show up while typing.), which just has a link to "Edit in settings.json", when I click that I get these options:
{
"editor.hover": false,
"editor.wordBasedCompletion": true,
"editor.parameterHints": false,
"editor.parameterHints.cycle": true,
"editor.hover.delay": 3000,
"editor.hover.sticky": false,
"editor.parameterHints.enabled": false,
"liveServer.settings.donotShowInfoMsg": true,
"files.autoSave": "onWindowChange",
"editor.fontSize": 12,
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
"debug.node.autoAttach": "on",
"terminal.external.windowsExec": "C:\\Program Files\\Git\\git-bash.exe",
"terminal.explorerKind": "external",
"editor.quickSuggestionsDelay": 0,
"workbench.colorTheme": "Default Light+",
"editor.suggestOnTriggerCharacters": false,
}
Everything looks correct there... I change a few and it doesn't fix it. I'm not sure what I'm supposed to click or whatever to disable this annoying feature.
I am using 1.36.1
I think the setting you are looking for is
"editor.quickSuggestions": {
"other": false,
"comments": false,
"strings": false,
}
Please add it in settings.json
I've just made the switch from Atom to VSCode.
When I used Atom and I'm typing JSX in .js files, I could type anything and press tab and it would turn what I tabbed into a custom component. For example, asdf and then tab would give <asdf></asdf>.
Now I have VSCode along with Emmet but this only works some of the time. I've experimented with Emmet and everything works except for basic custom components
All the HTML tags work as expected. i.e div.blue & tab return <div className="blue"></div>
Nesting works asdf>jkl & tab return
<asdf>
<jkl></jkl>
</asdf>
For some reason adding a colon triggers it. as:df & tab return <as:df></as:df> but asdf & tab does not return <asdf></asdf>. I just get my cursor tabbed forward.
I'm not sure whether Intellisense or Snippets are interfering in some way.
The relevant extensions I have installed are JavaScript and TypeScript Intellisense v0.0.7, Javascript Snippet Pack v0.1.5 and simple React Snippets 1.2.2.
And here are my settings:
{
"editor.formatOnSave": true,
"editor.tabSize": 2,
"editor.wordWrap": "on",
"prettier.singleQuote": true,
"prettier.jsxBracketSameLine": true,
"prettier.semi": false,
"prettier.useTabs": true,
"html.format.indentInnerHtml": true,
"workbench.colorTheme": "Base16 Tomorrow Dark",
"liveServer.settings.donotShowInfoMsg": true,
"window.zoomLevel": 0.5,
"editor.fontSize": 11,
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
}
I've found the answer. In settings add "emmet.triggerExpansionOnTab": true and it will work the way I want it to. By default it was set to false
I have got a "large" project with ~2000 files. I want to change my indentation on the whole project to tabs (with tab size 2). I already changed the workspace settings with theese:
{
"editor.insertSpaces": false,
"editor.tabSize": 2,
"editor.detectIndentation": true,
"editor.formatOnSave": true,
"editor.formatOnPaste": true
}
I also bound a shortcut key to the "convert indentation to tabs" command. Is there any way to avoid to call the command and save file after file?