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
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 started learning React Native.
I'm using Visual Studio Code as my editor.
I've set up the boiler plate and started the app. But whenever I change a .js file and hit save, VSCode is messing up all the formatting.
I thought I could sort this in the settings.json file but after googling for a while and playing around I can't find the correct setting.
Is this a bug or am I doing something wrong?
Setting file is default one:
UPDATE: I re-installed vscode. Then set up a basic js file with a react native tag and a html tag. I added in:
"editor.formatOnSave": false,
"javascript.format.enable": false
To my settings.json file and the problem still occurs:
The problem is having tags in a js file, I just don't know how to tell vscode to ignore them?
I found out what this was by looking though the extensions. Thanks to #wgj for the hint.
Turns out it was the JS-CSS-HTML formatter. I looked through the instructions and have removed the auto save for now. I'll have to work out the specific settings for this.
It uses js-beautify so if anyone knows the settings I should be looking at would be much appreciated.
I had a similar problem and it turned out my ultimate culprit was...
So I simply disabled it for the workspace.
Same here, all my HTML format messed up after saving, I disable "JS-CSS-HTML Formatter" and problem solved
In the end, what did the trick was changing the file format from JavaScript to JavaScript React on the bottom toolbar.
All my HTML format messed up in js after saving, I disable "JS-CSS-HTML Formatter" and restarted vscode, problem solved.
I found my solution to this problem by converting my components file extension from js to jsx. No more issues and everything is working fine.
Disable js-css-html formatter.
if you are using prettier and beautify together, override the setting as :
"beautify.ignore": [
"**/*.js",
"**/*.jsx"
]
Use Prettier Code Formatter instead of Beautify. Works perfectly for language mode Babel JavaScript
You should search for "format" in settings.json. You'll find a whole lot of TypeScript/JavaScript formatting tweaks in there, but the one that stands out to me is:
// Defines space handling after opening and before closing non empty brackets.
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": false
Alternative, you're not a fan of formatting at all, you can turn it off entirely:
// Enable/disable default JavaScript formatter.
"javascript.format.enable": true,
However, a lot of my formatting options come from language server extensions, so if you're using one for React Native specifically, be sure to check the attributes in settings.json, or the docs to see if there are any attributes you can add.
Add this on settings.json file. Whether you are using any extension or not, use this code. It works fine for me:
Solution 1: Just Disable JS-CSS-HTML Formatter
Solution 2: Press Ctrl+, (open settings) after that search Code formatted and change none --> Prettier
If you don't have prettier install from the extension's marketplace.
i just had this problem , apparently its because of the beautify/prettier , try to disable both , then restart Vs code (your editor) . but then if u really want to use prettier , go under its extension settings and make sure its in strict with whitespaces and toogle around a few other settings and you should be fine , cheers .
Just turning off format on save option from the settings would work.
You can select JavaScript React in the task bar under Select Language Mode.
You can try one of the following
uninstall other formatters which are not required. To check how many formatters you have just press ctrl + shift + p or command +shift + p (mac) and type format document after that a menu will appear showing you your formatters
press ctrl + shift + p or command +shift + p (mac) and type settings and click on open users settings and then search for format on save and check the box
that's it!!
Enjoy
changing the file format from JavaScript to JavaScript React on the bottom toolbar worked just fine for me
I have tried all methods but the problem is solved completely by this:
-> Open setting.json
-> "files.associations": {
"*.js": "javascriptreact"
}
->Add above lines and press save the problem will solve
You can type the following command string when creating your project
npx create-react-app name-of-app react-complete-guide
or the following, if you have create-react-app installed already
create-react-app name-of-app react-complete-guide
While debugging my React Native app in Chrome, I'm often unable to set breakpoints in the Sources tab. When I click on a line of code to add the breakpoint, a breakpoint is added instead to the next function declaration line in my module.
This doesn't happen in all of my source modules, but often enough that it prevents me from debugging efficiently.
I'm currently using RN 0.22 but this has been happening on older versions of RN as well (e.g. RN 0.18).
This problem maybe caused by babel. When use normal function and arrow function together, it happened.
"sourceMaps": "inline" in .babelrc fixed this for me.
I've only experienced this issue under the following conditions:
1) The .js file contains multiple functions, and
2) Attempting to set a breakpoint within a function that is not the last function in the .js file
So, a partial workaround is to move a function such that it is the last function in the .js file. Or, you could assign a single function per file. Either way, you will be able to set breakpoints.
This is far from ideal, but it's the only "solution" I've found so far.
I had the same issue, and I have a cozy solution for now :
I put the word "debugger" in the file which I want to debug.
I refresh the browser to see that it stops.
after it stops, I can add as much as breakpoints as I want and remove the "debugger" word from file
Try this package
https://www.npmjs.com/package/react-breakpoint-fix
just install the package and run react-breakpoint-fix from the terminal.
This fixed it for me. I'm using react-scripts#3.x
I had a project that was working for almost a week then suddenly all my .h files lost code completion/syntax coloring.The only changes i could think of was i changed my target's name and then when i created a new set of .h and .m files this started.
Okay I have checked everything on this topic which was commonly an issue in xcode 3 and 4, i tried all solutions like
Clean/rebuild/restart Xcode
Remove Derived Data
Precompile Prefix Header to No
Add "$(SRCROOT)/**" to header search path
Nothing has worked, any help would be appreciated.Also my Xcode version is 6.1.1.
Try these Solutions:-
You can able to fix that issue by change build settings like this, PreCompile Prefix Headers :NO
I've been doing this, and it's worked multiple times for me (after trying all of the above previously).
Now I just hit space, backspace (the mac version) and rebuild... works nice. Then, remember to scroll (sometimes the colors don't show up until you scroll somewhere)
Find your prefix file: "ProjectName_prefix.pch".
Comment out some line. (basically change it)
Build your project, doesn't matter if it fails or not.
Uncomment it.
Build again.
I'm betting only step 2 (modify the prefix) is what does it, but these essentially get you back to running. Suddenly everything magically recolors itself and completes functions.
Good luck if that doesn't fix it, perhaps try doing this to your dependency pch files (three20 or FB api's)
Okay I found out what the problem was, in my case i had changed the target name and in the process the project name also.
This resulted in the change of path of the prefix header when actually the file was still at the old path. Changing it to the old path fixed the problem.
The prefix header path can be found in Build settings.
usually something like ProjectName/Prefixfilename.pch
When debugging ExtJS 4 (tried both versions 4.1.0 and 4.1.1), FireBug repeatedly shows the following error: An invalid or illegal string was specified
http://docs.sencha.com/ext-js/4-1/extjs/ext-all.js
Line 18. It does not break on the error, though that option is specified. Additionally, neither my code or ext-debug.js and it's loader seem to actually call ext-all.js.
This error gets logged to Firebug's console about once per minute, which is annoying. What bothers me is that I cannot get the error to go away. Is this a FireBug bug? An ExtJS bug? Aliens? How can I debug the debugger?
I had the same problem before and I've solved it by removing a special character at the end of my JS file! (app.js I think)
It was weird, but the problem came from hidden special characters like: Zero-width non-joiner or Right-to-left mark.
Open another JS file but do not copy/paste your code there. Just write it again and check whether the problem exists or not.
And don't forget to check your data if you have some. As this article explains about the problem: http://www.ashorlivs.fr/javascript-jquery/article/an-invalid-or-illegal-string-was
For general debugging see this link http://www.sencha.com/learn/debugging-ext-js-applications/
You can also use ext-all-dev.js while in development mode.
There is another excellent tool on top of firebug, at this link http://www.illuminations-for-developers.com/
PS: I still didn't figured out how to post a comment. I guess it comes when I have more points/reputation. Hence adding it as an answer. thanks.