bash-ide-from-vs-code

Instructions and extra files on how to set up VS Code as Bash/Shell scripts IDE.

1. Install VS Code

You know how to do it, right? Riiiight..?

Anyway, after installing/already having one, I recommend you to create separate profile and call it something fancy, for example, Bash IDE. You can still install all the extensions in any or even all of your profiles, but be aware that most of the time when you will work on some, for example, Java project, you don't want to decrease your VS Code performance by running extra 10+ extensions you don't need right now. Decide what is more comfy for you here. For me - it is the separate profile.

2. Install language server

Arch Linux:

sudo pacman --sync --refresh --needed bash-language-server

3. Install and configure main extensions

Below you will see descriptions and reasons to install each extension. Also, the JSON provided is the VS Code settings I used to configure each extension. If some settings are not provided, that means I left them with default.

Also, if you have suggestions and advices, feel free to add them via issues or pull requests!

3.1. Bash IDE

This is main extension which gives us language server.

// Follow redirection operators with a space (more readable)
"bashIde.shfmt.spaceRedirects": true,
// Increase number of files to analyze (analyze them all to not miss any reference to show)
"bashIde.backgroundAnalysisMaxFiles": 9999,
// Decrease logging level
"bashIde.logLevel": "warning",
// Disable "shellcheck" from Bash IDE - it is not working properly for some reason - and to not download anything in system - use "ShellCheck" extension instead with bundled command
"bashIde.shellcheckPath": "",
// Disable "shfmt" from Bash IDE - to not download anything in system - use "shell-format" extension instead with bundled command
"bashIde.shfmt.path": "",

3.2. File Watcher

This extension allow us to execute custom scripts on file changes. We use it to update all links to the file and from the file to other files.

// Run custom script on file rename, which will update all links to this files from other files, and all links from this file to others
"filewatcher.commands": [
    {
        "event": "onFileRename",
        "match": ".*\\.sh",
        "cmd": "/usr/bin/bash_ide_from_vs_code_update_sources \"${workspaceRoot}\" \"${fileOld}\" \"${file}\""
    },
    {
        "event": "onFileChange",
        "match": ".*\\.sh",
        "cmd": "/usr/bin/bash_ide_from_vs_code_sort_sources \"${file}\""
    }
],

I wrote scripts, which will do all the renames, and put them in this repository. You can install them by running:

sudo wget -O /usr/bin/bash_ide_from_vs_code_update_sources https://raw.githubusercontent.com/Nikolai2038/bash-ide-from-vs-code/refs/heads/main/bash_ide_from_vs_code_update_sources.sh && \
sudo chmod +x /usr/bin/bash_ide_from_vs_code_update_sources && \
sudo wget -O /usr/bin/bash_ide_from_vs_code_sort_sources https://raw.githubusercontent.com/Nikolai2038/bash-ide-from-vs-code/refs/heads/main/bash_ide_from_vs_code_sort_sources.sh && \
sudo chmod +x /usr/bin/bash_ide_from_vs_code_sort_sources

On how the scripts works - you can check by yourself. They:

Replace links in source commands both in moved file and in files, where moved file is referenced;
Sort source commands in changed files.

If you found a bug or have a suggestion on how to optimize it, you will be the awesome man to let me know something that will make it better!

3.3. Path Autocomplete

This extension will autocomplete relative paths to scripts when you entering them in source, find, etc.

3.4. ShellCheck

This extension will lint all the problems in your code. This can be also done with Bash IDE extension, but when I used it, it was not working properly - in my case some shell variable was declared as not declared, but it was - in another file, and sourced. With the ShellCheck extension this problem does not replicate.

// Decrease logging level
"shellcheck.logLevel": "warn",
// Parse external files in "source" command
"shellcheck.customArgs": [
    "--external-sources"
],

3.5. shell-format

This extension will autoformat code. You can play with flags as you want, I leave here the ones I use. You can also disable format on save if you want or when you are working on already written scripts and don't want all file to change.

// Flags for formatting:
// -s,  --simplify  simplify the code
// -i,  --indent uint       0 for tabs (default), >0 for number of spaces
// -bn, --binary-next-line  binary ops like && and | may start a line
// -ci, --case-indent       switch cases will be indented
// -sr, --space-redirects   redirect operators will be followed by a space
// -kp, --keep-padding      keep column alignment paddings
// -fn, --func-next-line    function opening braces are placed on a separate line
"shellformat.flag": "--simplify --indent 2 --binary-next-line --case-indent --space-redirects",
// Autoformat
"[shellscript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "foxundermoon.shell-format"
},

