I am using VS Code and Veture extension when writing .vue files.
Currently the formatter automatically places all html attributes on a new line. Like so
<v-item-group
class="shopCategoriesImageGroup"
multiple
v-for="(item, index) in getProductCategoryIcons"
:key="index"
>
I would like to keep them on one line. Desired result:
<v-item-group class="shopCategoriesImageGroup" multiple v-for="(item, index) in getProductCategoryIcons":key="index" >
From VS Code setting panel Veture has these formatting options:
none
prettyhtml
js-beutify-html
prettier
Following the docs:
https://vuejs.github.io/vetur/formatting.html
I tried using prettier, configured html whitespacing, no luck there. These does not seem to be a configuration option that allows for html attribute preservation on a single line.
The desired effect appears only if I use none as a formatter. But that requires me to manually format the code.
Any idea what configuration options I should set so that the code formats on a single line automatically on save ?
Or should I try another extension ?
Solved It !!!
You have to set the print width property to a bigger number. Like this:
"vetur.format.defaultFormatterOptions": {
"prettyhtml": {
"printWidth": 250, // No line exceeds 250 characters
}
}
Found the information here: https://github.com/vuejs/vetur/issues/114 thanks to Phill's comment.
UPDATED
VETUR changed default html formatter to "prettier", it says in documentation...
// settings.json from vscode
"vetur.format.defaultFormatterOptions": {
"prettier": {
"printWidth": 120
}
// "prettyhtml": {
// "printWidth": "80",
// "wrapAttributes": true,
// "sortAttributes": true
// }
},
Related
"rust-analyzer.checkOnSave.command": "clippy",
"[rust]": {
"editor.defaultFormatter": "rust-lang.rust-analyzer",
"editor.formatOnSave": true
},
I have these rust settings in vscode. They work fine for formatting, but the line length is shorter than I'd like. Is there a way I can adjust the max line length?
Put a rustfmt.toml at the project root (rust-analyzer respects it), and use rustfmt settings:
max_width = <number you'd like>
I'm newer on vim and your forks. To have a smoother transition I'm using Lunar Vim, but I need to change some option about the formatter, for example:
How I need to format:
<img src={ item.image } alt ={ item.descripton } />
But when I save, the Vim format like:
<img src={item.image} alt ={item.descripton} />
(Without spaces)
I need to change this, or remove the auto formatter.
There are two ways to do this, you can do it with the easy way (answer of Jorge Dorino).
File: /home/user/.config/lvim/config.lua
lvim.format_on_save = true -- Disable this line
Or you can keep this line and activate the prettier formatter https://prettier.io/docs/en/options.html , and configure your own rules to html files formatting.
(You need to install prettier or prettierd before do this)
File: /home/user/.config/lvim/config.lua
local formatters = require "lvim.lsp.null-ls.formatters"
formatters.setup {
{ exe = "prettierd", filetypes = { "html" } }
}
I want to develop an extension for Visual Studio Code.
I'v registered a CompletionItemProvider for typescript, when I'm trying to write in quotes the auto completion does not work.
For example I have this code:
function buildProvider(language : vscode.DocumentSelector, label : string, text : string | vscode.CompletionItemLabel){
return vscode.languages.registerCompletionItemProvider('typescript', {
provideCompletionItems(document: vscode.TextDocument, position: vscode.Position, token: vscode.CancellationToken, context: vscode.CompletionContext) {
const simpleCompletion = new vscode.CompletionItem('', vscode.CompletionItemKind.Text);
simpleCompletion.label = label;
simpleCompletion.insertText = text.toString();
return [
simpleCompletion,
];
}
});
}
If I write in typescript the auto completion work:
Auto completion works
If I write in quotes it doesn't work without using Ctrl + Space.
Auto completion does not works
What can I do to enable the auto completion in quotes?
That behaviour, not working in strings, is probably a result of the setting:
editor.quickSuggestions.
Try setting it like this:
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": true // this is the key setting, default is false3
}
That will fix it for you or anyone with the same "strings": true setting.
You can change a user's default settings in an extension like this in your `package.json - beware they may not like you changing their settings!!:
> #### Configuration Defaults Overrides
>
>
> You can now override defaults of other registered configurations
> through `configurationDefaults` contribution point in `package.json`.
> For example, the following snippet overrides the default behavior of
> `files.autoSave` setting to auto save files on focus change.
```jsonc
"contributes": {
"configurationDefaults": { // applies to all languages
"files.autoSave": "onFocusChange"
}
}
Note: Configurations with application or machine scopes cannot be
overridden.
From https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_63.md#configuration-defaults-overrides
Whenever I enter a . after a object the autocomplete dropdown contains a lot of unnecessary css classnames as options:
Is it possible to ignore css files for ts/tsx intellisense, so i only get relevant options?
VS Code version: 1.37.1
"[typescript]": {
"editor.suggest.showClasses": false
},
"[typescriptreact]": {
"editor.suggest.showClasses": false
}
Basically the same as Mark's answer but it looks like "editor.suggest.filteredTypes" has been deprecated since VSCode >= 1.40 in favor of settings like "editor.suggest.showClasses".
Try something like this in your settings:
"[typescript]": {
"editor.suggest.filteredTypes": {
"class": false,
}
},
"[typescriptreact]": {
"editor.suggest.filteredTypes": {
"class": false,
}
}
[it would be nice if you could combine these but [typescript, typescriptreact] didn't work for me.
From types of completions it looks like it is class that you want to filter out.
And see create language-specific settings to see how to create settings for specific languages.
You will have to reload vscode to see these changes take effect.
EDIT: It is Beautify that is adding the new lines. Not sure which rule though.
Is there a way to stop parameter lists and import lists from adding new lines per each list item when formatting code with?
E.g stop this:
function view(state$) {
return state$.map(({weight,height,bmi}) =>
div([
renderWeightSlider(weight),
renderHeightSlider(height),
h2('BMI is ' + bmi)
])
);
}
from becoming this:
function view(state$) {
return state$.map(({
weight,
height,
bmi
}) =>
div([
renderWeightSlider(weight),
renderHeightSlider(height),
h2('BMI is ' + bmi)
])
);
}
When right-clicking and selecting "format document"?
It also does it with imports like so:
import {
makeDOMDriver,
h1,
a
} from '#cycle/dom';
However it is unwanted.
create or edit .jsbeautifyrc file in your root from you vscode project and put in to the file this json property
{
"brace_style": "collapse,preserve-inline"
}
this will also prevent to format all JavaScript object
Include "brace_style": "collapse,preserve-inline" as Yitzchak said inside the .json settings file located here:
C:\Users\***\AppData\Roaming\Code\User\settings.json
2021 Update for Eze_82's answer:
Instead of just "brace_style": "collapse,preserve-inline", you now need to include the following in the settings.json file of VSCode:
"beautify.config": {
"brace_style": "collapse,preserve-inline"
}
The location of the settings.json is still the same.