What's wrong with my Atom Editor Snippet? - atom-editor

I'm getting to know Atom. I tried to make a snippet with the following format:
'text.html.basic':
'Comment Class':
'prefix': '<.'
'body': '<!-- .$1 -->'
But when I type <. then the tab key, nothing happens. Why not?

Atom currently only supports alphanumeric characters for snippet prefixes, see the open issue at https://github.com/atom/autocomplete-snippets/issues/56
Try using a prefix such as "comment" and it should work. I unfortunately don't know a better workaround.

Related

VSCode not commenting css.liquid lines correctly

I've been having a problem when trying to comment out a line in a css.liquid file with the VScode shortcut (CTRL+/).
Whenever I do this it puts {%\s*# in front of the line and doesn't comment out the code. I tried disabling all extensions but it's not helping. I haven't touched any settings. When I switch to CSS or Liquid it will comment out fine, but Liquid CSS doesn't work.
Does anybody recognize this issue?
===== This ended up being a problem with the extension itself, it has since been fixed!
I see this issue has been reported lately: Incorrect comment blocks in Liquid files with this extension enabled.
I see this in the liquid css language configuration file:
"comments": {
"lineComment": "{%\\s*#",
"blockComment": [ "/*", "*/" ]
I don't know what the lineComment value is supposed to be but I have never seen a regex value there in other language configuration files - so it may be a mistake.
I built an extension which may be able to help until the language configuration file is fixed: Custom Language Properties.
Install it.
Run the command Custom Language Properies: Check for new language extensions.
Make this setting in your settings.json:
"custom-language-properties": {
"liquid-css.comments.lineComment": "",
}
If this doesn't work immediately, try a reload of vscode.
This basically sets the lineComment's to null and so the blockComment will be used instead. I am not familiar with Liquid comment styles so let me know if that is not how line comments are supposed to work. Demo:

How to quickly create <div> classes in VSCode

Generally new to web design and watching some tutorials on creating some backend for a project, getting really tired of writing out the manually, I see youtubers do .classname and then the class with the div appears, but for some reason it isn't working for me? Any help would be appreciated.
Also, would it be easier to switch to Sublime, my buddies think that it is the way to go.
Cheers.
Go to settings
Go to emmet under the Extensions section.
Click on 'Edit in settings.json'.
Write the following inside the 'emmet.includeLanguages' tag. Otherwise, paste the whole statement.
"emmet.includeLanguages": { "javascript":"javascriptreact" }
Save the settings.json file.
Those videos are likely using emmet. VS Code includes built-in support for emmet completions in html files. For example, typing .classname in an html file will trigger an emmet suggestion that expands to <div class="classname"></div> when you accept it
If you do not see this working:
Make sure the document is in the html language mode
Try manually triggering suggestions after .classname using ctrl+space
Make sure you have not disabled Emmet
I tried everything written in the answers but it wouldnt work, I had to do the following;
go to settings in the bottom left, search for 'emmet'
scroll down to and tick:
'Trigger expansions on Tab'
then it works by typing .divClassName + Tab
Check out this Cheat Sheet for VSC:
Cheat sheet for VSC
Ensure that VScode recognises your file as HTML5 or CSS file. In my case I had emmet enabled, but while I could get emmet abbreviation in a CSS file, they wouldn't work in an HTML file. The issue was that I also had Django template extension installed and the file had Django template code as well, hence VScode considered the file as Django template file, not HTML. You can check this the status bar at the bottom of VScode. Once I changed the file from Django template to HTML by clicking on Django Template in the VScode status bar, emmet started working.
The above answers didn't help me because VS code already came with Emmet installed, but I was missing the information on how to actually trigger it.
For an html element
Type the element e.g. div, h1, whatever, then press tab to complete it
For a class
Type the class name beginning with a dot then press tab to complete it.
For example type .myclass and hit tab and you'll get <div class="myclass"></div>
Note: if your class has spaces, use a dot in place of the space (e.g. for "my great class", you should type ".my.great.class" and hit tab)
Source
This information is from here
Tried mentioned thing from emmet vs code document
go-to .vscode >> settings.json
add line "emmet.triggerExpansionOnTab": true
it worked for me for reference : Emmet in visual studio code

Atom Editor Snippets

I have a simple snippet:
'.source.js':
'Console log':
'prefix': '>log'
'body': 'console.log($1)'
It worked as expected for a while, perhaps I installed a package or something, but now when I hit tab after typing >log the right brace doesn't disappear, giving me >console.log();.
How would one remedy this situation?

Sublime Text 3 Emmet triggering conflict?

I just started using Sublime Text 3 beta. Love it so much.
And I love using Emmet while coding.
But there's one thing annoys me that whenever I am editing CSS for example, code suggest interrupts so my trigger key(which is Tab key) won't work. (I have to hit Enter key instead).
Does anyone know how to fix this problem?
I found a solution
Changing a line in key binding file from:
{ "keys": ["enter"], "command": "commit_completion", "context":
to:
{ "keys": ["tab"], "command": "commit_completion", "context":
that worked for me.
I go for this for the time being. I still want other suggestion though.
Thanx.
The third version is not yet stable (only beta). You can report the problem here
Emmet parses abbreviations in real time but Sublime Text does not provide API to correctly override native snippets. So there are might be some quirks when expanding abbreviations by Tab key.
You may want to disable disable_tab_abbreviations_on_auto_complete preference to make Tab key exclusive for Emmet: https://github.com/sergeche/emmet-sublime/blob/master/Preferences.sublime-settings#L29
But you will not be able to use native snippets in HTML and CSS anymore.

Displaying code blocks in a WordPress tech blog

I am trying to display some HTML code in my blog post. Is there any way to show that HTML code as an element of that post?
You should go through the documentation about
Writing Code in Your Posts.
Whether you write plugins or hacks for WordPress, or you want to add bits and pieces of code about your own WordPress site or other programming code like HTML, CSS, PHP or JavaScript, putting code in your post that actually looks like code, but doesn't behave like code, is a frequent challenge for bloggers.
It's a nice article on how to display code in post/page of WordPress.
Super easy, and that WordPress Codex page Ram Sharma shared has great material to follow.
Put all your code within the <code></code> element and simply make sure to escape every opening less than symbol "<" and greater than symbol ">" though you might find yourself escaping other things:
Example:
<code><?php echo $var; ?></code>
But in place of the greater than & less than symbol I replaced them with the appropriate HTML character entities "& g t ;" & "& l t ;" no spaces.
Check out an example of writing code in your posts over at my Web Development & Design Blog, no plugin! Pure code!
Building off of Giancarlo Colfer's answer, you can use the <code></code> tags along with the <pre></pre> tags.
Example:
<code>
<pre>
<!-- code goes here -->
</pre>
</code>
Your code will be output exactly as entered.
Great answers so far, I just wanted to add a tip.
If you are blogging about code you have already written; use a text editor (I use Notepad++) with a built in find and replace (Ctrl+H) function.
Find: "<"
Replace: "& l t ;"
then
Find: ">"
Replace: "& g t ;"
As before, remove the spaces from the replace string.
Finally - remember to undo the find and replace and/or don't click save.

Resources