Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/icarojobs/vscode-useful-extensions

VS CODE - The useful and necessary plugins and extensions
https://github.com/icarojobs/vscode-useful-extensions

Last synced: 3 months ago
JSON representation

VS CODE - The useful and necessary plugins and extensions

Awesome Lists containing this project

README 

        
# vscode-useful-extensions by Tio Jobs



This is my personal settings to turn the VSCODE ide extremely useful.



For more contents, please, watch my videos on youtube:

[Tio Jobs Channel](https://youtube.com/c/TioJobs/join)



### EXTENSIONS (core)

- IntelliJ Keybindings [Keisuke Kato]

- Makefile Tools [Microsoft]

- IntelliSense for CSS class names in HTML [Zignd]

- SonarLint [SonarSource]

- Docker [Microsoft]

- Reveal [smulyono]

- Prettier - Code formatter [Prettier]

- EditorConfig for VS Code [EditorConfig]

- Auto Rename Tag [Jun Han]

- Auto Close Tag [Jun Han]

- Apache Conf [mrmlnc]

- YAML [Red Hat]

- DotENV [mikestead]

- REST Client [Huachao Mao]

- Settings Sync [Shan Khan]

- indent-rainbow [oderwat]

- GitLens - Git supercharged [GitKraken]

- Git Graph [mhutchie]

- Git History [Don Jayamanne]

- Run on Save [pucelle]

- Live Share [Microsoft]

- Live Server [Ritwick Dey]

- Remote - SSH [Microsoft]

- WSL [Microsoft]

- Better Comments [Aaron Bond]

- Tailwind CSS IntelliSense [Tailwind Labs]

- Headwind [Ryan Heibourn]

- Test Explorer UI [Holger Benl]

- Bookmarks [Alessandro Fragnani]

- HTML CSS Support [ecmel]

- colorize [kamikillerto]

- Markdown All in One [Yu Zhang]

- Markdown PDF [yzane]

- Markdownlint [David Anson]

- TODO Highlight [Wayou Liu]

- Todo Tree [Gruntfuggly]

- XML Tools [Josh Johnson]

- Reload [natqe]

- GitHub Pull Requests [GitHub]

- Code Spell Checker [Street Side Software]



### JAVASCRIPT - TYPESCRIPT - NODEJS - REACT

- Javascript Snippets [charalampos karypidis]

- ESLint [Microsoft]

- ES7 + React/Redux/React-Native snippets [dsznajder]

- React Native Tools [Microsoft]

- vscode-styled-components [Styled Components]

- NativeBase VS Code Extension [NativeBase]



### PHP - LARAVEL - VUE

- PHP Extension Pack [Xdebug]

- PHP Intelephense [Ben Mewburn]

- PHP Namespace Resolver [Mehedi Hassan]

- php cs fixer [junstyle]

- PHP Tools [DEVSENSE]

- Laravel Blade Snippets [Winnie Lin]

- Laravel Snippets [Winnie Lin]

- Laravel Artisan [Ryan Naddy]

- Laravel Extra Intellisense [amir]

- Laravel goto view [codingyu]

- laravel-goto-components [naoray]

- Laravel Blade formatter [Shuhei Hayashibara] (needs .bladeformatterrc on root)

- PHP Parameter Hint [Robert]

- Laravel Blade Spacer [Austen Cameron]

- Vue Language Features (Volar) [Vue]

- Twig [whatwedo]

- PHPUnit Test Explorer [Recca0102]

- Better Pest [Miguel Pedrafita]

- Pest Snippets [dansysanalyst]

- PHP Mess Detector [Ecodes.io]



### PYTHON

- Python [microsoft]

- Pylance [microsoft]

- Django [Baptiste Darthenay]

- Pytest Runner for Visual Studio Code [Ernesto Arbitrio]

- Pytest IntelliSense [Cameron Maske]

- Coverage Gutters [ryanluker]

- isort [microsoft]

- Even Better TOML [tamasfe]

- Black Formatter [microsoft]



### THEME

- Darcula IntelliJ Theme [Minh Nguyen]

- vscode-icons [VSCode Icons Team]



### MY PERSONAL VS CODE SETTINGS

Make .vscode directory on your root project with settings.json file. Insert the following settings in settings.json file:



```

{

  "window.zoomLevel": 1.5,

  "workbench.tree.indent": 24,

  "files.autoSaveDelay": 3000,

  "editor.mouseWheelZoom": true,

  "editor.minimap.enabled": false,

  "editor.tabSize": 4,

  "editor.formatOnSave": true,

  "editor.wordSeparators": "`~!@#%^&*()-=+[{]}\\|;:'\",.<>/?",

  "editor.linkedEditing": true,

  "editor.bracketPairColorization.enabled": true,

  "editor.guides.bracketPairs": true,

  "editor.codeActionsOnSave": {

    "source.fixAll.eslint": true,

    "source.fixAll.tslint": true,

    "source.fixAll.stylelint": true

  },

  "workbench.iconTheme": "vscode-icons",

  "workbench.editor.showTabs": false,

  "workbench.editor.limit.enabled": true,

  "workbench.editor.limit.value": 2,

  "workbench.sideBar.location": "right",

  "workbench.startupEditor": "none",

  "workbench.statusBar.visible": true,

  "workbench.colorCustomizations": {

    "tree.indentGuidesStroke": "#008070"

  },

  "intelephense.environment.phpVersion": "8.1.0",

  "php.validate.executablePath": "/usr/bin/php",

  "gitlens.statusBar.enabled": false,

  "gitlens.hovers.enabled": false,

  "gitlens.blame.format": "${author|10} ${date}",

  "gitlens.blame.highlight.locations": ["gutter", "line", "overview"],

  "gitlens.blame.avatars": false,

  "gitlens.blame.compact": false,

  "gitlens.defaultDateFormat": "DD/MM/YYYY",

  "gitlens.defaultDateShortFormat": "DD/MM/YYYY",

  "gitlens.blame.heatmap.enabled": false,

  "gitlens.codeLens.enabled": false,

  "files.autoSave": "afterDelay",

  "javascript.preferences.quoteStyle": "single",

  "typescript.preferences.quoteStyle": "single",

  "explorer.confirmDelete": true,

  "explorer.compactFolders": false,

  "vsicons.dontShowNewVersionMessage": true,

  "prettier.printWidth": 120,

  "typescript.updateImportsOnFileMove.enabled": "always",

  "javascript.updateImportsOnFileMove.enabled": "always",

  "files.trimTrailingWhitespace": true,

  "yaml.schemas": {},

  "yaml.customTags": [],

  "blade.format.enable": true,

  "[json]": {

    "editor.quickSuggestions": {

      "strings": true

    },

    "gitlens.codeLens.scopes": ["document"],

    "editor.defaultFormatter": "vscode.json-language-features",

    "editor.suggest.insertMode": "replace"

  },

  "[typescript]": {

    "editor.defaultFormatter": "vscode.typescript-language-features"

  },

  "[blade]": {

    "editor.autoClosingBrackets": "always",

    "editor.defaultFormatter": "shufo.vscode-blade-formatter"

  },

  "runOnSave.commands": [

    {

      "match": ".*\\.php$",

      "command": "editor.action.formatDocument",

      "runIn": "vscode"

    }

  ],

  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],

  "eslint.workingDirectories": [

    {

      "directory": "."

    } // should point to the directory containing eslint config

  ],

  "phpmd.rules": "cleancode,codesize,controversial,design,unusedcode,naming",

  "phpmd.verbose": true

}

