How do I setup/use ruby on rails snippets and autocomplete in sublime text 2? - ruby-on-rails

I would appreciate if someone could direct me to a website that shows how to do this..
Can't seem to find anything decent enough via google.
This will be the first time I'm doing this kind of thing with a text editor.. It has got to the stage where typing out things like <%= %> is getting old and slow.
I've got a rails snippet package and also ryan-on-rails package installed. Just confused with how to start using them.
I'm on max osx - snow leopard
Kind regards
Update
This helped me out. http://webtempest.com/sublime-text-2-how-to-create-snippets/ but I still need a little practice.
I have a package "rails" can't remember where I got it but the triggering of snippets is working. I'd just like to find a nice list of the commands rather than have to go to each snippet and look for myself. I can find the by clicking on snippets but isn't there a way I can create a shortcut for that?
Also would like some auto indentation.. and also complete.

I'm puzzled that this isn't part of the default Rails package, but I found this to be just what I was looking for:
https://github.com/eddorre/SublimeERB

Since you're new to Sublime Text, I highly recommend you check out: ST2's Unofficial Documentation. If includes a ton of getting started info plus tons of info for extendibility and plugin development.
Another great "Getting Started" guide can be found here on Nettuts+.
If you're looking a list of your snippets and their associated shortcuts, go to "Tools > Snippets..." from your menu.
To expand <% into <%| %> (where | is the cursor), add the following you to your User-keybindings (Preferences > Keybindings - User):
{
"args": {
"contents": "% $0 %>"
},
"command": "insert_snippet",
"context": [
{
"key": "selector",
"match_all": true,
"operand": "source.ruby",
"operator": "equal"
},
{ "key": "preceding_text", "operator": "regex_match", "operand": ".*<", "match_all": true }
],
"keys": [
"%"
]
}
The latest beta includes improved auto-indentation, so if you don't have that installed, try that out.
As for autocompletion, Sublime Text 2 by default offers autocompletion of words in the current document (plus all of your snippets/completions from packages). However, if you're looking for IDE-like autocompletion, there is the SublimeCodeIntel plugin. I am reluctant to mention it because it has not been updated in months and the bug reports keep flowing in.
Hope that helps.

I use ERB Snippets
https://github.com/matthewrobertson/ERB-Sublime-Snippets
You can install via Sublime Package control
Cmd+Shift+P
Go to Package Control: Install Package.
Type ERB Snippets. Let it roll.
Then you can use tab autocomplete for lots of snippets such as:
print ERB tags = pe which auto completes to <%= %>
if block = if which auto completes to <% if %>...<% end %>

If you are looking for autocomplete suggest, change the auto_complete_selector in Preference like:
"auto_complete_selector": "text, source - comment",

Related

Can't load ACE editor in a firefox addon, but can in chrome

I am using ACE editor in my browser extension. It all works fine in a Chrome/Chromium browser, but when I try the extension in Firefox (latest version), only ace.define and ace.require are available (ace.edit is needed, at least, to initialize).
Here is the part of the manifest (MV2) file involved:
"content_scripts" :
[
{
"matches": ["*://example.com/*"],
"all_frames": true,
"js": [
"ace-min/ace.js",
"myscript.js"
],
"run_at": "document_end"
},
]
What could be done wrong? Both files are being read, but only a part of ace.js seems to be executed. Imagine that myscript.js contains a console.log(ace), to see which functions can I use.
Thanks in advance!
I posted an issue on the ACE's GitHub repository. The response was very quick and polite.
All is explained in this comment: https://github.com/ajaxorg/ace/issues/4898#issuecomment-1217887526
Just a side note, use noconflict ace instead of normal ace. The function you need to change is at the bottom.

Vs Code Small Guide

