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.
- Requirements
- Installation
- Features
- Troubleshooting
- Release Notes
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.
- 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 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
- 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
├── 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.
- Eslintconf:
This decides wether you would like to use the extensions standard configuration for
eslintor 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
- 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 electron.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
│ ├── 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.
- Eslintconf:
This decides wether you would like to use the extensions standard configuration for
eslintor 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.
- Run the command.
- Open the firebase console and create a new project.
- Copy the project id and provide it to the input popup in VS-Code.
- Wait for your files being created.
- Login to your firebase account using the command in the terminal to recieve the firebase CI token.
- Copy the token and open your repository on GitHub.
- Go into the repository settings > Secrets and create a new secret called "FIREBASE_HOSTING".
- Provide your token as the secrets value.
- Push your changes to the master branch. Your App should be automatically deployed.
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.
- Flash your SD card with a RaspberryPiOS image and open the boot partition in
VS Code. - Open the
Command Palettewith the shortcut ⇧ Shift+⌘ Command+P or via the menuView > Command Palette. - Enter
Setup RaspberryPi SD Card. (Wifi & SSH config) - A input box will show up. Enter the wifi name you want the Pi to connect to.
- A input box will show up. Enter the corresponding wifi password.
- The files will be generated and automatically saved to your sd.
- Your sd card is ready to go.
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.
- 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 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!
- Title:
The title of your HTML document, visible in the browser.
(Also used by the WSS generator)
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 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.
- 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!