```



### USEFUL KEYBOARD SHORTCUTS

Here are a few new keyboard shortcuts that you might wanna learn to make your life easier.



```

Toggle Terminal Panel => Control + J

New Terminal => Control + Shift + '

Toggle Explorer => ALT + 1

Quick Search => Shift+Shift (2 times fast)

Add Break Point => Control + F8

Enable Debug => F5

Open command Palette => Ctrl + Shift + P OR F1 key

Open Settings => Ctrl + ,

Select all occurrences of Find match => Ctrl + Shift + L

Add selection/cursor to next match => Alt + J

Jump to matching bracket => Ctrl + Shift + \

Tinker Smart Action (PHPStorm) => Ctrl + Shift + Alt + A

```



### IDE Helper:



Install Laravel IDE Helper to improve your code completion!



```

composer require --dev barryvdh/laravel-ide-helper --ignore-platform-reqs

```



- set in your app/Providers/AppServiceProvider.php:



```

public function register()

{

    if ($this->app->isLocal()) {

        $this->app->register(\Barryvdh\LaravelIdeHelper\IdeHelperServiceProvider::class);

    }

    // ...

}

```



- run php artisan clear-compiled

- set in your composer.json (scripts):



```

"scripts": {

    "post-update-cmd": [

    "Illuminate\\Foundation\\ComposerScripts::postUpdate",

    "@php artisan ide-helper:generate",

    "@php artisan ide-helper:meta"

    ]

},

```



### run composer and laravel commands:



```

composer update --ignore-platform-reqs



php artisan vendor:publish --provider="Barryvdh\LaravelIdeHelper\IdeHelperServiceProvider" --tag=config

```

### XDebug Setup on Linux + VSCODE (native PHP)

```

{

  "version": "0.2.0",

  "configurations": [

    {

      "name": "Listen for Xdebug",

      "type": "php",

      "request": "launch",

      "port": 9003

    },

    {

      "name": "Launch currently open script",

      "type": "php",

      "request": "launch",

      "program": "${file}",

      "cwd": "${fileDirname}",

      "port": 0,

      "runtimeArgs": ["-dxdebug.start_with_request=yes"],

      "env": {

        "XDEBUG_MODE": "debug,develop",

        "XDEBUG_CONFIG": "client_port=${port}"

      }

    },

    {

      "name": "Launch Built-in web server",

      "type": "php",

      "request": "launch",

      "runtimeArgs": ["-dxdebug.mode=debug", "-dxdebug.start_with_request=yes", "-S", "localhost:0"],

      "program": "",

      "cwd": "${workspaceRoot}",

      "port": 9000,

      "serverReadyAction": {

        "pattern": "Development Server \\(http://localhost:([0-9]+)\\) started",

        "uriFormat": "http://localhost:%s",

        "action": "openExternally"

      }

    }

  ]

}

```



### XDebug Setup with Docker/Sail on VS CODE



Make sure the launch.json file exists in .vscode root directory:



```

{

    "version": "0.2.0",

    "configurations": [

        {

            "name": "Xdebug for Project sail-debug",

            "type": "php",

            "request": "launch",

            "hostname": "0.0.0.0",

            "port": 9003,

            "pathMappings": {

                "/var/www/html": "${workspaceFolder}"

            },

            "log": true,

            "xdebugSettings": {

                "max_children": 10000,

                "max_data": 10000,

                "show_hidden": 1

            }

        },

        {

            "name": "Launch currently open script",

            "type": "php",

            "request": "launch",

            "program": "${file}",

            "cwd": "${fileDirname}",

            "port": 9000

        }

    ]

}

```