You need to make sure that your .css files are linked to HTML using <link> tags - only those CSS selectors that are defined in stylesheet files explicitly linked to HTML are available in completion. See https://devnet.jetbrains.com/message/5528076#5528076 for more info
please download `bootstrap.css` to your project directory. WebStorm can't use online resources referenced via CDN links for completion. You need to have stylesheet files available in your project, referenced via relative paths
It is extremely inconvenient to have to download and place the Bootstrap CSS file in a developmentenvironment in an identical path and directory structure as the production deployed code will expect to see. Any significantly large or complex web application is going to use a deployment system to handle things like dependencies, fail-over, promotion, roll-back, etc. As such, it's likely to make it impossible for an IDE-using developer to have their work space configured to contain all the same web server DOCUMENT ROOT relative links to assets like CSS files work correctly, especially when working on partials which will ultimately compose the final web page.
One right way for JetBrains to handle this is to provide a way for the IDE to use an External Library reference (such as the PHP include paths in PHPStorm) which can be pointed at the developer's local reference copy of Bootstrap's CSS.
The alternative is a great deal of wasted time and effort that each developer using JetBrain's IDEs with Bootstrap CSS (or any CSS library) has to make to kludge up some kind of alternative way of finding the needed file. That is not "developing with pleasure."
1. Open the IDE Preferences menu and go to Languages & Frameworks > JavaScript > Libraries 2. Select the library you wish to add a stylesheet to and click Edit... on the right-hand side 3. Click the `+` button just aboveDocumentation URLs and select Attach Files... 4. Find and select the stylesheet you wish to add, then click OK to close the Edit Library dialogue window
The stylesheet is now attached to the global JS library, so you will get CSS code completions/recommendations from the stylesheet whenever you include the JS library for a project in the IDE.
It would be nice if JetBrains would automate this process by providing an easy option to Download CSS files from CDN links and save them as global libraries like it does for JS files.
Since 2019.3 <link href="..."/> will get a warning with a quick fix (Alt+Enter) to download the remote CSS file.
The CSS file will be downloaded and saved not in the project but in the IDE's config folder, and it will be configured as a JavaScript Library. As a result, the warning will disappear, code completion for CSS classes will start to work.
To add to this, if someone has already downloaded the library and they still don't have autocomplete make sure it is enabled in libraries by going to Settings -> Languages & Frameworks -> Javascript -> Libraries and checking enabled if it isn't already.
You need to make sure that your .css files are linked to HTML using <link> tags - only those CSS selectors that are defined in stylesheet files explicitly linked to HTML are available in completion. See https://devnet.jetbrains.com/message/5528076#5528076 for more info
Hello Elena, I am linking the css file using link tag as below:
please download `bootstrap.css` to your project directory. WebStorm can't use online resources referenced via CDN links for completion. You need to have stylesheet files available in your project, referenced via relative paths
Will completion work from CDN in any any future versions?
no, unlikely
it certainly very annoying not to have code completion working from CDN. Just about any free IDE has this working somehow, why not Webstorm?
Thanks
It is extremely inconvenient to have to download and place the Bootstrap CSS file in a development environment in an identical path and directory structure as the production deployed code will expect to see. Any significantly large or complex web application is going to use a deployment system to handle things like dependencies, fail-over, promotion, roll-back, etc. As such, it's likely to make it impossible for an IDE-using developer to have their work space configured to contain all the same web server DOCUMENT ROOT relative links to assets like CSS files work correctly, especially when working on partials which will ultimately compose the final web page.
One right way for JetBrains to handle this is to provide a way for the IDE to use an External Library reference (such as the PHP include paths in PHPStorm) which can be pointed at the developer's local reference copy of Bootstrap's CSS.
The alternative is a great deal of wasted time and effort that each developer using JetBrain's IDEs with Bootstrap CSS (or any CSS library) has to make to kludge up some kind of alternative way of finding the needed file. That is not "developing with pleasure."
Vote here:
https://youtrack.jetbrains.com/issue/IDEA-174025
Also vote here:
https://youtrack.jetbrains.com/issue/WEB-10023
To add stylesheets to your global JS libraries:
1. Open the IDE Preferences menu and go to Languages & Frameworks > JavaScript > Libraries
2. Select the library you wish to add a stylesheet to and click Edit... on the right-hand side
3. Click the `+` button just above Documentation URLs and select Attach Files...
4. Find and select the stylesheet you wish to add, then click OK to close the Edit Library dialogue window
The stylesheet is now attached to the global JS library, so you will get CSS code completions/recommendations from the stylesheet whenever you include the JS library for a project in the IDE.
It would be nice if JetBrains would automate this process by providing an easy option to Download CSS files from CDN links and save them as global libraries like it does for JS files.
Since 2019.3
<link href="..."/>will get a warning with a quick fix (Alt+Enter) to download the remote CSS file.The CSS file will be downloaded and saved not in the project but in the IDE's config folder, and it will be configured as a JavaScript Library. As a result, the warning will disappear, code completion for CSS classes will start to work.
To add to this, if someone has already downloaded the library and they still don't have autocomplete make sure it is enabled in libraries by going to Settings -> Languages & Frameworks -> Javascript -> Libraries and checking enabled if it isn't already.
i currently use sublime text3 and was facing the same problem. But I found a rather easier solution, all had to was
preferences>control package> type"install package">look for bootsrtap4 autocomplete and instal it
Elena Pogorelova 's answer is the correct way to do it if you are using CDN files.