I've set up a Vue.js project using vue-cli and work on it in VS Code and Vetur. ESLint is configured with the standard profile. I'd like the 'Format Document' command to produce a format which is valid for the eslint.
I've been able to solve the issue for single/double quotes and semi-columns with following .prettierrc.json:
{
"semi": false,
"singleQuote": true
}
Now I'm trying to fix the issue, where no space is being added before method parenthesis:
Definition function () becomes function()
Method call showLoginDialog () becomes showLoginDialog()
I've tried changing the default formatter as described here
Does a default prettierrc which respects eslint standard exist?
If not, how can the above mentioned issue with spaces be fixed?
[edit] I've pushed the branch containing the .prettierrc.json config: https://github.com/taconaut/Sppd.TeamTuner/commit/acd93ab9e06e2e77849af7a346609ba6bf5d639c. The only part (I'm aware of) which doesn't work is the above mentioned issue with spaces between function and parenthesis? AFAICT this should have been taken care of with "spaceBeforeFunctionParen": true which doesn't seem to have any effect.
Related
I am trying to set a default formatter for a specific workspace to Prettier and make format on save work nicely with each other. I tried this as follows:
(format on save is also enabled in the User settings)
For some reason, this is not working for me. If I manually run the format command via VS Code's command pallet, it formats using Prettier just fine.
Is there something I got wrong or another setting that needs configuring?
Check if in your settings.json file, { "editor.formatOnSave": false } is set to False, if yes, set it to true, I don't know why, but this value could still be set to false, even if both your above settings are turned on.
check:
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.configPath": "./personal.yml"
}
if not, update the editor.defaultForamatter here to the shown value
Also, in your Editor:Default Formatter to None. Note that this is an alternative method (if above doesn't work)
Scroll down to check if formatter if enabled(checked) for all your languages
If this too doesn't work, one can always try rolling to a different version.
Or as a last resort, you can try uninstalling and installing vscode
Follow these steps:
CTRL + SHIFT + P
Format Document (in pop-up bar)
Select Format Document
Select Configure Default Formatter...
Select Prettier - Code formatter
Done!
I have an SCSS file that contains a calc() function.
When i use a calc function without spaces around the operator like so calc(var(--primary-color-h)+5) the transpiled CSS result doesn't work. Only when i set spaces around the operator does it work; like this calc(var(--primary-color-h) + 5)
How would i instruct VSCODE to created spaces around the operator upon save.
I have prettier, scss Formatter and StyleLint installed. But neither seems to fix it.
tnx,
RDG
You can use Stylelint and the following two rules:
function-calc-no-unspaced-operator
function-whitespace-after
These will flag the lack of space before and after the + operator, respectively. See this demo.
This rules are turned on the SCSS standard config, which you can extend in your Stylelint configuration object:
{
"extends": "stylelint-config-standard-scss"
}
How would i instruct VSCODE to created spaces around the operator upon save
You can use the editor.codeActionsOnSave option from the official Visual Studio Code extension for Stylelint. And the following to your VS Code settings file:
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
}
I just started using VSCODE and faced with an annoyance every time I paste in YAML code in an existing YML file.
Basically the editor seems to auto format the document and in doing so messes up the significant spaces in the document. This causes builds in Azure Devops to break.
Although VS code formats the document nicely into collapsible regions, the formatting annoyance makes it hard to use.
Any help would be appreciated.
BEFORE:
AFTER:
I fixed this by changing editor.autoIndent settings for yaml and dockercompose language
"[yaml]": {
"editor.autoIndent": "advanced"
},
"[dockercompose]": {
"editor.autoIndent": "advanced"
}
In VsCode, press ctrl+shift+p (cmd+shift+p in Mac), and search for Preferences: Open User Settings (JSON). There I added this line:
"[yaml]": {
"editor.defaultFormatter": "redhat.vscode-yaml"
},
I picked it because it contains the word yaml, so I figured it must be yaml specific.
Anyhow, it seems to do a pretty good job for me.
Turn off the setting format on paste. This is a global setting, but plugins sometimes have their own, so if you're running a formatter like prettier, you'll need to see whether this is even an option with that plugin.
Looks like the problem is in the first line. Maybe when you copy the code, you're not copying the indentation on the first line.
One trick I use, is copying from the end of the preceding line, so the copied code starts with a newline, and then the paste is perfect.
Or just add the indentation on that first line, after pasting.
I got a VSCode JSLint extension and I got its settings pointing to an .eslintrc file where I have the following specified for indentation:
{
...
"indent" : [1, "tab"]
...
}
The problem is, it's still putting the squiggly green lines where I have some tabs and I can't tell where anything's going wrong with any settings.
I have evidence the rc file is actually working because I was successfully able to change it from single to double-quotes. However it appears to completely ignore the indentation setting inside my VSCode.
You could simply disable the use_spaces rule. It's separate from the indent rule you changed. A bit over an oversight from JSLint.
There were quite a few complains about that rule, even here on SO. Quite a few people (not only on SO) suggest switching to JSHint instead. Personally I've only used ESLint and therefore don't know much about the differences, and I'd suggest checking those for yourself anyway.
I used the Vue cli to create a project and it uses 2 spaces by default. I want to get 4 spaces. I've turned off detect indentation, set tab size to 4 but no amount of running format document will change - for example - this little js file that was created.
I also tried to change things with eslint. It spots the errors but --fix has no effect
If I start a new object then the spaces are correct though.
I am using an extension called Vetur and in my VS Code settings file I added the following rule: "vetur.format.options.tabSize": 4,
Also for initial indentation I have added the following rules:
"vetur.format.styleInitialIndent": true,
"vetur.format.scriptInitialIndent": true,
If you are not using this extension, do you have a .editorconfig file in your solution and/or have you looked at your VS Code settings for conflicting rules?