Whenever i write code in Dart in Vscode It shows me guide about stuff I don't want to see
How can I get rid if this annoying guide
These are called Parameter Hints (and are showing you the parameters for the function you're calling). You can disable them with this VS Code setting:
You can close quick suggestions by editing settings.json. To edit settings.json go to Preferences->Settings page (Shortcut: Cmd + Shift + P and type settings.json)
Then add the following code (or edit if there is 'editor.quickSuggestions' key in the file) to close quick suggestions.
"editor.quickSuggestions": {
"comments": false,
"other": true,
"strings": false
},

VS Code Windows 10: LaTeX Workshop will not compile

On Windows 10, I have MiKTex (as admin) installed and updated. Within VS Code, I have installed the LaTeX Workshop extension, but my document will not compile. I require lualatex, so I have moved that "recipe" to the "first" position in LaTeX Workshop's .json file, but compiling throws the message Recipe terminated with error. Looking at the console shows Undefined control sequence with my document's file path c:\Users\...etc... -- this is relating to the first line of the document [1,1] where I have the typical \documentclass[12pt]{article}.
It seems that the extension isn't able to locate the Path to the LaTeX executables...does this sound right? It is almost like it is looking in my files own directory for the LaTeX classes and packages, etc. In my Windows System Environment Variables, the path to C:\Program Files\MiKTeX 2.9\miktex\bin\x64\ seems to be correctly configured. Oddly, if I try to compile using pdflatex, it does not seem to encounter this specific issue (rather showing the error that I need to use lualatex, which I am trying to do).
Has anyone had this issue, or knows a way to fix it?
1: It might be some problem related to "pdftex vs pdflatex"... Now I have the same but looking for the solution... (Win10; VSCode + Latex Workshop extension; WSL2; TexLive 2020 on Ubuntu 20.04;)
2: I've found something... in: "latex-workshop.latex.tools"
{
"name": "pdflatex",
"command": "pdftex",
"args": [
"-synctex=1",
"-interaction=nonstopmode",
"-file-line-error",
"%DOC%"
],
"env": {}
},
I changed "command": "pdftex" to "command": "pdflatex"
Now it is working.
Make sure you got TeX Live installed. The installation takes some time, but as you've installed it, it should work.

How to add custom code snippets in VSCode?

Is it possible to add custom code snippets in Visual Studio Code? And if so, how? VSCode is based on Atom, so it should be possible.
Hit > shift + command + p and type snippets
Select Preferences: Configure User Snippets
Choose the language type for which you want to add the custom snippet in the vscode inputbox
vscode has comments to explain on how to add a snippet, as described on :> vsdoc or you can follow the next link with a short guide:
Lets say, we want to open custom snippets for the language GO. Then we can do:
Hit > command + p
Type: go.json + enter And you land on the custom snippet page
Snippets are defined in a JSON format and stored in a per-user (languageId).json file. For example, Markdown snippets go in a markdown.json file.
Using tools:
Snippet Generator extension (recommended)
Online snippet generator
Option 1 - Use the Snippet Generator extension.
It supports code to JSON conversion with optional scope support and space to \t conversion.
Demo:
Option 2 - Another extension is snippet-creator (deprecated).
After installing it, all you have to do is to :
Select the code that you want to make a snippet.
Right-click on it and select "Command Palette"(or Ctrl+Shift+P).
Write "Create Snippet".
Choose the type of files needed to be watched to trigger your snippet shortcut.
Choose a snippet shortcut.
Choose a snippet name.
Option 3 - check this website. you can generate snippets for vs code, sublime text, and atom.
Once snippet being generated on this site. Go to the respective IDE's snippet file and paste the same. For example for a JS snippet in VS code go to File->preference->user snippet then it opens javascript.json file then paste the snippet code from an above site inside this and we are good to go.
As of version 0.10.6 you can add custom snippets. Read the documentation on Creating your Own Snippets.
You can find/create custom snippets by placing the json file in C:\Users\<yourUserName>\AppData\Roaming\Code\User\snippets.
For example, a custom javascript snippets would be in a \snippets\javascript.json
You can also publish you snippets which is a really neat feature as well. John Papa created a nice angular + typescript snippet you can download as an extension in the marketplace.
Here is an example snippet taken for the documentation on a javascript for loop:
"For Loop": {
"prefix": "for",
"body": [
"for (var ${index} = 0; ${index} < ${array}.length; ${index}++) {",
"\tvar ${element} = ${array}[${index}];",
"\t$0",
"}"
],
"description": "For Loop"
},
Where
For Loop is the snippet name
prefix defines a prefix used in the IntelliSense drop down. In this case for.
body is the snippet content.
Possible variables are:
$1, $2 for tab stops
${id} and ${id:label} and ${1:label} for variables
Variables with the same id are connected.
description is the description used in the
IntelliSense drop down
You can check out this video for a quick short tutorial
https://youtu.be/g1ouTcFxQSU
Go to File --> Preferences --> User Snippets. Select your preferred language.
Now type the following code to make a for loop snippet:
"Create for loop":{
"prefix": "for",
"body":[
"for(int i = 0; i < 10; i++)",
"{",
" //code goes here",
"}"
],
"description": "Creates a for loop"
}
You are done.
Type "for" in the editor and use the first prediction.
SHORTCUT
install snippet-creator extension (now deprecated).
Highlight the code that you need to make snippet.
press ctrl+shift+P and type "Create snippet" on the command palette and
press ENTER.
select language for which you want to create snippet(eg:-CPP), then type
snippet name, type snippet shortcut and then type snippet description.
You are now good to go.
Type the snippet shortcut in the editor that you entered in step 4, and select the prediction (if no prediction comes press ctrl+space) that comes first.
Hope this helps :)
Note: goto File->Preferences->User Snippets. Then select the language in which youcreated the snippet. You will find the snippet there.
You can add custom scripts, go to File --> Preferences --> User Snippets. Select your preferred language.
If you choose Javascript you can see default custom script for console.log(' '); like this:
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
},
There's a VSCode Plugin called: snippet-creator (now deprecated).
After installing it , all you have to do is to:
Select the code that you want to make it a snippet.
Right click on it and select "Command Palette"(or Ctrl+Shift+P).
Write "Create Snippet".
Choose type of files needed to be watched to trigger your snippet shortcut.
Choose a snippet shortcut.
Choose a snippet name.
That's All.
Note : if you want to edit your snippets , you will find them in [fileType].json
Example : Ctrl+P , then select "javascript.json"
I tried by adding snippets in javascriptreact.json but it didn't worked for me.
I tried adding snippets into global scope, and it's working like charm.
FILE --> Preferences --> User snippets
here select New Global Snippets File, give name javascriptreact.code-snippets.
For other languages you can name like [your_longuage].code-snippets
This is an undocumented feature as of now but is coming soon. There is a folder you can add them to and they will appear, but it may change (its undocumented for a reason).
Best advice is to add this to the uservoice site and wait til its final. But it is coming.
On MacOS:
Open the VSCode
Code -> Preferences -> User Snippets
Search for "python" (or any language)
Write your snippet like this:
{
"Write pdb": {
"prefix": "pdb",
"body": [
"import pdb; pdb.set_trace()",
"$2"
],
"description": "Write pdb.set_trace() to debug Python scripts"
}
}
Save the file with command + S.
VSCode introduce this in version 0.5, see here.
Snippet syntax follows the TextMate snippet syntax and can write in User Preferences.
If you'd rather not deal with writing your snippets in JSON, check out Snipster. It lets you write snippets as you would write the code itself - not having to wrap each line in quotes, escape characters, add meta information, etc.
It also lets you write once, publish anywhere. So you can use your snippet in VS Code, Atom, and Sublime, plus more editors in the future.
This may not be a real answer (as some have answered above), but if you're interested in creating custom code snippets for other people, you can create extensions using yeoman and npm (which by default comes along with NodeJS) . NOTE: This is only for creating snippets for other's systems. But it also works for you too! Except you need JS code for whole thing.
You can add custom scripts, go to File --> Preferences --> User Snippets. Select your preferred language.
Like mine code is go, I do it as below:
"channel code": {
"prefix": "make_",
"body": [
"${1:variable} := make(chan ${2:type}, ${3:channel_length})",
"$4"
]
}
explanation: $1 will take your tabs & to give hints what are those tabs values, we make it like ${1:some_variable} which could give us hints what are those
I hope, it helps!

Sublime Automatic Build Selector

My current custom LaTeX sublime build goes:
{
"path":"/bin:/usr/texbin:/usr/bin",
"cmd": ["sh", "-c", "pdflatex main.tex && open main.pdf"],
"file_regex": "^[ ]*File \"(...*?)\", line ([0-9]*)",
"selector": ["source.latex"],
}
And it's working great when I select it manually. However, I'm switching back and forth between python scripts and my latex code, so I want to set the build system to "automatic" and let Sublime know that it needs to run LaTeX for .tex files. I tried source.tex, source.latex, source.LaTeX... I think I'm barking up the wrong tree.
edit: I found out that by pressing Cmd+Alt+P I get some information about what the Syntax Highlighter is aware of. It seems to suggest that the right selector would be text.tex.latex... but it doesn't work.
Have you tried just using "selector": "text.tex.latex", without the square brackets? Worked for me.

Resources