I was trying out the customizations from this post (
Change highlight text color in Visual Studio Code) but it broke my VS Code settings.json.
I followed the first answer, the highlighting now works.
But when I click on the top to bring up the "Menu Bar", I get the message:
Unable to write into user settings. Please open the user settings to correct errors/warnings in it and try again.
{
"workbench.colorTheme": "One Monokai",
"security.workspace.trust.untrustedFiles": "open",
"files.autoSave": "afterDelay",
"editor.minimap.enabled": false,
"editor.wordWrap": "on",
"window.commandCenter": false,
"workbench.layoutControl.enabled": false,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.tabSize": 2,
"editor.mouseWheelZoom": true,
"html.hover.references": false,
"css.hover.references": false,
"less.hover.references": false,
"scss.hover.references": false,
"window.menuBarVisibility": "compact",
"window.zoomLevel": 1,
"editor.tokenColorCustomizations": {
},
"workbench.colorCustomizations": {
"editor.selectionBackground": "#e788ff7c",
"editor.selectionHighlightBackground": "#ff00005b",
"editor.selectionHighlightBorder": "#fbf300e0", ##border when you select
"editor.findMatchBackground": "#f352fe8f",
"editor.findMatchHighlightBackground": "#8e52fe9e",
"editor.findMatchHighlightBorder": "#fbf300e0" ##border when you search for something
}
}
I'm not sure what should I do to fix this issue.
Comments should start with //, not with ##.
VS Code's settings.json follows JSON with Comments (jsonc) mode:
https://code.visualstudio.com/docs/languages/json#_json-with-comments
In addition to the default JSON mode following the JSON specification, VS Code also has a JSON with Comments (jsonc) mode. This mode is used for the VS Code configuration files such as settings.json, tasks.json, or launch.json. When in the JSON with Comments mode, you can use single line (//) as well as block comments (/* */) as used in JavaScript.
In addition, the editor should have shown you that something was wrong.
Related
Prettier in VS Code uses the wrong indentation, even after I changed all the places I can think of to a width of "4".
Here are my file contents (some are maybe not necessary, but I added them while trying to fix it):
c:\Users\jp\Documents\Repositories\Game\Client\.prettierrc.js
module.exports = {
semi: true,
trailingComma: "none",
singleQuote: false,
printWidth: 120,
tabWidth: 4,
endOfLine: "auto",
trailingComma: "none"
};
c:\Users\jp\Documents\Repositories\Game\Client\.editorconfig
indent_size = 4
c:\Users\jp\Documents\Repositories\Game\Client\.eslintrc.js
module.exports = {
parser: "#typescript-eslint/parser", // Specifies the ESLint parser
parserOptions: {
ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
sourceType: "module", // Allows for the use of imports
ecmaFeatures: {
jsx: true // Allows for the parsing of JSX
}
},
settings: {
react: {
version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
}
},
extends: [
"plugin:react/recommended", // Uses the recommended rules from #eslint-plugin-react
"plugin:#typescript-eslint/recommended", // Uses the recommended rules from the #typescript-eslint/eslint-plugin
"plugin:prettier/recommended", // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
"prettier"
],
rules: {
// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
// e.g. "#typescript-eslint/explicit-function-return-type": "off",
"no-var": "error", // preference for let and const only
"prefer-const": "error",
"react/react-in-jsx-scope": "off",
"#typescript-eslint/no-empty-function": "off",
"react/prop-types": "off",
"prettier/prettier": [
"warn",
{
semi: true,
trailingComma: "none",
singleQuote: false,
printWidth: 120,
tabWidth: 4,
endOfLine: "auto",
trailingComma: "none"
}
]
}
};
c:\Users\jp\Documents\Repositories\Game\Client\.vscode\settings.json
{
"editor.formatOnSave": true,
"editor.formatOnType": true,
"prettier.tabWidth": 4,
"editor.tabSize": 4,
"jestrunner.jestCommand": "npm run test -- --watchAll=false"
}
My VS Code configuration is set to "4,", and in the bottom bar in VS Code it's set to "4". I also set "detect indendation" to false.
Here is what the Prettier extension output says when I format the document:
["INFO" - 17:18:30] Formatting file:///c%3A/Users/jp/Documents/Repositories/Game/Client/src/App.tsx
["INFO" - 17:18:30] Using config file at 'c:\Users\jp\Documents\Repositories\Game\Client\.prettierrc.js'
["INFO" - 17:18:30] Using ignore file (if present) at c:\Users\jp\Documents\Repositories\Game\Client\.prettierignore
["INFO" - 17:18:30] File Info:
{
"ignored": false,
"inferredParser": "typescript"
}
["INFO" - 17:18:30] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 17:18:30] Prettier Options:
{
"filepath": "c:\\Users\\jp\\Documents\\Repositories\\Game\\Client\\src\\App.tsx",
"parser": "typescript",
"semi": true,
"trailingComma": "none",
"singleQuote": false,
"printWidth": 120,
"tabWidth": 3,
"endOfLine": "auto"
}
["INFO" - 17:18:30] Formatting completed in 0.027ms.
It even says it found the right configuration file, yet uses the wrong indentation.
I restarted VS Code while making the changes to make sure nothing was cached.
In the parent path no .editorconfig is present.
I just don't have any idea where Prettier may take the wrong indentation from...
Edit: When I use the "Quick Fix" with "Fix all prettier/prettier problems", it uses the correct indentation. Formatting on save or Using "Format document" uses the wrong one. Output of the extension output window is the same.
Check if your detect indentation has been enabled. Disable it.
It's not obvious at first, but prettier has order of reading custom configs and is this one according to documentation:
Prettier uses cosmiconfig for configuration file support. This means you can configure Prettier via (in order of precedence):
"prettier" key in your package.json file.
prettierrc file written in JSON or YAML.
.prettierrc.json, .prettierrc.yml, .prettierrc.yaml, or .prettierrc.json5 file.
.prettierrc.js, .prettierrc.cjs, prettier.config.js, or prettier.config.cjs file that exports an object using module.exports.
.prettierrc.toml file.
I can only assume you forgot to check configuration in package.json, and remove these settings from there.
I installed Svelte for VS Code. When I saved .svelte file all comments get deleted. This does not happen for .html, .js or .jsx files. I also use this Prettier plugin. Sometimes I just want to temporarily comment them. How do I disable this feature?
Below is the markup and vs-config
<div
on:mouseup={event => {
// console.log('This line gets deleted on save for .svelte file');
}} />
{
"workbench.colorTheme": "Default Light+",
"workbench.editor.enablePreviewFromQuickOpen": false,
"workbench.editor.enablePreview": false,
"prettier.singleQuote": true,
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
},
"prettier.printWidth": 80,
"json.schemas": [
],
"editor.tabSize": 2
}
There are several developers working in my current project with different coding styles. Therefore, I need to configure my vscode with settings:
formatted only lines that were changed by me
formatting should run only when saving
possible to switch from eslint to tslint
My current config:
{
"editor.formatOnPaste": false,
"editor.formatOnType": false,
"editor.formatOnSave": false,
"editor.insertSpaces": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[typescript]": {
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
},
"[javascript]": {
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
},
"[json]": {
"editor.formatOnSave": true
},
}
Well, I would also hope to hear how developers solve a similar problem when working in Vim (because sometimes I use it). Thank you!
The August 2020 update came with an option to "Only format modified"
https://code.visualstudio.com/updates/v1_49#_only-format-modified-text
That should cover 1. and 2. i belive.
If you want to format via eslint --fix, thats something that I'm looking for the answer to as well.
only "eslint --fix" modified lines
I'm using VS Code and Cucumber extension https://marketplace.visualstudio.com/items?itemName=alexkrechik.cucumberautocomplete&ssr=false#overview doesn't work.
This is my settings.json in .vscode folder:
{
"cucumberautocomplete.steps": [
"src/step_definitions/*.js",
],
"cucumberautocomplete.syncfeatures": "src/features/*feature",
"cucumberautocomplete.strictGherkinCompletion": true,
"cucumberautocomplete.strictGherkinValidation": true,
"cucumberautocomplete.smartSnippets": true,
"cucumberautocomplete.stepsInvariants": true,
// "cucumberautocomplete.pages": {
// "users": "test/features/page_objects/users.storage.js",
// "pathes": "test/features/page_objects/pathes.storage.js",
// "main": "test/features/support/page_objects/main.page.js"
// },
"cucumberautocomplete.skipDocStringsFormat": true,
"cucumberautocomplete.formatConfOverride": {
"And": 3,
"But": "relative",
},
"cucumberautocomplete.onTypeFormat": true,
"editor.quickSuggestions": {
"comments": false,
"strings": true,
"other": true
},
"cucumberautocomplete.gherkinDefinitionPart": "(Given|When|Then)\\(",
"cucumberautocomplete.stepRegExSymbol": "'"
}
And this is what I have added to settings.json of VS Code:
{
"workbench.colorTheme": "Default Light+",
"editor.quickSuggestions": true,
"window.zoomLevel": 0
}
When in my feature file I get the message for each line:
"Was unable to find step for "Given I am on the dashboard page"cucumberautocomplete"
Can someone help to resolve this issue and make it work for VS Code?
Kind regards,
mismas
So it finally worked when I:
I. deleted .vscode/settings.json (including the folder)
II. added following in global settings.json of Visual Sudio Code (the one in Users etc directory)
{
"workbench.colorTheme": "Default Light+",
"editor.quickSuggestions": true,
"window.zoomLevel": 0,
"gherkin-autocomplete.featuresPath": "src/features",
"cucumberautocomplete.steps": [
"src/step_definitions/*.js",
],
"cucumberautocomplete.syncfeatures": "src/features/*feature",
}
III. restarted VS Code
Either is something wrong with the plugin => meaning they didn't implemented as they think it should work or documentation is out dated ...
I had to remove the line
"cucumberautocomplete.stepRegExSymbol": "'"
and then it worked for me.
Just remove or comment on below line from setting.json
"cucumberautocomplete.stepRegExSymbol": "'"
It worked for me.
Windows10:
navigate to %APPDATA%\Code\User (which is VScode config folder)
add
"gherkin-autocomplete.featuresPath": "features",
"cucumberautocomplete.steps": [
"features/step_definitions/*.js",],
"cucumberautocomplete.syncfeatures": "features/*feature"
restart vscode
i have problem with fresh installation of vs code. Im using it first time and one big annoying thing is for me that when i write in my html file for example:
<div id
and hit enter it takes me
<div id=""
but i have to ctrl+space to see autocompletion of css
id like to type and autocompletion start automaticly.
Trying user settings and workspace settings like that:
{
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
},
"editor.wordBasedSuggestions": true
}
doesnt work for me.
pls help
this is my new workspace config
{
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
},
"editor.wordBasedSuggestions": true,
"emmet.triggerExpansionOnTab": true,
"editor.wordBasedSuggestions": true,
// true is the default already
"emmet.showAbbreviationSuggestions": true,
"editor.snippetSuggestions": "top",
"emmet.showSuggestionsAsSnippets": true
}
this let me type div.classname and show list of my css classes but div#idname doesnt work :) dont know what to do
Use the emmet expansions here, it will be much easier.
div#myId
then enter or tab or will be expanded to:
<div id="myId"></div>
To use the tab completion change this to true in your settings:
"emmet.triggerExpansionOnTab": true,
You should be seeing the emmet suggestions without having to do a Ctrl-space. Try these settings:
// true is the default already
"emmet.showAbbreviationSuggestions": true,
"editor.snippetSuggestions": "top",
"emmet.showSuggestionsAsSnippets": true,
Also, these settings have no effect on your issue:
[will suggestions show up when typing within a string or comment]:
{
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
},
[suggestions will include all text in the document as well - generally clutters up your suggestion list but you want it anyway]:
"editor.wordBasedSuggestions": true