3.6. TypeLens

This will show useful links above function declarations. You can localize them for your language. I use English:

"typelens.noreferences": "No references found",
"typelens.plural": "{0} references",
"typelens.singular": "{0} reference",

Other customizations:

// Do not include function itself in it's usages
"typelens.excludeself": true,
// Do not grey out unused functions
"typelens.unusedcolor": "",

3.7. Shell Script Command Completion

This extension is awesome - it provides suggestions for shell commands when you write them in your script.

3.7. Bash Debug

To debug Bash scripts.

3.8. Code Runner

Run shell script with the button.

3.9. shellman

Useful shell snippets.

3.10. Shebang Snippets

More snippets.

3.11. Error Lens

To show error messages inline. I disable showing errors for all lines except current - found that more useful (otherwise, for example, after some missed quotation mark, errors will fill all the lines to the end of the file):

"errorLens.followCursor": "activeLine",

4. (Optional) Install and configure extra extensions

4.1. GIT

GitLens — Git supercharged - It will bring more views to play with. I don't use paid version. For git log use Git Graph extension below. Config:

"gitlens.codeLens.enabled": false,
"gitlens.currentLine.enabled": false,
"gitlens.showWelcomeOnInstall": false,
"gitlens.statusBar.enabled": false,
"gitlens.telemetry.enabled": false,

Git Graph - Git log. Config I use:

"git-graph.commitDetailsView.location": "Docked to Bottom",
"git-graph.date.format": "ISO Date & Time",
"git-graph.dialog.addTag.pushToRemote": true,
"git-graph.dialog.addTag.type": "Lightweight",
"git-graph.dialog.cherryPick.recordOrigin": true,
"git-graph.referenceLabels.combineLocalAndRemoteBranchLabels": false,

Gitignore Ultimate - .gitignore file autocompletion;
Git History - Views with history of changes in line, file;
git-autoconfig - Useful, if you have several accounts to commit from (work, for example). Otherwise, not needed. Extra setting:
```
// Run only on workspace start, not in background every 5 seconds
"git-autoconfig.queryInterval": 999999999,
```

Extra git settings I use:

"git.confirmSync": false,
"git.autofetch": true,
"git.enableSmartCommit": true,
"diffEditor.ignoreTrimWhitespace": false,
// Don't find repositories automatically (because it bother, when working not in repositories)
"git.autoRepositoryDetection": false,
// Always open GIT repository in parent folders
"git.openRepositoryInParentFolders": "always",
"git.replaceTagsWhenPull": true,

4.2. Markdown

Markdown All in One - Autocompletion;
markdownlint - Lint syntax errors in your Markdown file.

4.3. Useful

Format in context menus - To right click folder and format all files in it! For the first launch, I recommend disabling format on save, because it will double the commands executing;
Open Folder Context Menus for VS Code;
Presentation Mode - Switch to presentation mode to show-off for someone;
Project Manager - Huge help. I recommend storing all your repositories in one/several folders, and then define them in projectManager.git.baseFolders setting;
Statusbar Debugger - Add debugger controls in statusbar. Very useful. Also, I moved initial buttons just in front off launch button;

TODO Highlight - Custom highlight styles for todo's. You can play with it. Config I use:

"todohighlight.isEnable": true,
"todohighlight.isCaseSensitive": false,
// Do not highlight explicit words
"todohighlight.keywordsPattern": "",
"todohighlight.exclude": [
    "**/node_modules/**",
    "**/bower_components/**",
    "**/dist/**",
    "**/build/**",
    "**/.vscode/**",
    "**/.github/**",
    "**/_output/**",
    "**/*.min.*",
    "**/*.map",
    "**/.next/**"
],
"todohighlight.maxFilesForSearch": 99999,
"todohighlight.toggleURI": false,
"todohighlight.keywords": [
    {
        "text": "DEBUG:",
        "color": "green",
        "border": "1px solid green",
        "backgroundColor": "rgba(0,0,0,.2)",
        "isWholeLine": true,
        "overviewRulerColor": "green",
    },
    {
        "text": "TODO:",
        "color": "orange",
        "border": "1px solid orange",
        "backgroundColor": "rgba(0,0,0,.2)",
        "isWholeLine": true,
        "overviewRulerColor": "orange"
    },
    {
        "text": "BUG:",
        "color": "orange",
        "border": "1px solid orange",
        "backgroundColor": "rgba(0,0,0,.2)",
        "isWholeLine": true,
        "overviewRulerColor": "orange"
    },
    {
        "text": "FIXME:",
        "color": "red",
        "border": "1px solid red",
        "backgroundColor": "rgba(0,0,0,.2)",
        "isWholeLine": true,
        "overviewRulerColor": "red"
    },
],

