A extension which allows you to hustle (hassel) more efficient by adding snippets for a bunch of programming languages. Used in the programming classes at HfG Schwäbisch Gmünd.
If the links aren't working properly try viewing the docs on GitHub. If the problem is still there you can create an issue.
You need Visual Studio Code installed to use this extension.
If you want to use the Node.js workspace functionality you also need jq installed. The extension supports installing it itself. [Installation (Tools)]
Install Visual Studio Code: Official Website
The extension can be installed via the VS Code Extension Manager.
- Open the
Extension Managerwith the shortcut ⇧ Shift+⌘ Command+X or via the menuView > Extensions. - On the top-left highlight the search-bar.
- Enter the extensions name (
Let's Hassel) or it's slug-name (craftycram.lets-hassel) - Click on the green
Installbutton.
Read the official documentation for more detailed help: VS Code Docs - Extensions
Once you created a file of one of the supported types or languages you can auto-generate different code blocks by typing !and the shortname which you can find in these docs below.
You can also use this extension to automatically generate a basic Node.js workspace. Instructions on how that feature can be used can be found in these docs as well.
1. Require
Shortcut: !req
This generates the import/require line for Node.js applications.
const = require('');
const <TABSTOP> = require('<TABSTOP>');<FINALPOS>
You can use ⇥ Tab to jump from
<TABSTOP>to<TABSTOP>and to the<FINALPOS>
2. Else-If
Shortcut: !elif
This generates the else-if structure.
else if (<TABSTOP>) {
<FINALPOS>
}
You can use ⇥ Tab to jump from
<TABSTOP>to<TABSTOP>and to the<FINALPOS>
3. Index.js
Shortcut: !index
This generates the index require structure for Node.js applications.
If you have a folder with a similar named .js file you can just create a index.js and use this shortcut to auto-complete the file. It uses the file-/folder-name to generate it, so be aware that they are the same.
const ${TM_DIRECTORY/^.+\\/(.*)$/$1/} = require('./${TM_DIRECTORY/^.+\\/(.*)$/$1/}');
module.exports = ${TM_DIRECTORY/^.+\\/(.*)$/$1/};
1. HTML basic structure
Shortcut: !html
This generates the basic HTML structure.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><TABSTOP></title>
</head>
<body>
<FINALPOS>
</body>
</html>
You can use ⇥ Tab to jump from
<TABSTOP>to<TABSTOP>and to the<FINALPOS>
1. SVG basic structure
Shortcut: !svg
This generates the basic SVG structure.
<svg width="<TABSTOP>" height="<TABSTOP>" xmlns="http://www.w3.org/2000/svg">
<FINALPOS>
</svg>
You can use ⇥ Tab to jump from
<TABSTOP>to<TABSTOP>and to the<FINALPOS>
This feature automatically generates you a basic Node.js workspace structure. It helps you to save time by not having to create all the files and folders each time you start a new project.
It creates the main index.js, initializes a git repository, installs eslint and starts its setup assistant. More details on that under Usage
Before you can use this functionality you need to have jd installed. It allows the extension to edit and process JSON files from the terminal.
To install it you can use the Command Palette which can be accessed by ⇧ Shift+⌘ Command+P.
There you enter
Install required tools (MacOS) if you are using Mac or
Install required tools (Debian) if you are on a Linux system.
Or you can install it manually by following the developers official guide on their website.
- Create a new project folder and open it in
VS Code. - Open the
Command Palettewith the shortcut ⇧ Shift+⌘ Command+P or via the menuView > Command Palette. - Enter
Setup Node.js project in this folder - A input box will show up. Enter which Node.js version you want to use.
- A input box will show up. Enter your name or the one that should be shown as the author.
- In the terminal the installation/initialisation progress will start.
- Once it's finished the
eslintconfiguration assistant will start and simplify the configuration for you. - Your workspace is ready to go.
The created structure will look like this:
.
├── node_modules // installed Node.js modules
├── src
│ └── index.js // main index.js
├── .eslintrc.json // eslint config file
├── .gitignore // ignore build output and node_modules
├── .nvmrc // specifies which Node.js version to use
├── package-lock.json // version history of installed Node.js modules
└── package.json // npm configuration file
1. Install required tools (MacOS)
This command installs jd on your MacOS-based system.
2. Install required tools (Debian)
This command installs jd on your Debian-based system.
3. Setup Node.js project in this folder
This command generates a basic Node.js project workspace. [Details]
You can use this feature to fill your placeholders with random text. You can either create a custom amount of words, sentences or paragraphs.
You can change some of the generators settings in the VS Code settings under Extensions > Let's Hassel.
-
Format:
This changes the format of the text between normal text or HTML formatted text. -
Minimum words in a sentence:
The minimal amount of words used in a sentence. -
Maximum words in a sentence:
The maximal amount of words in a sentence. -
Minimum sentences in a paragraph:
The minimal amount of sentences in a paragraph. -
Maximum sentences in a paragraph:
The maximal amount of sentences in a paragraph.
You can use ⌘ Command+, to open the settings.
There are three different commands which generate different amount of text.
- Move your cursor to the position where the text should be generated or select the area you want to replace.
- Open the
Command Palettewith the shortcut ⇧ Shift+⌘ Command+P or via the menuView > Command Palette. - Type one of the available commands. [Commands]
- Enter the amount of words, sentences or paragraphs in the popup window.
- Confirm with ⏎ Return.
1. Generate a specified amount of words
This command creates a random LoremIpsum text with a given amount of words.
2. Generate a specified amount of sentences
This command creates a random LoremIpsum text with a given amount of sentences.
3. Generate a specified amount of paragraphs
This command creates a random LoremIpsum text with a given amount of paragraphs.
You can use this feature to create the file structure used in the lessons of one of our lecturers.
You can change some of the generators settings in the VS Code settings under Extensions > Let's Hassel.
Make sure that you configured it properly before first use!
-
Filename:
This specifies how the file will be named. -
Filenumber:
The number added to the end of the file. -
Title: The title of your HTML document, visible in the browser.
You can use ⌘ Command+, to open the settings.
- Open VS Code in a folder.
- Open the
Command Palettewith the shortcut ⇧ Shift+⌘ Command+P or via the menuView > Command Palette. - Type one of the available commands. [Commands]
- Confirm with ⏎ Return.
1. Create WSS files. (HTML & CSS)
This command creates a HTML and CCS file linked with each other with the nomenclature of WSS.
Make sure that your file is in the correct language mode. Usually if you safe your file in the correct filetype VS Code automatically set's the correct language mode. If it doesn't you can also set it yourself in the bottom-right corner or by entering Change Language Mode in the Command Palette.
Read the official documentation for more detailed help: VS Code Docs - Language Mode
Enjoy!