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.
Related
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
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.
why eslint give me this error
Parsing error: Unexpected token < in html file?
how can i solve this error?
my .eslint.json configs:
{
"env": {
"browser": true,
"commonjs": true,
"es2021": true
},
"extends": [
"airbnb-base"
],
"parserOptions": {
"ecmaVersion": 12
},
"rules": {
"strict": "off"
}
}
you need eslint-plugin-html to lint html file. the details can be found in this link: https://www.npmjs.com/package/eslint-plugin-html
Adding the below to ".eslintrc.json" file worked for me:
"ignorePatterns": [
"**/*.html"
]
One other option can be to add an .eslintignorefile. See the exmple below.
.eslintignore
.vscode/*
dist/*
assets/*
node_modules/*
**/index.html
**/index.*.html
**/assets/*.html
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.
I am getting this error when I try to change my settings
Unable to write into user settings. Please open the user settings to correct errors/warnings in it and try again.
Perhaps I have stared at this too long, but I dont see where I have an error. If I manually copy a setting over to the file, such as the "workbench.sideBar.location": "right" at the bottom,it works fine. Can anyone see my json error here? Version 1.30.0. This was occurring before updating to latest version
{
"files.autoSave": "onFocusChange",
"editor.fontSize": 18,
"editor.tabSize": 2,
"editor.wordWrap": "on",
"beautify.tabSize": 2,
"emmet.triggerExpansionOnTab": true,
"bracketPairColorizer.colorMode": "Independent",
"workbench.iconTheme": "material-icon-theme",
"workbench.tips.enabled": false,
"editor.parameterHints": false,
"highlight-matching-tag.leftStyle": {
"borderWidth": "0 0 0 3px",
"borderStyle": "dotted",
"borderColor": "yellow",
"borderRadius": "5px"
},
"highlight-matching-tag.rightStyle": {
"borderWidth": "0 3px 0 0",
"borderStyle": "dotted",
"borderColor": "yellowd",
"borderRadius": "5px"
},
"bracketPairColorizer.independentPairColors": [
["()", ["Aqua", "Orchid", "LightSkyBlue"], "Red"],
["[]", ["LightSkyBlue", "Orchid", "yellow"], "Red"],
["{}", ["LightSkyBlue", "Orchid", "Aqua"], "Red"]
],
"bracketPairColorizer.consecutivePairColors": [
["</", ">"],
["<", "/>"],
"<>",
["Gold", "Orchid", "LightSkyBlue"],
"Red"
],
"git.enableSmartCommit": true,
"editor.minimap.enabled": false,
"git.autofetch": true,
"php.validate.executablePath": "C:\\wamp64\\bin\\php\\php7.1.9\\php.exe",
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,
"workbench.colorTheme": "Default High Contrast",
"files.trimTrailingWhitespace": true,
"php-cs-fixer.executablePath": "${extensionPath}\\php-cs-fixer.phar",
"php-cs-fixer.lastDownload": 1538537777147,
"phpformatter.pharPath": "php-cs-fixer.phar",
"terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
"zenMode.hideTabs": false,
"workbench.startupEditor": "newUntitledFile",
"editor.autoClosingQuotes": "always",
"better-comments.highlightPlainText": true,
"emmet.includeLanguages": {
"javascript",
"HTML"
},
"workbench.sideBar.location": "right",
}
You need validate the settings.json format, put colons: i.e:
{
"yaml.schemas": {
"file:///home/yony/.vscode/extensions/docsmsft.docs-yaml-0.2.4/schemas/toc.schema.json": "/toc\\.yml/i"
},
"files.associations": {
"*.erb": "erb"
},
"emmet.includeLanguages": {
"erb": "html"
}
}
Change it to Default settings and re-configure it as you want
Add this default settings to your settings.json file
Simple copy and paste
>> Default Settings.json File <<