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.
Install Visual Studio Code: Official Website
The extension can be installed via the VS Code Extension Manager
.
Extension Manager
with the shortcut ⇧ Shift+⌘ Command+X or via the menu View > Extensions
.Let's Hassel
) or it's slug-name (craftycram.lets-hassel
)Install
button.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 loremipsum text, a basic Node.js workspace and other project files. 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
VS Code
.Command Palette
with the shortcut ⇧ Shift+⌘ Command+P or via the menu View > Command Palette
.Setup Node.js project in this folder
eslint
configuration assistant will start and simplify the configuration for you.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
├── CHANGELOG.md // changelog file
├── package-lock.json // version history of installed Node.js modules
├── package.json // npm configuration file
└── README.md // README file
You can change some of the feature settings in the VS Code settings
under Extensions > Let's Hassel
.
eslint
or if you would like to configure it on your own each time.You can use ⌘ Command+, to open the settings.
1. Setup Node.js project in this folder
This command generates a basic Node.js project workspace. [Details]
This feature automatically generates you a basic Electron.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 main.js
& index.html
, initializes a git repository, installs eslint
and starts its setup assistant. More details on that under Usage
VS Code
.Command Palette
with the shortcut ⇧ Shift+⌘ Command+P or via the menu View > Command Palette
.Setup electron.js project in this folder
eslint
configuration assistant will start and simplify the configuration for you.The created structure will look like this:
.
├── node_modules // installed Node.js modules
├── src
│ ├── main.js // main electron.js file
│ └── index.html // main electron.js window html file
├── .eslintrc.json // eslint config file
├── .gitignore // ignore build output and node_modules
├── .nvmrc // specifies which Node.js version to use
├── CHANGELOG.md // changelog file
├── package-lock.json // version history of installed Node.js modules
├── package.json // npm configuration file
└── README.md // README file
You can change some of the feature settings in the VS Code settings
under Extensions > Let's Hassel
.
eslint
or if you would like to configure it on your own each time.You can use ⌘ Command+, to open the settings.
1. Setup electron.js project in this folder
This command generates a basic electron.js project workspace. [Details]
This feature generates the files needed firebase deployment as well as GitHub actions CI deployment.
1. Setup firebase deployment for your Vue.js project
This command configures the project to deploy with firebase.
This feature generates the files needed for Wifi & SSH access on your RaspberryPi after flashing a new SD card.
You can change some of the generators settings in the VS Code settings
under Extensions > Let's Hassel
.
Country code: The country code of your local wifi.
Workspace check: If this is enabled the directory check will be disabled.
You can use ⌘ Command+, to open the settings.
VS Code
.Command Palette
with the shortcut ⇧ Shift+⌘ Command+P or via the menu View > Command Palette
.Setup RaspberryPi SD Card. (Wifi & SSH config)
1. Setup RaspberryPi SD Card. (Wifi & SSH config)
This command creates the files necessary to connect to a new flashed raspi via wifi and SSH.
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.
Command Palette
with the shortcut ⇧ Shift+⌘ Command+P or via the menu View > Command Palette
.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 a basic website structure consisting of a index.html
and style.css
.
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!
You can use ⌘ Command+, to open the settings.
Command Palette
with the shortcut ⇧ Shift+⌘ Command+P or via the menu View > Command Palette
.1. Create web files. (index.html + style.css)
This command creates a index.html and style.css file linked with each other.
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.
(This used the title config of the web generator settings)
You can use ⌘ Command+, to open the settings.
Command Palette
with the shortcut ⇧ Shift+⌘ Command+P or via the menu View > Command Palette
.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!