The Problem
I have JavaScript-like files with extension .gml
I can convert the source to valid JavaScript via magic-string, and can go back the other way using trace-mapping.
I want to leverage Typescript on my .gml files to get strong Intellisense, e.g. by:
Creating a Typescript "program" that acts on the .gml->.js transpiled files and reports issues back; and
Creating a VSCode extension that proxies functionality to the Typescript language server and reverse-source-maps the results back to the editor.
It feels like there should be a relatively straight forward and generalizable approach to this, but my experiments have not worked out. Reference projects are either for much-more-complex scenarios or much simpler ones, and documentation on the matter is very light.
Prior Art
VueJS and Svelte use custom filetypes (.vue and .svelte), which they pre-process into valid Typescript, HTML, and CSS prior to proxying through to those respective language servers.
Their use cases are far more complicated than mine, and their code bases to accomplish this are extensive. I'm hoping to find a much more streamlined approach.
Possible approaches
I've had a little luck following the Svelte approach of creating a Typescript service and hooking up VSCode operations onto it, but this is extremely tedious.
I suspect that there's some possibility of using a Typescript plugin, but as far as I can tell that approach doesn't support using non-js/ts extensions nor source maps.
In any case I know I'll have to do significant work with the to-and-from-sourcemap conversions, but ideally that's the only difficult work I'd need to do.
Questions
Have you seen any examples in the wild of people solving a similar problem, or solved similar problems yourself?
Are there any deep-dive write-ups about this (I've found a few shallow ones)?
Is the plugin approach viable?
What are the possible ways to get non-js/ts extensions recognized by Typescript?
I am creating an extension for the first time and I saw some extensions on github like this one and noticed that he coded his extension using a boilerplate. To be honest, I didn't even knew that you could use boilerplates (a friend told me), it's my first time reading about it.
I wonder if I should clone some github repository and copy paste my files and work in it. I see that there are some boilerplates that give cross-browser support for your extension.
I am a little bit confused as I don't know if this is the right way to do it. Right now I don't need something huge for my extension because it's a simple one and I'm learning how things work (kind of new to webdev). I might want to add some google analytics to my extension later.
Would you advise me to use some boilerplate? To me it looks tidy but I can't understand most of the stuff that's happening around, would be difficult to modify some files.
Also, most of the boilerplates are for react, is there one that is like the most basic one for vanillaJS... like how can I find the one that is used in the repo link on top of the post?
My "IDE" of choice (it's not a real IDE) is Sublime Text 2.
There are nice plugins for this editor. One that I enjoy using a lot is SublimeClang: It parses your C/C++ code as you write it and shows you where errors and warnings are, just like a "real" IDE. This is fantastic because it cuts out the code/compilation cycle so I only ever need to go back to my terminal once I have my code already written because I can see my errors as I am working on the code.
I had hoped that jsLint (there are plugins for integrating this with the editor as well) would help accomplish the same task for me so that I can spot syntax errors before I test my page in the browser. Oftentimes the best way to do this involves uploading the entire file to the server and loading it up in the browser: While this workflow can be heavily streamlined already there is a lot of appeal to being able to locally check the code before uploading.
The problem I have with jslint is that it throws out way too many opinions about esoteric stylistic choices, many of which I do not care for. You want me to put all my declarations together in one line? No thank you, I have all of these comments here next to the variables, I'm keeping those comments!
Are there flags I can provide to jslint so that it will only warn me about syntax errors?
Many people feel the same way you do about JSLint. One result is the alternative JSHint. Many people find its defaults more to their liking. There are Sublime plugins for it too. Two of them are listed at http://www.jshint.com/platforms/.
JSLint does have several options to change its behavior.
It looks like you can define these in the sublime-jslint.sublime-settings file included with the plugin you linked to (in the "jslint_options" section).
I've recently fallen in love in WebStorm as an IDE for JavaScript development. The problem is, I come from a world of vim and lightweight editors, so I probably can't fully appreciate all the power that comes with IDE. Yes, I've seen the presentations and read the docs, but there's a lot of features and I'm not sure which of them are truly useful.
So, here goes my question: how do you use WebStorm and what do you find most useful? Any power-usage tips? Configuration hacks? Plugins worth mentioning?
I'm not looking for a list of features, I'm looking for a real-world usage examples and impressions.
PS. I work mostly with pure JS + Canvas element and some NodeJS.
Some random thoughts, maybe more later....
In the help, definitely read the Basic Concepts and skim the WebStorm Usage Guidelines for actions that you care about.
Learn to use Ctrl-Shift-A. It allows you to 1uickly find actions you can do by typing part of them. With that you can find anything once you know it exists.
WebStorm's (like IntelliJ) best magic is its code completion and refactoring features, which come from its code parsing and awareness. It figures a lot of stuff out, but you can help it out by making you have good source files. Put the commented versions of the libraries you use in your project so it can use those comments to display in the doc popups (just having them in the directory is all you need).
Be sure to leave the tips on.
Their forums are useful, but if you have a problem or feature request put it right into youtrack.com. They are much more responsive there. You can also vote for the stuff you want added.
And if you haven't seen it yet, there is a VIM plugin which will give you VIM editor keys, called IdeaVim.
Features I find most useful:
Code formatting. WebStorm's formatter is the best I've seen (of course, it still has some subtle bugs).
Built-in HTTP server: http://blog.jetbrains.com/webstorm/2013/03/built-in-server-in-webstorm-6/, How to open/debug current file using built-in Web server in WebStorm?
JsTestDriver integration.
Plugins. You can always find something useful.
I use the latest version of textmate for all my Rails development needs and I feel that I'm under-using the possibilities or this software. I only installed the Ruby on Rails bundle and use little to no snippets / shortcuts.
What do I absolutely HAVE to know / do in order to get the most out of my textmate in a web development environment?
I would prefer Ruby on Rails oriented answers, but any html/js/css answers would be helpful.
Edit: Added a bounty to get more inputs on this.
I was on the same boat some time ago. My biggest advice would be to reserve some time to learning your tool. It will do wonders to your productivy.
I started installing the GetBundles bundle:
cd ~/Library/Application\ Support/TextMate/Bundles
svn co http://svn.textmate.org/trunk/Review/Bundles/GetBundles.tmbundle/
With it, you can check and find new bundles. Be sure to go through most of the options of each one you install.
Next, try learning some Textmate skills. I'd recommend the Peepcode screencast. It covers Rails related productivy tips and information, and will give you some new ways to develop.
Then, you try reading most Textmate tips you can find on the Internet. There are a few I read from time to time: Textmate Tips, Cool Textmate Tips, Textmate Tips from Macromates, Mactips, Textmate Productivity Tips.
There is a Textmate book, but haven't been able to get into it yet. Should be useful, though.
Lastly, the best way to improve your skills is to practice. I try to come up with small week-length projects to use new tips or to remember features I had forgotten.
Good luck :)
Ctrl-Cmd-T allows you to search for commands, so every time I want to do something new (like a validation macro) I hit Ctrl-Cmd-T, type vpo and it finds the correct macro for validate_presence_of, and even tells me to just type v-p-TAB next time. It's quite the education.
Also, I managed to use text mate for a year without realising that Esc auto completed. Don't miss that one.
Ctrl+Opt+Cmd+V to see your clipboard history is also a life saver.
I've been using TextMate for a while now, and one of the best things about the application is the ability to extend it using bundles. As Yaraher said, there are lots of resources out there, and you should go and take a look.
My only other piece of advice is this: when you find yourself doing something with TextMate over and over, and it is a pain, or you think that it could really do with this or that feature, think about how you could do that with your favourite scripting language. If you can write a script for your feature, you can add it as a command that TextMate can use - have a look at the bundle editor (Ctrl+Opt+Cmd+B) and the existing commands, it is pretty straightforward.
Not Rails-related, but I can't say enough good things about the Zen Coding plugins for HTML & CSS coding. A huge bunch of keyboard shortcuts that will completely change the way you use Textmate (if you do a lot of XHTML/CSS like I do). Watch the Screencasts to see just how quickly you can do common tasks with them.
Another plugin that's been super awesome for me along the same lines is the jQuery Bundle that adds keyboard shortcuts for a bunch of jQuery methods.
Essentially, what I'm getting at here, is that with some diligent searching you can uncover a ton of community-built addons for Textmate that increase the functionality of this already awesome program.
Most of the coders in my office use some variant of Eclipse, but I say they can pry my copy of Textmate from my cold, dead hands. :D
Cmd-T ENTER lets you go back to the file you were previously editing. This is specially useful as TextMate doesn't support window split.
Also, check out the rails-footnotes plugin. It adds links to the bottom of your rail-app layout that automatically open the view or controller files in TextMate. Those links only appear in development mode.
Some of the other features that I use frequently are:
Duplicate line: CTRL-SHIFT-D
Select line: Triple Click (works outside TM too)
Move selection: CTRL-CMD-Arrow
Comment/Uncomment: CMD-/
Also, for maximum productivity, don't forget to set your keyword repeat rate to its maximum or beyond.
Probably the most useful TextMate trick I've found out about is Cmd-T, which shows a quick open dialog for the files in a project.
Another good trick I've learned is opening a TextMate project from Terminal (assuming you installed the TextMate Terminal Usage [via the Help menu]). mate . from the Terminal will open a TextMate project from the current directory.
If you watch Railscasts, you'll see how useful the various text completion and other Bundle options are. I'd second Yaraher in checking out all the stuff in the Rails bundle (Cmd+Opt+Ctrl+B).
I can recommend looking at these (Note: PDFs):
http://pragmaticstudio.com/rails (Rails TextMate Cheat Sheet)
http://www.g-design.net/textmate.pdf (HTML/CSS/Javascript/Other TextMate Cheat Sheet)
It would also be beneficial to look at the bundle editor (Cmd+Opt+Ctrl+B) and just look around at how the general bundles are setup. I did that, then shortly after started making little snippets in my own bundle to expedite things which I do most often.
Hope this helps, and good luck!
Indeed, take a look at the bundles that are available and definitly keep it in mind if you find that you are repeating or using the same stuff a lot. You'll end up with a lot of snippets in no time!
Think like <link rel="stylesheet" href="/public/stylesheets/screen.css"> can very easily be extracted into a snippet so the only thing you would have to type would be the link to the stylesheet itself.
This might seem like not a big deal but just think about the amount of times you've had to type something like this. Mastering Textmate is all about saving yourself from unnecessary keystrokes and making it work for you instead of the other way around.
For a list of most useful keyboard shortcuts for Rails development see my blog post: http://szeryf.wordpress.com/2010/02/15/textmate-shortcuts-you-should-be-using/
You might also want to check out this bundle: http://github.com/szeryf/rails-routes.tmbundle