I am creating yeoman generator and i came accross problem with code inspection in webstorm.
Here is my code:
module.exports = function(grunt) {
grunt.initConfig({
// Process main less file to css file in build folder
less: {
<% if (includeBootstrap) { %>
i get syntax error near <% and the whole file highlighting is ruined.
How to make it ok. I suppose i should use ESJ highlighting but I can't set it.
Please try the following:
in Settings | Editor | File Types, add 'Gruntfile.js' (or whatever
your file is named) to 'EJS' registered patterns (actual name for
EJS file type there is 'EJS combines data...')
click on the added pattern, press Edit, in Template data language
dropdown choose 'JavaScript'
Related
I am doing my first project in Foundation 6 and am having trouble getting the responsive navigation to work. I started with the basic page template that comes with Foundation (installed F6 using CodeKit) then I pasted in the responsive menu code exactly as it appears here http://foundation.zurb.com/sites/docs/responsive-navigation.html#responsive-toggle but when viewed at small screen sizes, the word "menu" appears, but clicking it does nothing.
The Drilldown responsive menu also does not work -- pasted in the drilldown menu code (second example down, on the page referenced above) and what appears is a long long list of links, nothing is collapsed and nothing slides in. There must be a script missing but I have triple-checked and app.js, foundation.js and jquery scripts are loaded. What else am I missing?
First of all sorry for my bad English, did you initialize foundation's javascript?
That can be done with the following code in youre custom javascript file:
$(document).foundation();
I do it with jQuery like this:
$(document).ready(function() {
$(document).foundation();
});
for more information see: Foundation-6 documentation - initializing
and please check if you have the proper file structure for the foundation files, please see the following documentation: Foundation-6 documentation - File Structure
tl;dr: Faulty purifycss configuartion in the gulp.babel.js file.
I also had this problem. My setup:
generator-webapp
webapp's jade recipe
I can get the responsive dropdown menu to work by using the tab and enter key. This means that the relevant js files are being loaded correctly. The navigation 'burger' also does not appear.
Upon using the chrome dev tools to inspect the responsive dropdown menu example from the foundation website, I noticed that style of <button class="menu-icon" type="button" data-toggle=""></button> is being effected by the .menu-icon CSS rule from the scss partial, _menu-icon.scss. Mine wasn't. When I looked, the foundation.scss file from the app/ has the exact same style rule. The converted foundation.css was being served from the .tmp/ folder, but did not have the .menu-icon CSS rule. Then I suspected purifycss again (which I had commented out of the gulp file before and forgot to reset the gulp serve, saw no fix and thus falsely excluded the purifycss rule from the list of suspects).
I set my gulp styles task up like this:
gulp.task('styles', () => {
return gulp.src('app/styles/*.scss')
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe($.sass.sync({
outputStyle: 'expanded',
precision: 10,
includePaths: ['.']
}).on('error', $.sass.logError))
.pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))
/*Stupidly assumed that purifycss supported jade files as src files*/
.pipe($.purifycss(['app/**/*.js', 'app/*.jade']))
.pipe($.sourcemaps.write())
.pipe(gulp.dest('.tmp/styles'))
.pipe(reload({stream: true}));
});
Which meant that the necessary styles were being deleted (including .menu-icon). I think I will use stylperjade or rearrange the tasks so that I can do this: .pipe($.purifycss(['app/**/*.js', '.tmp/*.jade']))\
Let me know if this was your solution as well
For some reason Webstorm will not color the code within a Gruntfile, it opens like a standard text file, I cant seem to find the settings to make it work like a normal JS file. I don't recall changing any setting which could have effected this.
Please check if 'Gruntfile.js' (or 'gruntfile.js' if your file name starts with lower case) is added to text file patterns in Settings | Editor | File types -> 'Text files' file type. Removing this pattern should solve your problem
When I create a new javascript file, a template like comment is added at the top of the file that looks like this:
/**
* Created by User on 2015-03-29.
*/
I would like to modify this template, but I cannot for the life of me figure out how.
In the settings page, I have tried searching for 'IDE settings', 'File and Coding Template' (as it would be in PHPStorm, I believe), 'Copyright' (as in IntelliJ), 'header', 'template', 'comment' and different combinations of those terms. But none of these terms result in anything relevant. And searching on google is difficult, because most links take you to PHPStorm or IntelliJ help docs.
Maybe my google-fu is off today...
Settings (Preferences on Mac) | Editor | File and Code Templates | Templates -- you need JavaScript File entry.
And searching on google is difficult, because most links take you to PHPStorm or IntelliJ help docs.
Well ... PhpStorm = WebStorm + PHP + Databases -- in terms of settings it is exactly the same... (comparable builds of course)
P.S.
In previous versions (WebStorm v8, PhpStorm v8.0.1 and older, IntelliJ v13) all Settings were in single column but separated in 2 groups: "Project Settings" on top and then "IDE Settings" on the bottom of the list. In current versions all settings are mixed together using collapsible tree structure and you have to look for special icon next to the settings section name -- it will tell if you this is an IDE wide setting or project specific.
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 accidentally created a file with no extension and I chose the wrong file type association. Text Document I think. I renamed it to have the .js extension which is what I wanted, but now it's stuck without any syntax highlighting. WebStorm doesn't treat it as a javascript file. I can't find anywhere to change how WebStorm treats this file. I've tried renaming it and renaming it back and that doesn't work. With any other name, (with a .js extension) it treats it as a javascript file, but not as the original name.
How can I fix this? The WebStorm documentation is no help.
In Settings (or Preferences for mac) > Editor > File Types you can edit patterns by which a file gets associated as some type or other.
If you select the patterns for a file type you have wrongly selected (in your case Text type) you can remove the filename pattern with which was created to associate you file's filename as a wrong type.
Then click Apply > OK
I've had this problem in php storm 8.0.3 on OSX.
I was struggling with a single file that had been added as a text file, but I'd typed in the .js extension.
I tried deleting and recreating, renaming and renaming back, deleting .idea altogether. Nothing worked.
I found that PHPStorm had added the entire file name to the list of patterns for a text file.
....
*.txt
myfile.js
... etc
This was obviously overriding all other settings. And futhermore it was in the IDE Config not the project config. So I'm guessing every other project would have suffered the same issue.
Once I knew where to look it was easily fixed.
Navigate to:
PhpStorm > Preferences > Editor > File Types > <highlight> Text files
Then find myfile.js in the Registered Patterns panel and delete it.
The file should immediately assume it's correct association.
Go to Settings->File Types and then click on "Text Files". You should see the file if you scroll down. You can then remove it with the association by selecting it and clicking the - (minus) button
Refer to File -> Settings -> IDE Settings -> File Types
In right select "Text files" in Reconigzed File Types then find in Registered Patterns your file and click remove your file
On Windows 8, I was able to remove the invalid association by going under File > Settings > Editor > File Types, then I selected "Text files" as the Recognised File Type and removed the invalid entry from the Registered Patterns block at the bottom.
So much answers and everything is close but no one as in my case.
A had an issue with .vue files. My old PHpStorm version did not track the .vue files, so I somehow associated them as .js files. However, this was a mistake because the syntax is different and I saw a lot of "mistakes" in the code.
Yeah, the solution is really in Settings (or Preferences for mac) > Editor > File Types dialogue. In the window you can see the list of possible associations. At the very bottom of the list you'll see the Vue.js Templates and I had no associations in the bottom window (see the pic), so I manually added *.vue association after clicking green "+".
I think this would be right for any proper file type added to PHPStorm. However, you can add your own file type.
In the new WebStorm versions we can click on the file, select the option Override File Type and change for the type that we want.
Selecting the Override File Type option:
Selecting the file extension:
I have found in phpstorm that I can use the Refactor > Rename... function to associate a file of unspecified file type (e.g. a name with no extension) with a file type.
For example if I have a bash script named do_the_things I can Refactor > Rename it to do_the_things.sh which causes it to pick up the bash highlighting, then when I Refactor > Rename it back to do_the_things it keeps the bash highlighting.
This works in PHPStorm, i can assume in WebStorm should be something similar
Go to Preferences directory
Here is how to find for your OS
https://intellij-support.jetbrains.com/hc/en-us/articles/206544519-Directories-used-by-the-IDE-to-store-settings-caches-plugins-and-logs
Find a file YOUR_PREFERENCES_DIRECTORY/options/filetypes.xml
Edit it with any text editor and delete needed row, for example
<mapping pattern="delete.yaml" type="PLAIN_TEXT" />
Top Menu File->Invalidate Caches / Restart
Enjoy
In my case, the file in question, DepositBreakdownList.js, was associated with a "type" called "File type auto-detected by file content". Selecting it and then removing it (with the minus sign button) allowed the file to be treated as a proper JavaScript file again.
Until I did that, I was unable to use Live Templates associated with JavaScript, even though the file extension was .js, which was just maddening.
I've found a solution,
delete (o rename as .old) the file:
C:\Users\.PyCharmCE\config\options\filetypes.xml
Es:
C:\Users\goofy.PyCharmCE2018.3\config\options\filetypes.xml
After like an hour of searching and screwing around I found a fix:
I renamed the file (through the refactor command) to a temporary file name. Then I created a new file with the correct name with the .js extension and it worked, then I copied the code from the original to the newly created file with the correct extension.
I imagine selecting "new javascript file" and doing the same thing would also work.