Visual Studio Code extension for saving and reusing my own custom code snippets / boilerplate? - visual-studio-code

I am looking for VSC extensions that will let me save my own code snippets and reuse them in any future projects with shortcuts like when I type html I am able to pick an option that generates whole document example that I can then continue modifying.
Ideally it should also have an option to export all custom settings so I can move them to another machine or back them up if I need to format the system.
I realized this was one of my major efficiency issues when I kept copying code from old projects to be reused in my latest work. I did check the extension search in VSC but so far only found such that already include existing snippet shortcuts.

I found 1 viable method so far with native VSC but post if you know of an even better way.
Press Ctrl + P and > then type Preferences: Configure user snippets and then selecting a language. To generate json fast I used: https://snippet-generator.app/
It saves snippets in AppData\Roaming\Code\User\snippets folder so that is good for backuping or exporting.
To reorder snippets to have custom ones at the top of the suggestions box for faster use go to: Workspace Settings > Text Editor > Suggestions > Snippet Suggestions and set it to top.

Related

WebStorm formatting settings - port to another editor

Is there any way to get another editor, like VSCode, to format code ( JavaScript in my case, if it matters ) like the WebStorm IDE formats code by default? I'm not familiar with that IDE, but I'm hoping that it uses a config of some sort that can maybe be exported and imported in another editor. I tried looking for one, but couldn't find anything.
The core problem, if it matters, is that all of our team members use WS to write code and they use the built in formatter, so if I use another one it creates inconsistencies and long commits when editing already written files. As you are probably guessing by now, I would like to use another editor, because I find IDE's bloated and slow.
I don't know if there is a way to import Webstorm formatting rules into VS Code, but I think there is another solution:
I remember in one of the projects i worked on, we used a linter which also auto-formatted code. The advantage is that Webstorm and VSCode can pick pick the linter rules automatically, and then you have same formatting on both.
The downside is that you would need to agree with the team on what does rule will be and then configure them on the linter.

Fuzzy file opening in vscode

I am exploring vscode after using atom for a long while. One of the things I'm missing is an equivalent of the lovely package advanced-open-file. Is there something similar to this in vscode?
I found the advanced-new-file extension, but it is only helpful when it comes to new files. I would like to be able to quickly open files from all over my local files (not only the workspace).
Edit: I found the option of workbench.action.quickOpen; but it doesn't allow opening files from the whole file system.
Sorry, but currently the answer is no. The problem is that input box doesn't provide a way to listen to key events:
GitHub issue,
so even the extensions can't do that currently. Here's the comment from advanced-new-file extension creator:
Because VSCode extensions don't yet have the ability to do type-ahead autocomplete within the text input box (See https://github.com/Microsoft/vscode/issues/426), we work around this limitation and provide autocomplete using a two-step workflow of selecting existing path, then providing new filename/path relative to the selection.
The good news is that there is a new API addressing this issue, but it's currently in 'proposed' state and can't be used for published extensions.
One workaround could be typing code -r some/path in integrated terminal and using 'tab' for autocomplete.
The Fuzzy search extension seems to work for me.
It adds a new action to the command palette which allows you to search for files in the current project and open them.

How to edit existing VS Code Snippets

