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.
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
I'm having issue when search text box are in the footer position. The search box is not functional when setting filters_position: 'footer' to yadcf. When setting is removed the text search box do there thing. Anything else I need to do? Thanks in advance and Awesome plug-in.
https://jsfiddle.net/4hqm9tsh/2/
Setting scrollX: to false I'm now able to search with in the column. I'm hoping to keep this true.
{
column_number: 6,
filter_default_label: "",
filter_type: "text",
style_class: 'yadcf-sb',
filter_delay: 1000,
filter_reset_button_text: false
},
],
{ filters_position: 'footer' }
It was a bug in yadcf which I just fixed and released in new 0.9.3.beta.8,
see it in action here
If you will encounter this in other filter type please open a bug in yadcf repository.
It seems that specifying scrollY in the DataTables settings is causing the footer not to filter anything. Needs fixing.
I cannot figure out the way to solve this. Ive tried adding "table-layout:fixed" but it no longer works in dt's current version.
Thanks
var config = {
"bFilter": false,
"bInfo": false,
"bPaginate": true,
"scrollY": 200,
"table-layout":fixed,
"data": dataoMine,
"bAutoWidth": false,
"columns": columns,
"scroller": true,
"language": {
"emptyTable": "empty data"
},
"columnDefs": [
{"className": "dt-center", "targets": "_all"}
]
};
<table class="dataTable" style="width:80%; height:100%; margin-left:10%; margin-right:10%;}">
<thead><tr>
<th>a1</th>
<th>a2</th>
<th>a3</th>
<th>a4</th>
<th>a5</th>
<th>a6</th>
<th>a7</th>
<th>a8</th>
</tr></thead>
</table>
I don't quite have enough information to give you a firm answer, because you don't tell us what's in your columns variable and don't give us the structure of your dataoMine array. But, it seems pretty clear from your screen shot that you have four columns of data, and also have eight columns specified. That will show all the columns and whatever background you have for the missing data columns. Presumably, your "barbershop stripes" are the page background in whatever theme you are using.
Make sure that you have the same number of columns in your data that you have in your column specification, and see if that fixes your problem.
After researching it turns out that this problem is very common. It seems there is no definitive solution but this worked for me:
add this into dt's config:
scrollX: 100%
i fixed my problem by just adding
scrollX: true
I'm trying to use a dijit.form.Select as the editor for my dijit.InlineEditBox. Two problems / unexpected behavior seem to occur:
Inconsistently, the InLineEditBox doesn't have the initial value set as selected
Consistently, after selecting a choice, the value that should be hidden is shown instead of the label.
The width isn't set to 130px
Here's working code: http://jsfiddle.net/mimercha/Vuet8/7/
The jist
<span dojoType="dijit.InlineEditBox" editor="dijit.form.Select"
editorParams="{
options: [
{label:'None',value:'none'},
{label:'Student',value:'stu'},
{label:'Professor',value:'prof',selected:true},
],
style:'width:1000px;',
}"
editorStyle="width: 1000px;"
>
</span>
Any help is greatly appreciated! Thanks!
Okay, after a few MORE hours struggling with the mess that is dijit.InlineEditBox, I think I have the solution to the remaining issue (#2).
EDIT: My first solution to #2 is still flawed; the implementation at http://jsfiddle.net/kfranqueiro/Vuet8/10/ will never return the actual internal value when get('value') is called.
EDIT #2: I've revamped the solution so that value still retains the real (hidden) value, keeping displayedValue separate. See if this works better:
http://jsfiddle.net/kfranqueiro/Vuet8/13/
First, to recap for those who weren't on IRC:
Issue #1 was happening due to value not being properly set as a top-level property of the InlineEditBox itself; it didn't pick it up properly from the wrapped widget.
Issue #3 was happening due to some pretty crazy logic that InlineEditBox executes to try to resolve styles. Turns out though that InlineEditBox makes setting width particularly easy by also exposing it as a top-level numeric attribute. (Though IINM you can also specify a percentage as a string e.g. "50%")
Now, issue #2...that was the killer. The problem is, while InlineEditBox seems to have some logic to account for widgets that have a displayedValue attribute, that logic is sometimes wrong (it expects a displayedValue property to actually exist on the widget, which isn't necessarily the case), and other times missing entirely (when the InlineEditBox initializes). I've worked around those as best I could in my own dojo.declared extensions to InlineEditBox and the internal widget it uses, _InlineEditor - since generally it's a good idea to leave the original distribution untouched.
It's not pretty (neither is the underlying code I dug through to understand and come up with this), but it seems to be doing its job.
But man, this was rather interesting. And potentially pertinent to my interests as well, as we have used this widget in our UIs as well, and will be using it more in the future.
Let me know if anything backfires.
hm...
<span dojoType="dijit.InlineEditBox" editor="dijit.form.Select"
editorParams="{
options: [
{label:'None',value:'none'},
{label:'Student',value:'stu'},
{label:'Professor',value:'prof',selected:true},**<<<<** and this comma is for?
],
style:'width:1000px;',**<<<<** and this comma is for?
}"
editorStyle="width: 1000px;"
>
</span>
Also, when using dijit.form.Select, selected value is not attr "selected" but value.
And if you enter prof inside <span ...blah > prof </span> than your proper selected option will be selected ;)
Dijit select checks for VALUE, not attr.
This may be fixed in recent Dojo - see http://bugs.dojotoolkit.org/ticket/15141 - but using 1.7.3 I found this worked:
In my app directory, at the same level as dojo, dijit and dojox, I created a file InlineSelectBox.js which extends InlineEditBox with code to set the HTML on the associated domNode from the value of the Dijit, and which wires up that code to the onChange() event:
define(["dijit/InlineEditBox",
"dijit/form/Select",
"dojo/on",
"dojo/_base/declare",
"dojo/_base/array"
],
function(InlineEditBox, Select, on, declare, array){
return declare(InlineEditBox, {
_setLabel: function() {
array.some(this.editorParams.options, function(option, i){
if (option.value == this.value) {
this.domNode.innerHTML = option.label;
return true;
}
return false;
}, this);
},
postMixInProperties: function(){
this.inherited(arguments);
this.connect(this, "onChange", "_setLabel");
},
postCreate: function(){
this.inherited(arguments);
this._setLabel();
}
});
});
Then, in my view script:
require(["dojo/ready",
"app/InlineSelectBox",
"dijit/form/Select"
],
function(ready, InlineSelectBox, Select){
ready(function(){
// Add code to set the options array
var options = [];
// Add code to set the initial value
var initialValue = '';
var inlineSelect = new InlineSelectBox({
editor: Select,
editorParams: {options: options},
autoSave: true,
value: initialValue
}, "domNodeToAttachTo");
});
});
I was dealing with this situation a few months ago, and not finding a resolution i made my own algorithm.
I put a div with an event on Onclick that build programatically a Filtering Select on that div with the store i want to use.
function create(id,value){
var name = dojo.byId(id).innerHTML;
dojo.byId(id).parentNode.innerHTML = '<div id="select"></div>';
new dijit.form.FilteringSelect({
store: store,
autoComplete: true,
invalidMessage:"Invalid Selection",
style: "width: 80px;",
onBlur: function(){ },
onChange: function(){ },
required: true,
value: value,
disabled: false,
searchAttr: "name",
id: "status"+id,
name: "status"
},"select");
dijit.byId('status'+id).focus();
}
I used the onBlur event to destroy the widget and the onchange to save by xhr the new value.
The focus is below because the onBlur was not working properly.
note: the function is not complete.