Skip to content

Latest commit

 

History

History
339 lines (311 loc) · 10.2 KB

README.md

File metadata and controls

339 lines (311 loc) · 10.2 KB
Raw

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

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]

Install ⚡

To install extensions, run your bash,zsh,fish and await

$ chmod +x vscode-extensions.sh
$ ./vscode-extensions.sh

████████╗██╗ ██████╗          ██╗ ██████╗ ██████╗ ███████╗
╚══██╔══╝██║██╔═══██╗         ██║██╔═══██╗██╔══██╗██╔════╝
   ██║   ██║██║   ██║         ██║██║   ██║██████╔╝███████╗
   ██║   ██║██║   ██║    ██   ██║██║   ██║██╔══██╗╚════██║
   ██║   ██║╚██████╔╝    ╚█████╔╝╚██████╔╝██████╔╝███████║
   ╚═╝   ╚═╝ ╚═════╝      ╚════╝  ╚═════╝ ╚═════╝ ╚══════╝

    [*] Author: Tio Jobs
    [*] YouTube: https://www.youtube.com/@tiojobs
    [*] GitHub: https://github.com/icarojobs
    [*] Twitter: https://twitter.com/tio_jobs
    [*] E-mail: [email protected]

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
        }
    ]
}