Pic1
Pic2
Pic3
Hi, I'am new at js. I'am using VSCode. My problem is suggestions. I dont know it's true name maybe not suggestions maybe it's intellisense but When I pick an element with DOM and want to change it's style component, I wrote element.style but there aren't any suggestions showing up you can see in first two pics. But if I write element.style. there are some suggestion showing up. While on chrome dev console if I write elemnt.style
pic4
It shows me the style component. So how can I active it suggestions on visual studio code , like google console? I have some extensions is that cause problems?
extensions
VSCode is using static code analysis to try and guess what the types of your variables are. It has to do this because JavaScript is dynamically typed, so there is no way to be certain of the type of any given variable while you're writing the code. The JavaScript plugin for VSCode uses various heuristics to try and prove useful feedback.
Chrome actually evaluates the expressions you're typing as you type them, against a real DOM and JS runtime, and provides accurate feedback by reflecting on the value of each expression.
You can't make VSCode's static analysis behave like Chrome's dynamic reflection. They are very different systems, and this is a fundamental limitation of code-completion/intellisense for dynamic languages.
Related
I copy code from VSCode to Quill, it has a nice color scheme. But when I enable code-block, it becomes just dark and boring. Is there any way to preserve original colors?
The colorscheme you see in VSCode is what's called syntax highlighting, and its done dynamically, i.e. is procedural and only "exists" in VSCode as it reads that code and displays it to you in some kind of visual buffer.
Typically, when working with code snippets/markup/markdown and a clipboard which copies and pastes, its pretty much just the text. Code, like this html code you are working with here, is never what is called rich text. Mainly because rich text is already a kind of code! It is something which defines the bold and colored aspects of your text (or image uris, links, etc), that, when you see it in Word or your web browser, it is something that has been parsed as a code and turned into a presentation of formatted text (in a way, the entire history of software and/or application development revolves around this very idea, consider the history of WYSIWG).
For this reason, something like html markup existing in your IDE which is itself only a "representation" of html markup, would be quite a weird thing that would be complicated to handle, not to mention quite distressing ontologically in coding world.
What you need is something that will reproduce the same procedural syntax highlighting you see in VSCode within css/js within Quilljs, and... your in luck!
https://quilljs.com/docs/modules/syntax/
That seems to be what you need, and you can even configure it to the exact colors you like in VSCode with some patience. (Quill is using the highlight.js library internally, as the module description page notes, so thats why the config link is pointing to those docs.)
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.
How can I simply get in this little popup (code completion) all possible methods/functions given when I type window.(blablabla).
Because if I type window. there is no "event" method for example.
In NuSphere there are all methods been listed.
Please differentiate between JavaScript and DOM code assist. There are many questions/answers here about this but it's ambiguous which of these two they refer to. None, I've seen, particularly claims to have found a solution for DOM and most mentions Aptana as standalone IDE or Eclipse plugin for solution.
For reasons outside the scope of this question I use Eclipse Indigo (3.7.2) and got this working w/o Aptana. This solution probably depends on the JavaScript Development Tools plugin.
First in the Navigator pane right click the project and hover the Configure option. Select Convert to JavaScript project or Add JavaScript Support.
Open project properties and a JavaScript item should appear in the left hand side list of configuration options. Expand and select Include Path. In the Libraries tab on the right you will see ECMA Script and ECMA 3 Browser Support. Switch to the Global Supertype tab and tick the ECAM 3 Browser Support checkbox. Restart Eclipse.
--
However in my case this last option didn't seem to work (when selected 'window' as global supertype, below the list got 'Window() null') and window. didn't bring results but document. and all other JS globals did. (So I could say for e.g. var w = document.defaultVeiw; and w. did bring up desired list.)
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)
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.