Working with javascript in VIsual Studio - javascript

To work with JS files in Visual Studio 2008, I did:
Tools -> Options -> Text Editor -> File Extensions
and added js extension with Script editing experience.
That works pretty much as expected apart from the following things:
Syntax highlighting is set-up extremely slow (after 10 seconds or so) when I open the JS file. The compiling warnings are generated equally slow and they disappear slowly when fixed. Generally, not a big deal, but I wonder why. Until the file is syn highlighted, you can't put in breakpoints.
Intelisense works, but not always. For instance, if I use getElementById to get the element, intelisense with that element doesn't work. I guess it has to do with context, as the compiler can't determine what kind of object is in question. It also doesn't work inside an html page using the script tag, but in this case syn highlighting is immediate.
If there is any better approach?
I am currently opting to use an external editor and to launch it by adding a custom "open with" action on js file. However, I don't like doing this because I can't use the fantastic VS debugging capabilities...

The 3rd party addin Visual Assist X can help with js.

Related

Can't get the correct Language Mode / IntelliSense for a script tag with type="text/jsx" in an HTML file

I have the latest version of Visual Studio Code (1.75.1). Am using "Solarized Dark" color theme.
I have an html file, with React Javascript code inside tags.
If I leave the language selection as "HTML" it doesn't color anything inside the script tags:
If I use "JavaScript React" or "Babel Javascript" as the language mode I get error highlights that are not errors, and intellisense doesn't work that well:
I tried changing the theme to Dark+ and it didn't make a difference either.
Why does this happen?
It's because you set the type attribute in your script tag to "text/jsx" (nothing inherently wrong with that).
Currently (at the time of the writing, v1.75), VS Code only supports JavaScript intellisense for script tags with either no type attribute, or type="module", type="text/javascript", or type="application/javascript" or similar.
type="text/jsx" is not currently supported.
There have been two issues about this reported on the VS Code GitHub repo: Syntax highlighting doesn't work with "text/jsx" script tags #150171 and Syntax highlighting for text/jsx #145992. In both, the a repo maintainer comented that the correct place to report the issue is at https://github.com/textmate/html.tmbundle/issues, which has been done now: Syntax for text/jsx inside HTML #119. Note: Please consider not commenting "me too" in the comments there. I can't speak for that repo's maintainers, but for many project maintainers, such comments tend to come off as annoying unless the commentor actually also volunteers to help out. You can just give a thumbs up reaction if you don't want to expend effort in helping implement the feature.
For your skill-in-googling learning, here's the google search query I made to find those: vscode issues html script jsx
Related: How can I enable IntelliSense for JavaScript inside HTML?

The best extension to enable autocomplete feature when writing JavaScript in Atom

I'm learning Javascript and up until now when I wanted to change anything in the DOM, I was using Google Chrome devtools to do that. Now I'm moving to write my code inside the JavaScript file, that accompanies the webpage, in Atom but the problem is the extremely useful autocomplete features of Chrome devtools is not available in Atom. For example when I type this code:
document.addEventListener('click', function(){
const mainHeading = document.querySelector('h1');
mainHeading.style.backgroundColor = 'red';
})
Chrome devtools is intelligent enough to suggest backgroundColor with a capital C to prevent any typing errors but the same thing doesn't happen in Atom. In fact Atom does not have any suggestions at all. I have tried installing different JavaScript plugins such as atom-ternjs or autocomplete-javascript, to name a few but none is working when you want to write the code to manipulate the DOM. Any suggestions to solve this is greatly appreciated.
Here's a quick solution using Atom Ternjs.
Navigate to the menu bar and click Packages-> Atom Ternjs -> Configure Project.
Here, select the browser option under libs
Then, just scroll down and click on Save and Restart Server.
I hope this helps.
I'm using TabNine extension now and I'm satisfied with the performance. It uses deep learning to learn and predict the variables and lines of code you might want to write based on those variables and the more lines you write in a particular project the better it gets at giving the suggestions.

VS code Intellisense support in PHTML-files for inline css / inline javascript

I am using Visual Studio Code since a few days and I was wondering if it is possible to have support for Intellisense inside inlined css-blocks and/or inlined javascript in '.phtml'-files.
I could not find a solution online only a few people complaining about this not working from a few months back but I nothing that worked for me.
It would really help me a lot if someone has any idea how to solve this or at least a step in the right direction, or if I have to move the css and js into external files (of course thats better(!) but thats not the point here ;))
Thanks in advance.
This works for me after 2 changes in vscode.
User settings
I added below to the user settings
"files.associations": {
"*.phtml": "php"
},
Extension
Installing the intelliphense extension
And now both php as well as css intellisense works
Make sure you have no other conflicting extension enabled which may cause issue.
Also do have a look at the below open thread
https://github.com/Microsoft/vscode/issues/670

Keep javascript functions collapsed in VS2013

I am working with the new Visual Studio 2013 that now also has better support for embedded javascript code inside ASPX-Pages.
Since I there are some ASPX pages that have pretty much javascript code on it, I am collapsing the functions I don't need. However the next time I open the ASPX page in the editor the functions are all expanded again...
I am now asking: Does anyone know if there is a setting or something that enables to keep them collapsed, once they got collapsed by me? Just like it works for methods / classes collapsed in .cs files.
I also could not find a direct solution for this, so I looked up information regarding macros in Visual Studio. I found that recording the collapse operation (Ctrl+M) on the specified functions and running this macro at each startup solved my problem temporarily, but not after extensive change in my code.
I would recommend looking into parametering macros for an easy to maintain, semi-automatic code-collapse on startup. This is not a read-and-go answer, but it can give you some hints on where to start a workaround.
http://msdn.microsoft.com/en-us/library/b4c73967(v=vs.90).aspx

Mark a position in eclipse text editor?

I have two questions:
While editing a source file, it's very convenient to be able to label the current position of cursor and then jump to it later by somehow calling that label. I VIM, there is the marking notion, but I'm not aware of such possibility in Eclipse text editor.
Is there any way in Eclipse to add a portion of the code to the outline window, such that you can easily jump to that part when you click on it? I know that for java source-code, almost all variables and functions are shown there, but what if I have a html/javascript code, in which I'm using jquery functions, and the outline doesn't show these functions.
Any help is appreciated!
I dont have any direct answers for your question.
May be you are looking for the following eclipse features.
Eclipse supports bookmarks, you may use that feature. Also CTRL + Q will go back to the last edited location.
You may be able to get this using the Mylyn, which is packaged along with eclipse by default. Implements the notion of a Task focussed IDE ( RECOMMENDED)

Categories