I'm looking on trying out VIM for an IDE of some sort, I've installed vimrc for the most part it looks pretty decent.
What I'm missing is linting configuration for syntax errors and what not, some sort of intellisense (which I think vim-javascript does).
From what I've read, vim-pathogen is the way to install vim specific plugins.
I've followed the documentation in vim-javascript on how to install using pathogen. I notice after installing that I see text colors differently but I still don't get autocomplete of any sort.
I tried adding the configurations to my .vimrc file but I don't think I'm doing it right.
Here's what it looks like:
set runtimepath+=~/.vim_runtime
execute pathogen#infect()
source ~/.vim_runtime/vimrcs/basic.vim
source ~/.vim_runtime/vimrcs/filetypes.vim
source ~/.vim_runtime/vimrcs/plugins_config.vim
source ~/.vim_runtime/vimrcs/extended.vim
let g:javascript_plugin_jsdoc = 1
let g:javascript_plugin_ngdoc = 1
let g:javascript_plugin_flow = 1
set foldmethod=syntax
try
source ~/.vim_runtime/my_configs.vim
catch
endtry
First mistake: considering Vim as an IDE.
Second mistake: using someone else's setup.
Third mistake: thinking you can get away without learning Vim.
Anyway…
There's no such thing as ~/.vim_runtime. Your user-level runtime directory is ~/.vim.
Pathogen is not a way to "install" plugins. It's a way to "enable" plugins. There are many plugins for installing plugins (which doesn't really make any sense), and you can simply install them manually, which is a lot easier than random bloggers would like you to think.
"Syntax errors and what not" is done via :help make. Read it (and the related sections) instead of installing pointess plugins.
"some sort of intellisense" is already built-in; it's called "omni-completion" and you can read about it in :help ins-completion. That plugin only provides an alternative syntax script (for syntax highlighting, mostly), an alternative indent script, and an alternative omni-completion script.
Vim doesn't do autocompletion. It's totally unnecessary but if you really want it you can get it via some third-party plugins. You can find them in the "script" section of http://www.vim.org.
That crappy over-engineered setup will get you nowhere. Remove it from your system and start again from scratch instead of abandoning control to random semi-ignorant gittards. The only thing you can achieve with distributions like these is never learning your tools properly.
Related
I'm sure thousands of other JS devs are feeling the pain I'm feeling. I love jumping to function definitions in .d.ts files while browsing code in VS Code.
However, sometimes instead of going to the .d.ts file, I'd like to jump to the raw JS code that is being hidden by the .d.ts file that sits in front of it.
Does anyone know how to optionally force a jump to the JS source code (if it exists) and not a TypeScript definition file.
Thanks!
EDIT: I am aware that this has been asked for to the VS Code team and will not be officially supported by them. I'm looking for some sort of hacky workaround (extension or otherwise) to get this to work.
Recently announced, VS Code Insiders (v1.67.2) supports a Go to Source Definition context menu option from right-clicking the symbol. This was committed 19-APR-2022.
This feature requires TypeScript 4.7:
Go To Source Definition
TypeScript 4.7 contains support for a new experimental editor command called Go To Source Definition. It’s similar to Go To Definition, but it never returns results inside declaration files. Instead, it tries to find corresponding implementation files (like .js or .ts files), and find definitions there — even if those files are normally shadowed by .d.ts files.
This comes in handy most often when you need to peek at the implementation of a function you’re importing from a library instead of its type declaration in a .d.ts file.
You can try this new command in the latest versions of Visual Studio Code. Note, though, that this functionality is still in preview, and there are some known limitations. In some cases TypeScript uses heuristics to guess which .js file corresponds to the given result of a definition, so these results might be inaccurate. Visual Studio Code also doesn’t yet indicate whether a result was a guess, but it’s something we’re collaborating on.
You can leave feedback about the feature, read about known limitations, or learn more at our dedicated feedback issue.
Delete the .d.ts file (temporarily)
This is obviously a super-crappy workaround, but it should work. By deleting the file you don't want to see, VSC will only have one place to take you: the file you do want to see.
When VSC takes you to the .d.ts file, right-click on the file tab and click "Copy Relative Path"
Open the VSC terminal and enter rm [PATH] (or del [PATH] for Windows)
leave the (now-deleted) .d.ts file tab open
Go back to the original file and try navigation again
if it doesn't work, you may need to reboot the TS server
Once you've seen the code you want to see, go back to the .d.ts file and save it
this will put the file back exactly as it was, which will probably be invisible to your source-control
if not, you may need to use your SCM to undo the deletion operation
Again, an awful hack. And I share your frustration that the VSC maintainers & community have no interest in this feature. Just bear in mind that their goal is to make their propriety technology displace all technology they don't own, so you will occasionally discover that they will refuse to help you as a web developer because they want you to be a Microsoft developer.
I wrote a JavaScript library, and I'm trying to understand how I can show the function parameters/definitions when a user hovers over them in VSCode (I see this in other libraries, and I dont notice anything special about them). Im sure its something simple but I just dont see how I would do it. Link to the project is here: https://github.com/isaacgr/jaysonic
I've tried adding jsdoc style comments around the class definitions, but in general I'm not sure what to try. I'd appreciate if someone could point me in the right direction.
An example would be what I see with JSON.parse
Visual Studio Code uses IntelliSense for autocompletions like the one you mentioned and in JavaScript they are based mainly on TypeScript definitions. If a project is already built using TypeScript, they may be generated and linked in the corresponding package.json-file using a "typings" or "types" property.
Alternatively (I haven't tested this approach though) existing JSDoc comments may be used to generate these TypeScript Definitions.
The TypeScript Community has furthermore (often manually) created separate Typescript-Definitions, which are available as npm packages called #types/name-of-the-package.
In your case the first approach of creating/generating a typings-file and linking it in your package.json is probably the best approach to achieve the desired result.
Btw, if you want to inspect such a typescript definitions file, press Ctrl (on Windows) and click on the JSON.parse method. This will show you the corresponding typescript definitions file called lib.es5.d.ts (which is embedded in vscode as it's part of the JavaScript language and therefore doesn't need to be installed)
For the project I use EJS (http://ejs.co/) as express templating engine. It is good and easy to use, but editing files is a bit of a problem - text highlight is worse than average and I could not find any tools to auto format files.
My main IDE is VS Code and I have tried Atom.
For VS code I used QassimFarid.ejs-language-support, which has way more installs than all others and I found it lacking. Tried DigitalBrainstem.javascript-ejs-support, but it is getting confused with my code pretty soon too.
For Atom I go with language-ejs (atom.io/packages/language-ejs) which is very good.
Sadly, both VS Code and Atom do not have any autoformat capabilities (read packages), and pure JS formatters are confused with ejs markup.
What do you use to format your ejs templates?
P.S.
I do not mind trying some other IDEs/editors or even some standalone formatters.
Your question is quite subjective, so I can't really offer a definitive answer. But I get the feeling you're just using the base text editor rather than installing packages.
Both VS Code and Atom come with package systems. In VS Code you can click on the "Extensions" icon on the left hand panel (under the debug item). This will let you search for extensions that offer things such as auto-complete and syntax highlighting. Just by typing in "ejs" there are 4 different syntax highlighting and evaluators.
Atom also has a similar system to search for and install packages. From here you should be able to find one which suits your needs for EJS.
Being new to both JavaScript and Haxe, this may have a simple answer, but I've discovered that Haxe has externs port on GoogleCode for EaselJS, but they are out of date and correspond to an earlier version. I've been able to fix errors as they occur during compile time, but I'm still wary that I didn't catch al the new variables and function names.
My question is: is there a simple way to generate externs for a large JS library like EaselJS?
You might want to take a look at Joshua Granick's work with BuildJS:
http://www.joshuagranick.com/blog/2011/10/14/use-buildjs-to-make-externs-for-haxe-js-automatically/
Basically there's a tool called JSDuck which is supposed to compile documentation for JavaScript libraries, and it can output to JSON. He's used the output from JSON, combined with his "buildjs" library to build haxe externs.
He's used it for Sencha Touch, and I've used it for ExtJS, but both of those are Sencha products and their coding style is known to work with JSDuck. You can give it a go with EaselJS, if it works then BuildJS should generate pretty accurate externs.
Otherwise, you might try find the author of the original EaselJS externs and see if they can provide an update, or give you help creating an accurate update. Most of the haxe developers you can contact easily enough using the mailing list or google groups:
http://groups.google.com/group/haxelang?hl=en
I'm a bit late with the answer but you can find the latest (v0.5.0) externs for EaselJs here:
https://github.com/Fintan/easelhx
I generated them using BuildHx (https://github.com/jgranick/buildhx) which is now able to parse YUIDoc comments and then tested them by porting some of the code samples that accompany the EaselJs source.
Right, I did try and install Joshua's tool, but I'm running into an issue with JSDuck.
In the example you linked to, JSDuck is supposed to have a --json param, but the latest version seems to have deprecated that. I'm trying some others using the config file:
{
"--out": "out",
"--guides": "json",
"--warnings": ["all"],
"--": [
"src/easeljs/"
]}
But that doesn't work. The guides param seems to fail no matter what I try.
Creating the json file gives me this ouput:
C:/Users/mycmp/AppData/Local/Temp/ocr374A.tmp/lib/ruby/gems/1.8/gems/jsduck-3.3.0/lib/jsduck/json_duck.rb:36:in `read': Permission denied - K:/Vault/Haxe/myproj/json (Errno::EACCES)
So I'm not sure what to do next. It'd be great to get this working for lots of libraries.
By the way, I'm using the latest JSDuck and Windows 7.
I'm trying to configure a NetBeans build to call jslint and produce errors that I can click on to take me to the source.
Using the Maven build script from Maven plugins to analyze javascript code quality, jslint is running and producing errors but I can't click on them. The text in the NetBeans output window looks like this:
[jslint] C:\Documents and Settings\arx\My Documents\Progs\jsweb\src\main\wwwroot\jsweb.js:125:48: 'keydown' is not defined.
I'm running NetBeans 6.9.1 on Windows. The spaces in the path aren't an issue. I tried it with a spaceless path and it still didn't work.
Ultimately I want to edit a simple javascript+html project in NetBeans and have clickable errors from jslint. I'm not wedded to Maven. Any suggestions gratefully received.
Update: A solution
If I put jslint4java directly into an Ant project (rather than an Ant project wrapped in a Maven plugin) the output doesn't include the [jslint] prefix and I can click on the errors.
This is a bit of a chore because it seems to be necessary to explicitly list the locations of all the jar file dependencies, but it works.
Another Update
I'm having another go at making this work in Maven because its java dependency management is nice. The problem is definitely the [jslint] prefix in the output, which is produced by Ant.
There doesn't seems to be any way of making NetBeans ignore the prefix, which is odd because Ant is NetBeans's default build tool.
The prefix can be suppressed by setting the emacsmode property on Ant's DefaultLogger. NetBeans does this when it lauches Ant iself (if "build.compiler.emacs=true" is set in Options), but maven-antrun-plugin doesn't (and looking at the source, there's not currently any way of persuading it to).
Possible fixes are:
Make NetBeans better at decoding Ant output.
Add an emacsmode option to maven-antrun-plugin.
Find a native Maven jslint plugin (so Ant isn't used at all).
Option 3 looked like potentially the simplest so I used TortoiseSVN to download the source for http://mojo.codehaus.org/jslint-plugin/ from https://svn.codehaus.org/mojo/trunk/sandbox/jslint-plugin and got it working. But it produces NetBeans-unfriendly output like:
[ERROR]jssvg.js:2690:48:'keydown' is not defined.
The easiest way is to add this plug-in. Supports the Netbeans 7.3.