Todo Tree - Show all todo's in your workspace. I find it quite useful in list mode - simple. Config I use:

// Disable highlight, because we do it via "TODO HighLight" extension
"todo-tree.highlights.enabled": false,
"todo-tree.general.tags": [
    "DEBUG",
    "TODO",
    "BUG",
    "FIXME",
],
"todo-tree.tree.flat": true,

Code Spell Checker - Check spelling in code. This one is for English. You can install extensions ... - Code Spell Checker for other languages too.

4.4. Syntax highlight for some configs

Since I use created Bash profile as default when opening folders on Linux, it is quite useful to have it configured to highlight syntax in several config files - Nginx, Apache, Vim, etc. For that reason, I also installed:

DotENV - For .env files with environment variables.
YAML - For YAML (docker-compose configurations);
Even Better TOML - For TOML (gitlab-runner configurations);
XML, Auto Close Tag, Auto Rename Tag - For XML;
VimL - For vim configuration in .vimrc;
Systemd Helper - For SystemD unit files configurations;
Apache Conf - For Apache web server configurations;
nginx.conf hint - For Nginx web server configurations;
Lua - For Lua language (used by some Linux windows managers);
Rainbow CSV - For CSV and TSV files;
hunspell - For .aff and .dic dictionary files.

4.5. Fancy

Coloured Status Bar Problems - Add colors to icons in statusbar when there are more than 0 warnings/errors;

indent-rainbow - Highlight wrong indentation:

"indentRainbow.colors": [
    // Transparent color - to disable it completely.
    // I done it this way, because empty array will disable all the colors.
    // This way, it will show only errors - color for them defined below.
    "rgba(255,255,255,0)"
],
"indentRainbow.errorColor": "rgba(128,32,32,0.5)",

Trailing Spaces - highlight trailing spaces:

"trailing-spaces.backgroundColor": "rgba(128,32,32,0.5)",
"trailing-spaces.borderColor": "rgba(255,100,100,0)",
"trailing-spaces.includeEmptyLines": true,
"trailing-spaces.trimOnSave": true,

Unfancy file icons - Icons pack I use.

Name		Name	Last commit message	Last commit date
Latest commit History 10 Commits
LICENSE		LICENSE
README.md		README.md
bash_ide_from_vs_code_sort_sources.sh		bash_ide_from_vs_code_sort_sources.sh
bash_ide_from_vs_code_update_sources.sh		bash_ide_from_vs_code_update_sources.sh

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

bash-ide-from-vs-code

1. Install VS Code

2. Install language server

3. Install and configure main extensions

3.1. Bash IDE

3.2. File Watcher

3.3. Path Autocomplete

3.4. ShellCheck

3.5. shell-format

3.6. TypeLens

3.7. Shell Script Command Completion

3.7. Bash Debug

3.8. Code Runner

3.9. shellman

3.10. Shebang Snippets

3.11. Error Lens

4. (Optional) Install and configure extra extensions

4.1. GIT

4.2. Markdown

4.3. Useful

4.4. Syntax highlight for some configs

4.5. Fancy

4.6. Remote

About

Releases 2

Languages

License

Nikolai2038/bash-ide-from-vs-code

Folders and files

Latest commit

History

Repository files navigation

bash-ide-from-vs-code

1. Install VS Code

2. Install language server

3. Install and configure main extensions

3.1. Bash IDE

3.2. File Watcher

3.3. Path Autocomplete

3.4. ShellCheck

3.5. shell-format

3.6. TypeLens

3.7. Shell Script Command Completion

3.7. Bash Debug

3.8. Code Runner

3.9. shellman

3.10. Shebang Snippets

3.11. Error Lens

4. (Optional) Install and configure extra extensions

4.1. GIT

4.2. Markdown

4.3. Useful

4.4. Syntax highlight for some configs

4.5. Fancy

4.6. Remote

About

Topics

Resources

License

Stars

Watchers

Forks

Releases 2

Languages