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.
Related
In Settings > Code Style > JavaScript I've set Tab size and Indent to 4. Why is WebStorm still ignoring these settings, as you can see in the preview window:
What settings could override these?
If you have EditorConfig plugin enabled (which should be by default) and have .editorconfig files in your project (or maybe even above the project root) then settings from there will override your Code Style (which is expected as this is the whole point of such plugin).
Why such behaviour? What can be done?
Please check what .editorconfig files are for -- they meant to be editor-independent. It meant to override your internal settings to provide consistency across different IDEs/editors used without the need to configure your IDE/editor just for this project/folder
You are editing Code Style settings and not actual EditorConfig settings
With .editorconfig you can do things that are not currently possible with Code Style (e.g. different right margins / trailing white space handling per different file types, even if they are not supported by Code Style)
Code Style is applied to the whole project (all files) while .editorconfig can be configured differently for each sub-folder and even have exclusions.
IDE should be showing you the notice (using light GUI theme it would be green bar on top of the editor window) where it would tell that "Settings may be overridden by EditorChonfig." -- I'm just not sure if it's available in WebStorm v11, or is it since v12 only.
If you go one level up in your settings (just Code Style and not Code Style > JavaScript as on your screenshot) you will see mention of this moment as well
You may file Feature Request ticket for such "update .editorconfig file while editing Code Style" idea at JetBrains' Issue Tracker.
Example .editorconfig file:
# Editor configuration, see http://editorconfig.org
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false
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 haven't been able to figure this out yet. Atom seems to use spaces as the default indentation mode. I prefer to have tabs instead though. Sublime Text has built in functionality for switching and converting indentation.
Anyone found out how to change the indentation mode of Atom?
Some screenshots from Sublime Text:
See Soft Tabs and Tab Length under Settings > Editor Settings.
To toggle indentation modes quickly you can use Ctrl-Shift-P and search for Editor: Toggle Soft Tabs.
Go to File -> Settings
There are 3 different options here.
Soft Tabs
Tab Length
Tab Type
I did some testing and have come to these conclusions about what each one does.
Soft Tabs - Enabling this means it will use spaces by default (i.e. for new files).
Tab Length - How wide the tab character displays, or how many spaces are inserted for a tab if soft tabs is enabled.
Tab Type - This determines the indentation mode to use for existing files. If you set it to auto it will use the existing indentation (tabs or spaces). If you set it to soft or hard, it will force spaces or tabs regardless of the existing indentation. Best to leave this on auto.
Note: Soft = spaces, hard = tab
Add this to your ~/.atom/config.cson
editor:
tabLength: 4
OS X:
Go to Atom -> prefrences or CMD + ,
Scroll down and select "Tab Length" that you prefer.
You could try going to "Atom > Preferences > Editor" and set Tab length to 4.
This is for mac. For windows you will have to find the appropriate menu.
Adding #Manbroski answer here that worked for me:
try Ctrl-Shift-P Editor: Toggle Soft Tabs
Late to the party, but a clean way to do this on a per-project basis, is to add a .editorconfig file to the root of the project. Saves you from having to change Atom's settings when you're working on several projects simultaneously.
This is a sample of a very basic setup I'm currently using. Works for Atom, ST, etc...
http://editorconfig.org/
# Automatically add new line to end of all files on save.
[*]
insert_final_newline = true
# 2 space indentation for SASS/CSS
[*.{scss,sass,css}]
indent_style = space
indent_size = 2
# Set all JS to tab => space*2
[js/**.js]
indent_style = space
indent_size = 2
This is built into core: See Settings ⇒ Tab Type and choose auto:
When set to "auto", the editor auto-detects the tab type based on the contents of the buffer (it uses the first leading whitespace on a non-comment line), or uses the value of the Soft Tabs config setting if auto-detection fails.
You may also want to take a look at the Auto Detect Indentation package. From the docs:
Automatically detect indentation of opened files. It looks at each opened file and sets file specific tab settings (hard/soft tabs, tab length) based on the content of the file instead of always using the editor defaults.
You might have atom configured to use 4 spaces for tabs but open a rails project which defaults to 2 spaces. Without this package, you would have to change your tabstop settings globally or risk having inconsistent lead spacing in your files.
I just had the same problem, and none of the suggestions above worked. Finally I tried unchecking "Atomic soft tabs" in the Editor Settings menu, which worked.
If you are using the version 1.21.1:
Click on Packages / Settings View / Open
Select "Editor" on the left side panel
Scrool down until you see "Tab Length"
Edit the value. I like to set it to 4.
Now, just close the active tab pane and you are done.
Tab Control gives nice control in a similar manner to that described in your question.
Also nice, for JavaScript developers, is ESLint Tab Length for using ESLint config.
Or if you're using an .editorconfig for defining project-specific indentation rules, there is EditorConfig
If you're using Babel you may also want to make sure to update your "Language Babel" package. For me, even though I had the Tab Length set to 2 in my core editor settings, the Same setting in the Language Babel config was overriding it with 4.
Atom -> Preferences -> Packages -> (Search for Babel) -> Grammar -> Tab Length
Make sure the appropriate Grammar, There's "Babel ES6 Javascript Grammar", "language-babel-extension Grammar" as well as "Regular Expression". You probably want to update all of them to be consistent.
If global tab/spaces indentation settings no longer fit your needs (I.E. you find yourself working with legacy codebases with varied indentation formats, and you need to quickly switch between them, and the auto-detect isn't working) you might try the tab-control plugin, which sort of duplicates the functionality of the menu in your screenshot.
When Atom auto-indent-detection got it hopelessly wrong and refused to let me type a literal Tab character, I eventually found the 'Force-Tab' extension - which gave me back control.
I wanted to keep shift-tab for outdenting, so set ctrl-tab to insert a hard tab. In my keymap I added:
'atom-text-editor':
'ctrl-tab': 'force-tab:insert-actual-tab'
Changing language-specific configuration
I changed the default tab settings, and it still did not impact when I was editing my files, which were Python files. It also did not change when I modified the "*" setting in ~/.atom/config.cson . I don't have a good explanation for either of those.
However, when I added the following to my config.cson, I was able to change the tab in my Python files to 2 spaces:
'.source.python':
editor:
tabLength: 2
Thanks to this resource for the solution: Tab key not respecting tab length
All of the most popular answers on here are all great answers and will turn on spaces for tabs, but they are all missing one thing. How to apply the spaces instead of tabs to existing code.
To do this simply select all the code you want to format, then go to Edit->Lines->Auto Indent and it will fix everything selected.
Alternatively, you can just select all the code you want to format, then use Ctrl Shift P and search for Auto Indent. Just click it in the search results and it will fix everything selected.
Yet another answer: If you are using Atom Beautify note that it has its own settings to determine the "Indent Char".
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.
I am familiar with theming and using template hints in the Magento back office to locate .phtml files.
What I am not really familiar with are the core files such as app/code/core/Mage/Catalog/Model
What I need to do is override a core file like I would a core phtml file by copying it to 'my theme'.
I basically want to amend some labels which appear on the order summary page of the Magento checkout process - domain.com/checkout/cart/
I followed the trail to the phtml files using template hints. Within the app/design/frontend/default/mytheme/template/checkout/cart I found the code
renderTotals(); ?>
Now I managed, by accident, to stumble upon two of the files I wanted to change:
/httpdocs/app/code/local/Mage/Sales/Model/Quote/Address/Total/Grand.php
/httpdocs/app/code/local/Mage/Sales/Model/Quote/Address/Total/Shipping.php
I made local copies of these files (http://www.magentocommerce.com/wiki/how_to/how_to_create_a_local_copy_of_app_code_core_mage) to override the default labels, like I would if I was overriding a template file.
My question is, how can you locate core files which pertain to the 'stuff' you want to change, located in function calls such as renderTotals(); ?> in the phtml files?
Not being able to pinpoint stuff like I can with template hints is slowing me down, and I am struggling to find a solution as I am not up on all the vocab surrounding Magento yet.
Hope this makes sense and thanks in advance!
From the same settings page where you turn on Template Path Hints, also turn on the "Add Block Names to Hints" setting. This will show you PHP class names such as: Mage_Sales_Model_Quote_Address_Total_Grand to which you can deduce the folder path (underscores represent a subfolder, and the last piece represents the file name).
If you're getting a block such as Mage_Sales_Model_Quote_Address_Total_Default then sometimes it just takes a little common sense to see that it's pulling in other files from the same folder (such as Grand.php and Shipping.php). But there are generally only a couple files in the same folder, so this is pretty easy to see.
As Sid Vel said, a good Search Project functionality is helpful. But if you find yourself looking at Abstract.php of some class, often you need to look in a subfolder in that directory with the proper name to find the concrete implementations. But still, it gets you very close to where you need to be.
I always use Dreamweaver's site / directory search function. It will scan through all the files in the Core folder and tell you where the function is from. In your case, I would search for "renderTotals". You need to enable PHTML editing in Dreamweaver.
Most IDE's will allow this kind of search option. In Aptana you can Ctrl + Click on the function to open the file it is coming from. Magento takes ages to index itself on Aptana, due to its sheer size.