Is there a way to remove or edit some of the default code snippets in Visual Studio CODE ?
For example when i type req+TAB i need require not requestAnimationFrame
The extensions snippets can be found inside each snippet directory below:
(if there are snippets in the extension)
Mac/Linux: $HOME/.vscode/extensions/
Windows: %USERPROFILE%\.vscode\extensions/
Select the extension you want to modify and then dive into the javascript.json file in snippets/ directory in there, and change whatever you like.
Just remember that if/when you choose to download and update the extension someday, all your personal modifications will get overwritten/replaced out with the updated version of the file.
(unless of course you squirrel away your changes outside of the extension's directory...)
Edit/Aside:
Looking closely at all the copied editions already present in this directory, it appears that at least some of the extension updates keep the former version around. If this is the case, when you update an extension when a new version is released, you wouldn't need to worry about storing a copy of your modified file somewhere else; returning a file to active duty might just be as easy as a copy-paste from the old into the appropriate, newer, higher numbered directory.
Resources/citations/acknowledgements:
Thanks to here for helping initially pointing me towards the relevant directory.
The suggestion item requestAnimationFrame is coming from the JavaScript language service. It's not coming from the snippets.
However, you can define your own snippets and tell Visual Studio Code to show the snippets first. How to do it:
Go to File -> Preferences -> User Snippets and select JavaScript in order to edit snippets for that language
Add this entry to the opened file javascript.json and save it
"require": {
"prefix": "req",
"body": [
"require"
],
"description": "Add 'require'"
}
Add the following line to your preferred settings.json (user or workspace settings) and save it
"editor.snippetSuggestions": "top"
Now you get your self defined require suggestion in first place as soon as you type req in a .js file.
On my Windows10 machine the log and other default javascript snippets can be found in :
C:\Users\$USER\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\javascript\snippets\javascript.json
On my Windows installation the default/built-in JavaScript snippets are located in
C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\javascript\snippets\javascript.json
I renamed that snippet to "logx" (requires admin privileges to modify the file) and restarted vsCode and now have just my user "log" snippet.
There are some threads about this on the issue tracker -
https://github.com/Microsoft/vscode/issues/10565
https://github.com/Microsoft/vscode/issues/48315
Attention everyone!
This is now possible in the latest vscode. Solution here: https://github.com/microsoft/vscode/issues/10565#issuecomment-721832613
That solution tells you how to disable any snippet (including built-in or extension snippets). While this is technically not editing the snippet, disabling the snippet and then creating your own user snippet accomplishes the same exact goal. Yay!
I found mine at ~/.config/Code/User/snippets
If you want to create a global snippet, create a file named snippet_name.code-snippets
If you want a language specific snippet, create it like php.json
Hiding default VSCode snippets is easy:
you can hide specific snippets from showing in IntelliSense (completion list) by selecting the Hide from IntelliSense button to the right of snippet items in the Insert Snippet command dropdown.
https://code.visualstudio.com/docs/editor/userdefinedsnippets#_can-i-remove-snippets-from-intellisense

Is there a way to create templates for text files in Eclipse?

In Eclipse, I really enjoy being able to create templates for things I commonly write in Java and XML. While there is some room for improvement, templates have proven to be quite the time saver. Today I was documenting some notes in the release notes. We have a specific format that we write said release notes in. I thought it would be handy to write a small template so that I could easily insert most of the boiler plate text when I amend the notes. So I dug around the eclipse settings and didn't see anything for plain text files. I googled around and also didn't see anything.
So is what I'm wanting to do possible in Eclipse? Is there a plugin I would need to enable such a feature?
I assume the closest you can get is using Snippets
Add the view by clicking Window -> Show View -> Snippets. In that view, right-click and select Customizeto create custom snippets. You can now add those snippets in your textfile by double-clicking them.
Maybe there is also some shortcut feature I didn't find yet...

Storing code snippets in eclipse

I'm a recent semi-convert to Eclipse after 20 years of using vi and gvim. One of the things I miss about gvim is that I could cut a bunch of different snippets of code into named buffers, and paste them at will when doing something like repeating a common idiom. For instance I'd have it so "ap would paste
DatabaseHandle handle = null;
try
{
handle = DatabaseConnectionPool.newHandle();
and then "bp would paste
handle.commit();
}
finally
{
handle.rollback();
DatabaseConnectionPool.returnHandle(handle);
}
And I could repeat both of them over and over in the course of a day. In an answer to another question, somebody mentioned that you could "manage code snippets" in Eclipse, but didn't mention how. So now I'm asking: how do you manage code snippets in Eclipse?
You might want to store those two snippets into a code template, as explained in this tutorial.
And do not forget about the possibility to quickly execute any kind of java code snippets in a scrapbook (not exactly what you want, but it can come in handy at times)
Newtopian adds (in the comments)
In fact templates become much more powerful by adding variables and tabstops within, so your example above would become dbHandle ctrl+space. It would copy snippets from both parts and place your cursor right in the middle.
Eclipse also offers something very similar to the templates feature described by VonC called (would you believe) snippets. Window > Show view > Snippets.
To add a new snippet category: Right click in the Snippets window and click Customize...
Click New > New Category. Enter a category name if necessary (e.g. "Java"). Click Apply.
With your chosen category selected, click New > New Item. Enter your snippet.
To use a snippet, put the cursor where you want to insert the snippet, then double click on a snippet in the Snippets window.
I ran into the Snip2Code plugin recently.
It did the job, and I can collect and search snippets in a quick way.
Well a picture worths a thousand words, what about this one?
The question is old but the link of the answere is older ;)
Here is a nice tutorial:
http://www.dansshorts.com/post/creating-snippets-in-eclipse
I have used snippets in some IDEs, like Dreamweaver and Homesite, an old Coldfusion IDE. I also use a lot of snippets in MySQL Workbench - where i type a lot of SQL, very handy there.
I am now using Eclipse Java EE IDE for Web Developers Version Indigo Release and found the snippets panel in Window|Show View|Other...|General|Snippets. I was able to manipulate it and figure out how to add the code I wanted as snippets and how to use it efficiently.
Use Eclipse Snipmatch (Part of Eclipse for Java Developers Package).
Works very well for Java code snippets but also works for any other language like HTML, ABABP, PHP etc.
You can convert any code fragment from your editor directly to a code template. Highlight the code you'd like to convert to a snippet, context menu "create snippet", complete the form and done.
snippets can be shared via Git repositories with your team members
Manual:
https://www.eclipse.org/recommenders/manual/#snipmatch
Installation:
https://marketplace.eclipse.org/content/snipmatch