I followed the steps here to configure code completion and other stuff in WebStorm but I'm still getting the following syntax errors.
How can I resolve this?
By changing 'JavaScript language version' (Settings/Languages & Frameworks/JavaScript) accordingly, to either 'ECMASCript 6' or 'JSX Harmony'. BTW, WebStorm can do it for you: hit Alt+Enter on the highlighted statement, choose 'Change JavaScript version to ECMASCript 6' from the popup
Related
I am not sure what is going on here. I have a brand new template that someone wrote and I plug it into my editor and get these lovely red squiggly lines. I cannot see any syntax errors so I'm thinking its the editor.
The first thing I see is on the import statement. Why is there a red squiggly there? It is telling me statement expected but that is a simple import statement!
There is yet another after the const serializers. I will likely miss an actual error if these stay on here. I have tried changing the language and it is telling me that it knows its a Vue Component via the V symbol on the file in the Project tab.
I'm not sure what to do here.
Wow, I took a break and came back. Tried to load the component in Vue and it fails with the error.
unexpected character ' '
So it was a damn space! There were a few spaces, maybe it came from the fact that I copied the code?
I'd suggest trying the Zero Width Characters locator plugin - it helps to visualize hidden control characters that might break the syntax highlighting and code execution
Currently, all my angular material HTML attributes are highlighted in yellow with WebStorm 9 (Mac OS X Yosemite) warning: "Attribute [name] is not allowed here".
How can I teach WS to automatically recognize these attributes as valid? I am aware that I can add each one one-by-one to the list of custom attributes, but was hoping that there would be a better way to do this.
UPDATE:
Just wanted to clarify that this issue applies to Angular Material project, and not the AngularJS itself.
You need to add the angular-material.js file as a Library in WebStorm:
Open Preferences (Mac: Cmd+,, Win/Linux: Ctrl+Alt+S)
Go to Languages & Frameworks > JavaScript > Libraries
Click Add and then press the + icon
Find angular-material.js in your node_modules folder
Add a Name and a version and press Ok
Now you will have completions for all elements and attributes that have an #ngdoc documentation in the angular-material source code.
Usage
Start typing and you will see the completions:
Pressing F1 (Ctrl+Q on Win/Linux) will also show some docs, if available in the source code:
Important note
Not all features are properly documented, the following won't show up (unless you already used them) cause they are defined dynamically in a loop, with no #ngdoc for them:
var API_WITH_VALUES = [ "layout", "flex", "flex-order", "flex-offset", "layout-align" ];
var API_NO_VALUES = [ "show", "hide", "layout-padding", "layout-margin" ];
So for these you'd have to add them as a custom attribute (Alt+Enter > "Add flex to custom html attributes").
Environment
Tested on a Mac OS X 10.11.4 using WebStorm 2016.1.1, but this should work for older versions as well.
I am using PHPStorm, which is a sister Project of WebStorm, but it should work the same way.
You maybe need to add the Library:
File
Settings
Languages & Frameworks
Javascript
Librarys
Add here AngularJS
If this does not work, you can add them manually:
Follow this Steps:
File
Default Settings
Editor
Inspection
HTML
Unknown HTML tag attributes
To the right you will see in Options "Custom HTML tag attributes". Enter here the attributes you want to allow.
I highly recomend you to install the Angular.js plugin:
Go to menu File > Settings (or ctrl + alt + S if you're on Windows);
Select Plugins in the window that'll open;
Click in the Browse Repositories button;
Type AngularJS in the search field. Select the plugin;
Click Install Plugin.
The plugin is incumbed to read #ngdoc annotations present in ngMaterial sources and create documentation for their directives.
It seems to support WebStorm and other IDEs, but I could not find it in the plugin registry while filtering by other IDEs. Maybe it'll work inside WebStorm...
Anyway, this is what you get:
You have also a plugin that helps a lot, check it out. It helps a lot
Angular material v2, Teradata covalent v1, Angular flex layout v1 & Material icon live templates
And with the solution provided by #Alex Ilyaev gives a lot of help.
But its no perfect.
Hope it helps.
Currently I don't think that idea's AngularJS plugin understands angular-materials attribute extensions.
It does understand the directives i.e. control click <md-button ...> and the directive (custom tag) is found.
For now you will have to add the attributes af custom attributes in order to get a "green" page.
I'm using JSCS (google) for javascript and also JSHint, However if I autoformat my code with cmd+L it creates a space between function and an opening (. Is there anyway to tell the auto format function to obey to the coding guydes from JSCS?
You can't just tell it to obey this or that standard code style. But you can configure formatting options in Settings/Code Style/javascript. Try Spaces/Before Parentheses options: 'in function declaration', 'in function expression', 'function call parentheses'
Editor > Code Style > JavaScript
You can select Manage and import your JSCS file. This should cover the majority of your needs. Note that if you're just selecting Google from the drop down for your guide, you will need to download Googles JSCS file.
In the URL(http://www.playframework.com/documentation/1.1.1/security#xss), it has been mentioned as that the after play version 1.0.1 release, the strings are automatically escaped, however such is not the case in Play 1.2.4 which is my current version.
Please suggest what possibly could be incorrect here?
I met same thing in past, but that situation only appear on tag.
I mean, when using on template, it automatically escape HTML (for preventing XSS), but in tags it does not. And I must declare ${someVar?.escape().raw()} in all tags.
I am looking for some blog site where i will be able to directly paste c++ code examples
in my publishes and see the code with all the alignments and colors like i see it on pastie.org.
I need all those things be made automatically because i don't know HTML and can't make by myself the code changes.
Get wordpress + WP-Syntax.
You won't be able to "copy and paste" the code directly, but you'll have to wrap it like this:
<pre lang="c++">
CODE GOES HERE
</pre>
I use this JavaScript for syntax highlighting in blogger. It's very easy to use.
The key feature of above highlihter is that script permanently hosted on http://softwaremaniacs.org/, so that make it possible is to use script on blogger.com.
Another one nice syntax highlighter could be found at code.google.com (it could be integrated in blogger.com).
(source: googlecode.com)
I use the "Online syntax highlighting" at http://tohtml.com
Paste your code in the text box there, select the programming language and color scheme and it will generate a webpage with your syntax highlighted code. Copy and paste that into your blogger editor and you are good to go.