In VS Code, I am using Prettier as autoformatter and I can't find an answer for this simple question.
If I have a manually written code like this - which I want it to stay like that on multiple lines:
createApp(App)
.use(createPinia())
.use(router)
.mount("#app")
But after I press save, it will become:
createApp(App).use(createPinia()).use(router).mount("#app")
How to stop this behavior without turning autoformatting off completely? I still want to have the code to be corrected if the is 1 space instead of 2 before a html element etc.
Related
I've got a rather weird scenario going on here. I am trying to add tooltips to an existing ASP.Net MVC application in which I'm upgrading Bootstrap to 4.6.2. The upgrade was very smooth with no complications; I just want to replace the default display of titles with the nicer looking tooltips, but for some reason they're not appearing. I tried to simplify things by creating a new view to isolate the problem, and still no tooltip. I tried again with completely new solution, and wouldn't you know it, it works! So my question isn't "how do I create tooltips", but "how can I debug what's going on in the failing project?"
Here's what I've discovered so far. I believe you can see everything that's relevant in this screenshot of the nearly-empty view. All the included script files are there in the right order, my script is there, initializing the tooltip, and there are no messages in the console. When I hover over the link, a new <div> element is added to the DOM. In DevTools, I use the arrows to expand the tree, showing everything in the tooltip. The .fade:not(.show) CSS selector is the reason I don't see it. In the working solution, the show class is properly added to the tooltip's <div>.
So, could there be some setting in the existing application preventing the addition of the show class? Is something failing in the tooltip code,causing it to never add the show class without reporting errors? How should I continue debugging this? I tried stepping through the bootstap.js file, but being a JS noob, I'm getting a little lost. The screenshot is from Chrome, but I see the same behavior in Firefox.
This turned out to be one of those embarrassing oversights. My BundleConfig.cs file was still pointing to old Javascript files that were still hanging around after the upgrade. I should have seen it in the version numbers in the <script> tags.
I would like to know if there's any shorthand to fill the empty vue file with all three tags: template, script and style with proper default content.
As a comparison, at least, VS Code allows to autofill an html file with all default required tags/codes on ! + Enter. I want to know if there's something alike in VS Code or Vetur extension.
I've personally never used it but this seems to do what you're looking for. There seems to be a lot of different configuration options as well.
I'm using a custom Webpack plugin and loader to substitute special markers in a HTML template into valid HTML (similar to a macro in C). This works all fine, the produced HTML turns out fine, but unfortunately, it triggers eslint which runs after this substitution (as it would otherwise stumble over these macro markers).
I am fairly flexible with the macro substitution itself, so was thinking about excluding certain warnings from eslint for the substituted markup, however none of the ways to disable eslint work satisfactory.
For instance, if I try to insert /* eslint-disable-next-line */in the line /* eslint-disable-next-line */<my-custom-tag>... it still raises an error (for instance for max-len). I can't use <!-- eslint-disable --> as it doesn't seem to work well with Vuejs and v-if statements (can't find v-else). Inserting a tag before or after the substituted line doesn't work either as that would shift the line numbering for error/warning reporting for eslint.
I was wondering if eslint can be made to ignore certain HTML tags such as <my-custom-tag> and within those all the things that one would usually enforce by a linter would be ignored (like generated code which one wouldn't necessarily lint either).
Any suggestions are welcome, in particular if someone can share some experience in modifying eslint (custom rule?) this way?
Not really a code problem more a discussion/brainstroming-post.
I would like to build some light CMS in Vue/Nuxt, which will output a static website in the end.
So I thought about going for one Nuxt-page (does not have to be a Nuxt-page necessarily) containing all the CMS-related stuff and handle the actual website inside a nuxt-child component to keep code tidy.
Problem is, that i can not access the inner Nuxt page, so any editing will be impossible (I want to achieve some simple inline-editing).
For visualization the editor of webflow may be helpful (Directlink to the video). What i want to achieve is a similar version. I would like to have the page separated from the CMS. The CMS would be the lower bottom-bar and provide stuff like the editor for the inline-editing.
Currently my best solution was to define the editing directly inside the page, which is working, but needs to be stripped out for production and makes a future separation impossible.
Is there any solution for this? Or am I thinking the wrong way?
Can I link both instances with a common vuex-store?
You could created two seperate components, one for editing and one for rendering.
These could utilize components themselves to keep the overhead to a minimun.
You could also use the same component, but lazy load the editor features based on some condition like:
If youre fine with having the Editor only available during development you can create an env variable and check for process.env.NODE_ENV !== 'production'
Another way would be to have some sort of authorization that combined with v-if would show the editor or hide it.
I have tried to find an answer, but all I get is answers on how to control the speed when implementing Twitter Bootstrap by your self.
I cannot figure out how to do it in TYPO3. I think it should be done through TypoScript, but how?
In Bootstrap 3's Carousel, you can set the option interval or data-interval, see http://getbootstrap.com/javascript/#carousel.
You know that already. Here's how I'd do it:
First you have to find out if the extension can set that parameter at all. Supposing the manual is quiet on that, you want to check the Constant Editor under Templates > Constant Editor first. No luck yet.
So you will have to look at the code of typo3conf/ext/bootstrap_package. Everything that can be set via TypoScript will probably be in /Configuration/TypoScript/: constants.txt and/or setup.txt. Nothing there for the carousel, though.
Now the I would search for interval in the entire extension, using your favourite editor. Ah, there you are: In the file /Resources/Private/Templates/ContentElements/Bootstrap/Carousel.html you will find the interval of 10seconds hardcoded:
<div id="carousel-{data.uid}" class="carousel slide{f:if(condition: '{data.layout} == 110',then:' carousel-small')}" data-interval="10000" data-ride="carousel">
Of course, do NOT edit the extension as you have to keep it updateable. No problem, though.
If you search for Carousel.html, you will find it in /Configuration/ContentElements/Bootstrap/Carousel.ts:
tt_content.bootstrap_package_carousel = COA
tt_content.bootstrap_package_carousel {
10 =< lib.stdheader
20 = FLUIDTEMPLATE
20 {
file = {$plugin.bootstrap_package_contentelements.view.templateRootPath}Bootstrap/Carousel.html
partialRootPath = {$plugin.bootstrap_package_contentelements.view.partialRootPath}
layoutRootPath = {$plugin.bootstrap_package_contentelements.view.layoutRootPath}
}
}
So that's where the path to the template is set. And oho! The thing inside the curly brackets is a constant. Turns out that right at the beginning, we could have set a complete new path to include a copy of all bootstrap templates from bootstrap_package/Resources/Private/Templates/Page/ and do the modification there. As well as for Partials and Layouts, which are other, larger and smaller chunks of fluid templates (cf. http://typo3.org/documentation/article/the-fluidtemplate-cobject/).
If out of some reason you'd only like to modify that very specific part of the bootstrap package, you can set something like this in your TypoScript:
tt_content.bootstrap_package_carousel.20.file = /path/to/my/template/ext/Bootstrap/Carousel.html
Now all you have to do is to create a copy of the carousel template and edit it at will - in the rendering process, your own template will be used, featuring faster intervals.
This should also demonstrate the overriding powers of TypoScript nicely - you can do stuff like that at any point in the page tree for the branch you want.
Also, I'd like to point out that I find this a very good approach to the authoring of TYPO3 extensions: instead of having dozens and dozens of constants that could be set in the backend like in the old days, we now have replaceable fluid templates with clear structure. Much more maintainable and easier to use this way!