vscode format modified lines with eslint - visual-studio-code

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

Related

How to fix broken settings.json in VS code?

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.

"Svelte for VS Code" with Prettier deletes commented code

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
}

Cucumber (Gherkin) Full support extension for VS Code was unable to find step for

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

VS Code autocompletion without ctrl+space in html file using linked css file

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

Format with yapf is silently erroring

Using the Python extension, with yapf - nothing happens when I hit format:
VSCode Version: 1.0.0
OS Version: OSX 10.11.4
My workspace settings:
// Place your settings in this file to overwrite the default settings
{
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/js-build": true
},
"editor.scrollBeyondLastLine": false,
"python.pythonPath": "/Users/joshma/.envs/venv/bin/python",
"python.linting.flake8Path": "/Users/joshma/.envs/venv/bin/flake8",
"python.linting.pylintEnabled": false,
"python.linting.flake8Enabled": true,
"editor.formatOnType": true,
"python.formatting.provider": "yapf",
"python.formatting.yapfPath": "/Users/joshma/.envs/venv/bin/yapf"
}
The steps I took:
Rewrite a function call to foo('a' )
Verify that running cat path/to/file.py | yapf formats that line to be foo('a')
Select entire file, cmd + shift + p, Format Code.
Nothing happens :(
It's possible I don't have some path/configuration set up correctly - is there some way to debug this?
I think you are missing this option,
python.formatting.formatOnSave
This is my configuration and the formatting is working,
"python.formatting.formatOnSave": true,
"python.formatting.provider": "yapf",
"python.formatting.yapfPath": "/usr/bin/yapf"
Try only to Format On Save option:
Press Cmd + ,
Search for Format On Save option and chack it on.
Or add the following in settings.json:
{
"python.formatting.provider": "yapf",
"editor.formatOnSave": true,
}