I have been experiencing a recent issue with formatting in .scss, .css and .html files in Visual Studio Code and I can't seem to figure out how to return it to my preferred setting.
Before, I could type a class name, open the bracket and click enter and it would be formatted nicely as shown below. Now when clicking enter, it just drops to a new line and I have to manually create more space and indenting.
Before
.test {
|
}
After
.test {
|}
settings.json configuration
{
"editor.bracketPairColorization.enabled": true,
"workbench.editor.highlightModifiedTabs": true,
"workbench.colorTheme": "Moonlight II Italic",
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,
"editor.tabSize": 2,
"svelte.language-server.runtime": "/usr/local/bin/node",
"npm.keybindingsChangedWarningShown": true,
"window.zoomLevel": 1,
"files.trimFinalNewlines": true,
"editor.language.brackets": [],
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"files.associations": {
"*.html": "twig"
},
"emmet.includeLanguages": {
"twig": "html"
},
"editor.formatOnType": true
}
Any help to fix these formatting issues would be greatly appreciated!
you can try to create snippets of your own ,
and for that you can check this https://youtu.be/wxckctXHSC0
or
you can try resetting your preferences
Related
I am beginner, and while configuration of VS Code I've got an error.
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"emmet.syntaxProfiles": {
"html": {
"inline_break": 2
}
},
Error shows as underlined key "[html]".
At first the error displayed as underlined colon mark after "[html]", then it has changed although I just copied it, deleted and pasted it again.
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[dart]": {
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.rulers": [
],
"editor.selectionHighlight": false,
"editor.suggest.snippetsPreventQuickSuggestions": false,
"editor.suggestSelection": "first",
"editor.tabCompletion": "onlySnippets",
"editor.wordBasedSuggestions": false
}
}
A Sample settings.json is added. You're missing braces in the start and end.
I am using Macos -v Ventura 13.0.1....after updating the Os my VScode starts misbehaving...as I run code the terminal opens and then closes immediately without showing anything..
These are my setting.json
{
{
"window.zoomLevel": 1,
"code-runner.runInTerminal": true,
"files.autoSave": "onFocusChange",
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.CustomBrowser": "chrome",
"explorer.confirmDragAndDrop": false,
"editor.minimap.enabled": false,
"files.associations": {
"*.ejs": "html"
},
"workbench.iconTheme": "helium-icon-theme",
"workbench.colorTheme": "One Dark Pro Mix",
"terminal.integrated.enableMultiLinePasteWarning": false,
"terminal.integrated.defaultProfile.linux": "",
"terminal.integrated.env.linux": {
}
}
}
I have tried to delete/reset settings json but nothing changes and rest settings I am unable to understand
I'm a learner programmer. I wanted to prevent the VS code from opening the previous projects / session. I entered its settings to prevent window restore. But I cannot change it because there is some kind of error. I run the JSON file through a JSON validator, just as I read somewhere (but I know nothing about JSON yet).
The validator found a mistake in the syntax of the first line. But I don't know how to fix it. For me it has the same pattern as other lines:
Error:
"diffEditor.wordWrap": "on",
"editor.wordWrap": "on",
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.fontSize": 16,
"security.workspace.trust.untrustedFiles": "open",
"workbench.iconTheme": "Monokai Pro Icons",
"todohighlight.defaultStyle": {},
"workbench.colorTheme": "Monokai Dimmed",
"emmet.syntaxProfiles": {
"html": {
//if element created is more than 2, it will break to new line for each element
"inline_break": 2,
}
}
// the message from the validator
Error: Parse error on line 1:
...diffEditor.wordWrap": "on","editor.word
-----------------------^
Expecting 'EOF', '}', ',', ']', got ':'
But it's not clear for me at all.
The two surrounding braces were missing:
{
"diffEditor.wordWrap": "on",
"editor.wordWrap": "on",
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.fontSize": 16,
"security.workspace.trust.untrustedFiles": "open",
"workbench.iconTheme": "Monokai Pro Icons",
"todohighlight.defaultStyle": {},
"workbench.colorTheme": "Monokai Dimmed",
"emmet.syntaxProfiles": {
"html": {
//if element created is more than 2, it will break to new line for each element
"inline_break": 2,
}
}
}
I found the answer. I managed to reset the JSON file in VS Code settings by simply deleting its content and by restarting the VS code.
I'm new to SCSS and I'm using VS Code's extension to watch my SCSS, I've set-up my settings.json file and everything works - however - when I watch my SCSS files and save, it creates two .css files.
index.css
main.css
Index.css is an empty .css file
Main.css is a .css file with all of my styling in it.
Why does it keep on generating the empty index.css file ?
Here is my settings.json file's content to help out a little.
{
"editor.accessibilitySupport": "off",
"window.zoomLevel": 0,
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.donotVerifyTags": true,
"[html]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[javascript]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"workbench.iconTheme": "material-icon-theme",
"editor.minimap.enabled": false,
"javascript.updateImportsOnFileMove.enabled": "always",
"workbench.colorTheme": "Night Owl",
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
// "python.jediEnabled": false,
"[python]": {
},
"editor.fontFamily": "Input",
"editor.fontSize": 16,
"[php]": {
"editor.defaultFormatter": "kokororin.vscode-phpfmt"
},
"liveSassCompile.settings.autoprefix": [],
"liveSassCompile.settings.formats": [
{
"format": "compact",
"extensionName": ".css",
"savePath": "/dist/assets/css"
}
],
"liveSassCompile.settings.generateMap": false
}
I figured out why it happened, so I'll post an explanation to help whoever came across a similar issue.
I created a partial without adding the _ in front of it.
Here is my folder structure with my file named wrong:
- scss
- pages
- pages.scss
Here is my folder structure with my file named correctly:
- scss
- pages
- _pages.scss
Hope it helps.
{
"fonts.fontSize": "14px",
"fonts.fontFamily": "'SourceCodePro-Medium', ＭＳ ゴシック, 'MS Gothic', monospace",
"themes.theme": "daugther.of.obsidian",
"noDistractions": false,
"wordWrap": true,
"BracketsNewProjectExtension.newProjectsFolder": "C:/Users/Family/Desktop/team2019site",
"closeBrackets": false,
"closeTags": {
"whenOpening": false,
"whenClosing": false,
}
}
Brackets is saying this preferences file is invalid upon startup and none of the preferences are getting applied.
Thanks for the help and have a nice day.
You can use jsonlint.com to validate your json. it seems that you have an extra "," after whenClosing.