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'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
Is it possible to wrap long comment lines in IntelliJ in javascript files? I have turned on line wrapping as shown in the settings below, but when I do a code reformat, it doesn't wrap the line.
It's not supported yet on code reformatting, added a new feature request, please vote.
I'm using IntelliJ 14 on a Mac, which has a Fill Paragraph command. Access it via the awesome universal Command-Shift-A action search feature. Works like a charm!
I just installed the recently released Intellij IDEA 12, which is GREAT for Play Framework 2.
However, I'm having the following issue: in an HTML Scala template, any JavaScript code enclosed in a <script> tag within the body of the template is not recognised as JavaScript by IDEA, thus not offering code completion and incorrectly showing errors where they aren't. I suspect it is interpreting the code as Scala code, ergo offering incorrect code completion and making it quite painful to write JS in a template.
This issue was not present in IDEA 11.
Any ideas?
Update
I have the JavaScript Support plugin enabled. Simple code completion works fine. However, if I type function (){} to code an anonymous function and hit Enter with the caret between the curly brackets, IDEA does the following:
If I manually fix the incorrectly added }, and write code for the anonymous function, it offers correct variable suggestion for the console.log although it is stil showing errors:
I can't confirm that, I can see that both, Scala and JavaScript completion works properly.
Go to Settings > Plugins and make sure that you have JavaScript Support enabled. After that close and reopen all your views to let the Idea analize syntax once again.
It appears that your function statement is invalid because you did not name your function. The details of what is going on here are answered in this post. I'm not sure of the details of your particular needs, but you might try this syntax instead:
<script>
(function() {
})();
</script>
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.