community. I'd like to know how to keep writing emmet code in the next line of VSCode after the command gets just too big. Just to keep organized and be able to see all the instructions.
An option could be that you open another html file in your VScode and make the tab smaller to force the linke break.
I hope that helps you.
However in the documentation it says that a space is a stop symbol where Emmet stops abbreviation parsing.
Here you find the link to the documentation:
The creator of emmet does not recommend writing to long or to complicated emmet abbreviations, because it's quicker to write shorter and simpler emmet code.
Here is a quote of the website:
Abbreviations are not a template language, they don’t have to be “readable”, they have to be “quickly expandable and removable”.
You don’t really need to write complex abbreviations. Stop thinking that “typing” is the slowest process in web-development. You’ll quickly find out that constructing a single complex abbreviation is much slower and error-prone than constructing and typing a few short ones.
I have found Sublime Text's Reindent Lines feature to not being very reliable or helpful, especially when dealing with JSON files. Does anyone know of a way to make it work better? I know of plugins like "HTML-CSS-JS Prettify" but they only (and quite correctly, I might add) strive to work with HTML, CSS and JS respectively. I'd love to know if there is better way to indent/reindent all kinds of files.
Bonus points for any hint regarding converting from tabs to spaces (or vice versa) and reindenting correctly in one go.
pretty JSON package works perfectly for me.
You can specify the style of indentation from the package setting also. (which solves your second problem)
I'm looking for a syntax in Sublime Text that highlights my Flex and Bison files (or lex/yacc) in a way that makes them readable... Sublime Text automatically chooses Lisp for Flex files, but that doesn't do the trick all that well. Any suggestions to try another syntax? Or is there a plugin somewhere that's useful (haven't found anything so far)?.
I haven't found one built specifically for Sublime, but I've found one for TextMate, which Sublime is compatible with.
Therefore, for Flex highlight, all you need to do is git clone the TextMate's syntax files to your Packages folder.
Regarding Bison, I've found a syntax for TextMate, but it didn't work very well for me. The one Vaklarados posted worked nicer with my source files.
The one thalesmello posted works well for Flex. For Bison, I've found this one - it's pretty minimal but it's a start:
https://github.com/Jackneill/sublime-text-packages/tree/master/Packages/Bison
Please let me know if you find something better!
edit: I take it back - the Flex one highlights start states & C/C++ code in pink and it looks quite terrible. For basic lex files it looks okay, but it needs work. :)
edit again: as sonu kumar pointed out, the project has been removed from github. For an alternative you could try the built-in OCamlyacc highlighting (pretty decent), or another alternative: https://bitbucket.org/artyom_smirnov/sublime-text-bison-highlighter (needs some work)
I'm using Sublime a lot more & do a fair bit of work in Flex/Bison, so I might get around to writing one... one day. :D
Indeed there are:
Flex
Bison
It's not so hard to write your own packages for non-typical languages. Just browse the source of other language syntax files and copy-paste-change what you need. Also raises your regex skills to a better level.
Install Package Control for Sublime Text.
I found this there:
https://sublime.wbond.net/packages/Bison
Do try it, I found it good enough for my use.
https://github.com/m-happy/Packages/blob/master/Flex/Flex.sublime-syntax
You can add this file to your sublime package.
Please point me to some guides on how to master (X)HTML, CSS with Vim. I preffer to create web pages by hands and I decided to go with Vim.
Any useful plugins, tips & tricks, tutorials, how-tos, books, articles?
Thanks!
You'll "master (X)HTML, CSS with Vim" the same way you'd do with any other text editor or language: by working hard, reading books, watching screencasts and keeping up with the news. The editor you choose is totally irrelevant.
That said, here are a few native features and plugins that helped me a lot:
Omnicompletion is Vim's own autocompletion-like feature, except that it's not automatic.
Hit ctrlp or ctrln to complete with a word contained elsewhere in your document.
Hit ctrlxctrlo to display a list of possible completions based on the language.
BEGIN EDIT
Another very very useful feature is "file-path completion", start typing the path to a file and hit <C-x><C-f> to display a menu with possible completions.
Also, the aforementioned features can be automated with plugins, the one I use is AutoComplPop.
END EDIT
Objects allow you to move, select and perform actions on your code in crazy cool ways.
Say you have <div>word</div> with the cursor on o, dit will delete word, cit will delete word and place the cursor between the tags for further editing and so on…
If you know what d, c or v mean, that i roughly means inside and a roughly means around and that t means tag you already have a very powerful tool, there. Vim has other objects very useful for code editing: ", ', (, [, { etc, type :help objects for more.
For me, this feature alone was enough to justify scraping TextMate.
Blockwise Selection does what it says. :help blockwise-visual for more info.
:normalize or :norm is also very useful to prepend or append something to a group of lines.
SnipMate is a plugin inspired by TextMate's snippets system. You type form then hit tab to expand to a complete boilerplate <form> element in which you can move by further hitting tab to edit values and attributes.
Surround takes the objects business to another level by making it possible to add tag pairs around your selection, deleting them or changing them.
If you take the example above, hit cst<p> to change it in a more correct <p>word</p>. To add a pair of tags to word, select it with v then hit S and type the tag you want.
Sparkup is a pretty awesome plugin. Besides that, I normally use both snipMate and delimitMate, though those are useful for coding in any language.
I do it that way. I haven't found that much support for it, so I wrote a little of my own. I keep it on Google code hosting. I also use a version of Vim with Python embedded, and use some Python to extend some functionality. That's in the pycopia.vimlib package.
There is only a little, but hopefully useful stuff. You can start from there.
Install CSS3 syntax plugin.
Install HTML5 syntax plugin.
Install Syntastic syntax checker plugin.
You'll also have to install CSS Lint's CLI tool, since the syntax checker uses it.
There are a lot more plugins related to general development, which you can find in several questions scattered around this website, but the ones above a specifically related to help writing better CSS & HTML.
Emmet. Which was called zencoding a long time ago, is a nice plugin for several editors (including vim) with many features that enables you to code html and css very rapidly.
For example, you can type div.some span.other<ctrl+y> ans you'll get:
<div class="some>
<span class="other>
(cursor here)
</span>
</div>
tl;dr; install this vim setup https://github.com/jameslai/jvim
James Lai wrote an amazing article on Frontend Vim which was 404'ing when I answered this. It has helped me switch from ST2 to VIM so I'm posting it here.
Why I Use VIM as My Editor of Choice for Front End Development
by James Lai
I’ve been using VIM for years, and I just can’t get away from it. While many people like to use Sublime Text 2, and I can’t help but absolutely encourage that, if you’d like to use an editor that can scale with your knowledge, VIM should be your editor of choice.
Easily edit content within tags
As FED’s, we’re constantly editing content within tags. VIM makes this easy with its “tag” text object - t. Here’s a common scenario, you have source code that looks like:
<div>Some content within here</div>
In VIM, to replace the content within that tag, you merely need to press cit. This will change the inner tag and you’ll be left with this:
<div></div>
Easily replace HTML attributes
Similar to the above, we deal with content within quotes all the time, often as attributes within our HTML. You may have something that looks like:
<aside class="one-third author box">
In this scenario, just hit ci". Perhaps the neatest part about this trick, if this was the only content on that line, you don’t even need your cursor anywhere near the quote itself! VIM is intelligent enough to simply empty out the content of the quote regardless of its position in the line, and you’ll be left with:
<aside class="">
Jump back and fourth between where you’ve edited
As FEDs, we are constantly jumping back and fourth between places we’ve previously edited. VIM maintains a “jump list” which is easily navigated by Ctr+O (jumping to previous locations) and Ctr+I (forward). This makes our routine of editing many files simultaneously incredibly painless.
More information on jumps
On a mac? In VIM, you’ve got a proper delete key again
Mac keyboards don’t come with a normal “delete” key - we essentially have a backspace key but it’s labelled delete. Sure, you could reach for funcdelete, but that function key is sure out the the way. Instead, hit x!
Move CSS like a master
Often I’ll need to refactor some CSS and move properties between selectors. With VIM, I can move content from various lines to my cursor position with a simple:
:<linenumber>,<linenumber>m
Common operations like these are made laughably easy with VIM.
Jump to the end or beginning of a line
This is unusually common in my workflow - needing to jump to the end of a line. Perhaps I forgot a semicolon at the end of a CSS property or line of Javascript. To jump to the end of the line, simply hit A and you’re in insert mode at the end of the line. Need to edit at the beginning (not counting tabbing)? Use I.
Edit at the speed of thought
One of the staple concepts of VIM is to prevent needing to reach for your mouse. When I’m in my flow, I never reach for the mouse unless its to interact with a web page I’m working on. Getting good at VIM means your ability to edit and manipulate text nearly approaches how fast you can think of the problem. Because of the concept of text objects, thinking “I want to delete this line” becomes a trivial dd, or deleting a word with daw. As you think about the problem, you more often then not have a easy command to describe to the editor. The ability to get into your flow with VIM is, in my opinion, higher than most other editors.
Easy split windows
Something that completely changed how I developed was learning how to really leverage split windows in VIM. Yes, VIM has split windows, and they’re amazing! Some editors come with this functionality, but it can be cumbersome to use, or difficult to remember to use.
Spits are powerful because we’re often addressing the same item in a number of places. If you’re addressing an element, you’ll often want the HTML file up. If you’re applying styling to it, you’ll want the CSS up, and if you’re applying behaviors, you’ll want the Javascript up as well. Seeing them all at the same time has saved me literally countless headaches in editing. The flow feels very “natural”, not to mention just how awesome your editor will look. Often I’ll have at least 4 splits going at any one time.
A great way to get started is by typing :Vex. This opens a Vertical exploration window. From here you can browse to whatever file you want to, and that file will appear in the split. There’s also the always salacious :Sex command, which will open a horizontal split explorer window.
Vertical Split Windows
More information on splits
More information on the file explorer
Your setup, anywhere
Perhaps one of the most compelling features is the ability to have your customized setup very quickly. I keep my VIM configuration in a GitHub repo, meaning regardless of what machine I’m on, I’m about 2 commands away from having my complete setup ready to go.
…even on remote machines
Front end developers will inevitably work on a remote server at some point. Heck, many of us have local linux boxes in a VM replicating our server environments. You’re going to need an editor, and rather than either fumble around in VIM due to not knowing how to actually make it dance, or using a basic and underpowered editor like nano, getting good at VIM client-side means you’re going to be a master server-side.
Final thoughts
VIM is an amazing editor, and although you may think it’s old, it’s actually more than up to the task for today’s editing. No matter what new editor hits the market, I may try them out to see what innovations are out there, but in the end, I always come back to VIM for all my editing, and I love it.
I use a lot zencoding, so, if you're used with zen-coding try the zenCoding plugin for Vim find it here
If you want to learn more about zen-coding you could read: zen coding vim tutorial
I am looking for a tool to display/track changes in text a little bit like it is done on stackoverflow when a question is edited. Does anybody know of a tool to achieve that?
You may want to use diff for that.
If you can use PHP on your server there's a handy pear package to perform the task you require. Here's an example :
https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-6174867.html
There's actually a actually Javascript implementations outhere as well, not tested though:
http://ejohn.org/projects/javascript-diff-algorithm/
http://aignes.net/
Commercial tool though. I have no idea of a F/OSS alternative.
A copy of my own answer from here.
What about DaisyDiff (Java and PHP vesions available).
Following features are really nice:
Works with badly formed HTML that can be found "in the wild".
The diffing is more specialized in HTML than XML tree differs. Changing part of a text node will not cause the entire node to be changed.
In addition to the default visual diff, HTML source can be diffed coherently.
Provides easy to understand descriptions of the changes.
The default GUI allows easy browsing of the modifications through keyboard shortcuts and links.