My VSCode onSave
... turns my Vuejs codes vertically somehow to so many lines.
I know that it is easier to read, but I also find it very long to read, and it makes my file too long and I had to scroll down for no reason.
Is this sth that caused by Prettier?
Can someone pls show me how to prevent it from happening?
settings.json
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
},
Prettier formats lines to fit within the character limit of printWidth (default is 80 characters).
Set printWidth to a high value to avoid this line wrapping:
// .prettierrc
{
"printWidth": 300
}
Yes Prettier format the code like this because it's easier to read it. If you want to disable this, just change to false the editor.formatOnSave
Related
I just created a project based on the https://github.com/antfu/vitesse template. But I've some formatting issue.
If I ask for formating in VS Code, each "first" attribute of an html element is on the same line as the start of element, which is something I would have expected, but it raises warning:
Expected a linebreak before this attribute.eslintvue/first-attribute-linebreak
or sometimes:
Expected indentation of 2 spaces but found 4 spaces.eslintvue/html-indent
If I hit Ctrl+S, then I get no errors anymore, all the attributes(including first one) are on a new line.
Honestly, I don't really care which is kept, but how to synchronize the two of them? It jumps a lot every time I format and it's disturbing.
Thank you very much
EDIT
After #tony19's comment, I tried to set volar as default formatter. So my .vscode/settings.json looks like:
{
"cSpell.words": [
"Vitesse",
"Vite",
"unocss",
"vitest",
"vueuse",
"pinia",
"demi",
"antfu",
"iconify",
"intlify",
"vitejs",
"unplugin",
"pnpm"
],
"i18n-ally.sourceLanguage": "en",
"i18n-ally.keystyle": "nested",
"i18n-ally.localesPaths": [
"locales"
],
"i18n-ally.sortKeys": true,
"prettier.enable": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"files.associations": {
"*.css": "postcss"
},
"editor.formatOnSave": false,
"editor.defaultFormatter": "Vue.volar"
}
But I've still the same behavior. shift+alt+F format like this:
<div id="simple"
class="toto">
index
</div>
and when I save, it formats like this:
<div
id="simple"
class="toto"
>
index
</div>
I must admit that I'm not a big fan of having the end > on a single line but as far as the comportment is coherent I'm happy
(I also tried "editor.defaultFormatter": "dbaeumer.vscode-eslint" and "editor.defaultFormatter": "antfu.vite" without any luck.
I would like to keep a if function in one line without using ternary if but prettier format breaks it, I didn't find a option for that in prettier documentation
tag script inside .vue file
WANTED OUTPUT
<script>
export default {
methods: {
changeSlide(slideIndex) {
if (slideIndex >= this.slides.length) { slideIndex = 0 }
}
},
}
</script>
prettier format
<script>
export default {
methods: {
changeSlide(slideIndex) {
if (slideIndex >= this.slides.length) {
slideIndex = 0
}
}
},
}
</script>
I'm working with Nuxt(VueJS)
my prettier config:
{
"semi": false,
"singleQuote": true,
"tabWidth": 4,
"useTabs": true,
"printWidth": 120
}
You're using Prettier with a VScode extension or via ESlint? I recommend the second approach btw, for a nice linter + formatter combo.
This will also give you the right to disable linting + formatting of a specific line or block of code, so quite more flexiible overall.
If you're using the first approach, then you could maybe try this Range ignore approach.
You could use // prettier-ignore to ignore the whole thing but I doubt you can enable it back afterwards. As you saw in the options, there is nothing that can help there. But the purpose of Prettier is to be opinionated so it's legit that you don't have the whole flexibility that ESlint could bring to the table.
There are some guidelines like the one from Airbnb, this is great but then you need your whole team to agree on a specific way of writing things. Which defeats the purpose of Prettier: use it and stop discussing the style on each Pull Request once and for all, hence why it's opinionated and have not that much configurable options.
A simple (yet meh hack) would be to set "printWidth": 200, this may somehow work but not really flexible.
TLDR: use an ESlint + Prettier combo (without the VScode extension) for a fully fledged flexible configuration or let Prettier do it's opinionated formatting.
I want to make a relatively simple formatter in VS Code. Essentially, I have a bunch of *.md.j2 files (Jinja2 templates that ultimately become Markdown). I have the Better Jinja extension to render these, with the language jinja-md in VS Code.
I started off just wanting to use prettier's Markdown formatting and call it a day. I tried adding this to settings.json:
"[jinja-md]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
},
This does not work because esbenp.prettier-vscode does not register itself for the jinja-md type; it seems to have no "break glass" option to configure that.
This got me to thinking that it would be nice to make a formatter that ignored Jinja tag lines (e.g. {% if foo == 'bar' %}\n and then passed on the fragments to whatever the underlying file type formatter was. So basically I want to do something like:
vscode.languages.registerDocumentFormattingEditProvider('jinja-md', {
provideDocumentFormattingEdits(document: vscode.TextDocument): vscode.TextEdit[] {
// THIS IS THE QUESTION:
// vscode.languages.getFormatter is not a real method. I want to know
// how to pull off this concept.
mdFormatter = vscode.languages.getFormatter('md');
// Get segments between %}\n and \n{% and route them to the
// `mdFormatter` -- I think I know how to do this and am not bothering
// to write the code here.
}
});
Is this a thing I can do -- can I programmatically get from VSCode "the formatter user-configured for language X"?
This occurs when it renders the bullets -
This is the HTML it is inserting the class="tp-bullet-image" with a style="background-image: url("undefined")
I searched through the .js files and the .css files and can't find the style or where it is coming from.
Seems to keep the slider from auto sliding - I can't find where this style is coming from.
Thanks, Geoff
To elaborate on Geoff's response to his own question, the tmp key must be added to the bullets associative array:
navigation: {
bullets: {
enable: true,
style: 'custom',
tmp: '',
...
}
},
See the Slider Revolution Documentation > Navigation Syntax > Bullets. Note: The style key can be set as desired (not necessarily custom).
Within Sencha Touch, is it possible to define a default UI , like "light" or "dark", that applies to all components (unless overwritten explicitly)?
The aim is to avoid having to declare ui: "dark", or any custom UI that is made, for every element.
Cheers!
You can try this:
Ext.apply(Ext.Component.prototype, {
getUi: function() {
var defaultUi = 'light';
// value of [this.config.ui] is ignored here
// we can use something like forcedUi
return (this.forcedUi) ? this.forcedUi : defaultUi;
}
})
The disadvantage of this code is that we need to specify another variable for applying ui different from 'light' (because variable 'ui' via getUi() will always return 'light'):
...
items: [{
xtype: 'button',
forcedUi: 'dark'
}]
...
I am stuck on Touch 1.1 so sunsay's solution didn't work for me, but this did:
Ext.CustomToolbar = Ext.extend(Ext.Toolbar,
{
ui:'app'
});
Ext.reg('toolbar', Ext.CustomToolbar);
So, it's still component-by-component-type, but not component-by-component-instance. And since you can overwrite the "reg", no need for custom x-types all over the place, either.
I assume that you know about sencha touch styles and themes. Otherwise you can download a pdf file from this link which clearly describes about how to do it...
http://f.cl.ly/items/d9df79f57b67e6e876c6/SenchaTouchThemes.pdf
In it they are mentioning about scss file where you can specify the base-color, ie
$base-color: #4bb8f0 ;
$base-gradient: 'glossy';
Then run it ... you can see the toolbars and buttons created with the color and gradient you have mentioned.