I have a JS file from a purchased theme that I need to require in my project, but doing so throws all sorts of formatting errors. The ones like Strings must use single quotes and Trailing spaces not allowed. Well I didn't write this JS file, and there are formatting errors on almost every line.
Can't I require it and force VueJS to ignore the formatting issues?
Related
I have read about 10-15 other answers now and none of the solutions (which are all the same minus 3 or 4) have worked for me. I am using Prettier and Vetur and I have the ESLint extension in VSCode installed as well. I have looked over the settings at least 10 times in the past 3 days trying to touch everything, close/open VSC and save to format, check if the problem persists, and continue doing this with each setting one-by-one trying to eliminate the suspects. I am here as a last resort out of desperation to be able to save my components without breaking my html tags and separating code into illegible BS.
My expected code formatting looks like this:
<button
class="btn btn-success"
#click="sellStock"
:disabled="insufficientFunds || quantity <= 0 || !Number.isInteger(quantity)"
>{{ insufficientQuantity ? "Not enough Stocks" : "Sell" }}</button>
and my formatter is causing the " at the end of the line after "...isInteger(quantity)" to be line-broken which breaks my entire component's syntax/major linter errors appear (obviously).
<button
class="btn btn-success"
#click="sellStock"
:disabled="
insufficientFunds || quantity <= 0 || !Number.isInteger(quantity)
"
>
{{ insufficientQuantity ? "Not enough Stocks" : "Sell" }}
</button>
As you can see, even the line breaks are uneven and make ZERO sense formatter-wise...I've never seen it do this before. This is next-level annoying Vue/Vetur/Prettier/VScode formatting bugs now and I'm quite stumped as to why it's suddenly acting up this week.
I have tried changing word-wrap-length and prettier lengths and indentations, font size and appearance of the mini map...nothing seems to make this madness stop, not even turning of html formatting period. It also formats some of my other ".vue" components into multiple lines when I don't want it to, but it isn't breaking the syntax/html tags as it is here. I have made the word-wrap/line-length 200+ everywhere that it's listed as a settings and it continues to break my code.
Any ideas?
Only advice I can give is stop using Prettier. Trying to make it work with ESlint and Vetur was always pain. Then I found this question (and self answer) here on SO which recommends dropping Prettier and using ESlint not just for linting but also for formatting (needs version >= 6). I'm happy as clam now...
I've been struggling with a similar problem with VSCode's formatting. I also have Prettier, ESLint and Vetur extensions installed. But my code formatting rules were somehow different from my co-worker's (they are using WebStorm by the way).
In my case, the problem was solved by:
Turning off all the Vetur formatters and disabling all formatting capabilities of Vetur.
Enabled ESLint as the formatter.
This seems to have allowed the Prettier extension to look at .eslintrc.js, which the Prettier plugin is setup.
I suggest that you look in on the Prettier extension logs to debug your problem.
On the bottom right corner of VSCode's window, you will see the Prettier extension indicator. Click on this and you can see the logs.
Once the logs are shown, you can see where the extension is getting the Prettier configs from, or where the Prettier module is being imported from.
What helped me with this situation, I went into Vetur's extension settings inside VSCode Vetur > Format > Default Formatter: HTML and selected js-beautify-html.
I just had this problem and resolved it.
The issue I had was that my html in the .vue file was malformed (Specifically I had a closing tag which shouldn't have been there).
I was relying on it formatting on save, and when that didn't work I tried manually selecting "format document with prettier" which did nothing.
It was only when I looked in the output window (Which I should have done immediately) that I saw that it was complaining about the misplaced closing div tag.
It's a silly oversight, but easily made.
What fixed it for me was to actually turn on Eslint to work as a formatter in settings.
Due to logs, I just needed to install the prettier dependency, so:
yarn install
or, if you do not have it already, add it:
yarn add prettier
this fixed my problem.
I've been working with Visual Studio Code for two days now. I try to build a Vue-Application. But always when I run the application by npm run serve, I get the following errors:
9:9 error Strings must use singlequote quotes
9:15 error Missing trailing comma comma-dangle
✖ 2 problems (2 errors, 0 warnings)
2 errors and 0 warnings potentially fixable with the `--fix` option.
I understand what these errors say, and I tried to type in strings in singlequotes and insert commas at the end of every line. But Visual Studio Code always removes the comma and turns singlequotes to doublequotes... Here you can see which plugins I have installed:
I had the same problem. It is likely caused by the file being formatted twice - first by vs code and then by eslint built in into vue-cli. Set the formatOnSave setting in VS Code to false and check if this solves your problem. It might. Nonetheless if you work on various (non-Vue) projects you will have to enable and disable this setting.
Disclaimer: This is a workaround that works for me. There's probably a more professional approach, I was not able to find it though.
Just in case this helps someone else. I too ran into this issue. I have this line in a components script:
props: ["login-signup"]
Every time I save it would switch to a double quote. I want formatting on save so that I don't have to mess with spacing and tabs. For me, I use vue3snippets extension in vscode. Opening settings (File->Preferences->Settings I typically use workspace, not user so I clicked Workspace) and searching for "singlequote" showed that "Vue3snippets: Single Quote" has a setting called "if true, will use single instead of double quotes" that was unchecked.
Checking this fixed the issue where the single quote in my line above would not format on save to a double quote and in turn fixing this error for me.
go to your main folder open .eslintrc.js and add the following in the rules
"
quotes: [0, "double"]
and then restart the project and do npm serve run again
I have found another way to fix the problem for the current project: I just created a
.prettierrc
config file, in which it is possible to specify the quote style with
"singleQuote": true
This might be a more general approach to tackle such a problem, because the direct project config apparently overrides the global configuration
I'm using Tailwindcss for my scss files which introduces a new command #apply. But the problem is Sublime highlights this (presumably as an error or unrecognized syntax). How do I just turn off that single highlight so it won't appear as a glaring error for all my #apply rules?
Syntax highlighting in Sublime is driven by syntax definitions that allow Sublime to recognize the language and highlight it as appropriate. This is done either in a tmLanguage (older TextMate compatible) XML PLIST file or a sublime-syntax (new form with more capabilities) JSON file.
Essentially the syntax definition boils down to a list of regular expression rules and a description of how and when to apply them in order to recognize the language. The syntax that you're using is for SCSS which doesn't recognize the #apply directive and thus marks it as invalid.
So there's no simple setting or toggle that you can make that will stop this from happening and you have to instead do one of three things:
Modify the syntax definition to know that #apply is valid so that it doesn't highlight as invalid code
Modify your color scheme to not use obnoxious colors for invalid code in SCSS files.
Use an alternate syntax that either knows about #apply or doesn't mark code as invalid with a specific scope
The first of these is not particularly straight forward because it requires knowledge of how the #apply syntax works and how to write and modify syntax definitions in Sublime.
The second option is fairly simple to pull off; basically you would add a color scheme rule that matches the scope source.css invalid.illegal and color it like plain text instead of the colors that your color scheme is using. However it's not possible to target this only to the #apply type lines, so you would lose being told about other invalid code that's actually invalid.
For the third option, there is the Syntax Highlighting for Sass package, which also includes a syntax definition for SCSS which doesn't have a problem with the #apply directive:
This package is much newer than the one you're currently using so you may see some things visually change colors from what you're used to seeing since this syntax may use different scopes than the old package does for the same constructs; the guidelines for what scopes to use have evolved a lot in the last couple of years, for example.
You may also want to peek at the README for the package as well, which outlines things that may require additional setup if you're coming from the older package.
The Redmine textile formatting guide directs us to use code highlighting like so:
<pre><code class="ruby">
Place your code here.
</code></pre>
And while line breaks are preserved within <pre> tags, once I add the <code class="python">, it removes all line breaks and places all the text on a single line. And of course, hacks like (which answered this question) or html tags don't work because it's still wrapped inside <pre>.
I've tried wrapping each individual line with <code></code> all within one <pre></pre>, but that didn't work. I've tried adding double spaces to the end of each line, and additional new lines in between but to no avail.
And while the Redmine guide above says code highlighting relies on Rouge, my version of Redmine uses CodeRay, whose website examples handle line breaks perfectly.
Thanks in advance!
Things are working ok for me. See my screenshots. Perhaps your theme is affecting that.
I'm using Abacus office 1.3.4 theme on Redmine v3.2.
Could any plugins that you have installed be causing that?
I'm using Visual Studio Code to code a Vue.js component and need to reformat the code of that component.
I did not find any built-in formatters, and the first choice for a plugin was vue-buetify which informs after installation that
There are many bugs in the extension, please do not use it, the better choice is vetur
I then tried Vetur by installing it but there is no place where I see an option to beautify the code currently in the editor. The Shift + Alt + F command has no effect.
How can I actually beautify (reformat) the code for a Vue component?
I've been fiddling with formatting quite a bit since my previously working project stopped formatting one day. Here's what I think the current state of the art is:
Use extensions vetur and prettier (specifically, esbenp.prettier-vscode Prettier - Code formatter). (You get these preinstalled by Vue.js Extension Pack esbenp.prettier-vscodeand others.)
Vetur is the (current) mandatory default tooling for vue. Accept no substitutes.
Prettier doesn't support .vue files per se, so that filetype is disabled by default: https://github.com/prettier/prettier-vscode/issues/338.
But Vetur understand its limitations and instead delegates formatting of individual sections of the .vue file to a potentially different formatter. By default, though, it delegates everything other than HTML sections to Prettier. https://vuejs.github.io/vetur/formatting.html. It disables formatting for HTML sections.
Vetur developers are down on js-beautify-html, although it is still apparently functional: https://vuejs.github.io/vetur/formatting.html. And they don't make an alternative recommendation at this time.
Prettier support for HTML, which would be the obvious choice if only it existed, is a long, sad story. Currently (May 2018), prettier formats HTML as JSX. Many subtleties are mentioned, but one issue that I have grasped is that JSX converts begin/empty/end tags to empty tags, e.g to . Apparently React and (I believe) Vue, do not like this, hence vetur disables Prettier for HTML.
So I'm going forward with enabling js-beautify-html in vetur settings, hoping for the best and keeping my eyes peeled. But I'm such a superficial coder that I may never trip over its known issues.
In 2022, the situation regarding formatting Vue files regaled in another answer has vastly improved.
Vetur is still the de facto solution for managing .vue files in VS Code, but in the time since this question was asked, Prettier added full support for them (and HTML proper). This means you can format them using Prettier without Vetur if you so desire.
Note that Vetur does not support VS Code's "Format Selection" functionality, even though Prettier does (for a small set of languages):
Vetur only has a "whole document formatter" and cannot format arbitrary ranges. As a result, only the Format Document command is available.
The Format Selection command does not work.
If you do decide to use Vetur, you shouldn't need any other extensions to get formatting to work, as the extension comes bundled with all of its available formatters. As long as you have the extension installed and enabled, formatting with the "Format Document" command or Shift + Alt + F should work out of the box.
Vetur's settings allow the user to configure which of its available formatters is used for each language it supports (Prettier is the default for all but Sass and Stylus). The formatters can also be toggled off per language, or entirely, if you prefer to use some other formatting solution instead.
If you have installed the Vetur extension on VS Code,
Go to the VS Code extension area.
Find Vetur and select the gear icon to enter settings of Vetur.
Scroll down until you find
Vetur › Format › Default Formatter: JS
Default formatter for <script> region
Select pretter-eslint from dropdown menu
(if you don't see that option you can install Prettier extension).
Now you can see it formats your code automatically whenever you save.