LARA PACK
Lara Pack is a Official VS Code Laravel Development Environment Extension Pack By IQBAL HASAN ! Lara Pack is a collection of popular extensions that can help write, test and debug Laravel applications in Visual Studio Code.Lara Pack contains all the necessary extensions of html, css, js, vue, node, axios, php and laravel.
Getting started
You can install this awesome theme through the Visual Studio Code Marketplace.
Prerequisites
This theme is compatible for VS Code version 1.56.0+
Installation
Launch Quick Open:
Paste the following command in terminal and press Enter:
code --install-extension iqbalhasandev.lara-pack
Extensions Included
By installing Lara-Pack, the following extensions are installed:
- Automatically add closing tag when you type in the closing bracket of the opening tag
- After closing tag is inserted, the cursor is between the opening and closing tag
- Set the tag list that would not be auto closed
- Automatically close self-closing tag
- Support auto close tag as Sublime Text 3
- Use Keyboard Shortcut or Command Palette to add close tag manually
Usage
After typing in the closing bracket of the opening tag, the closing tag will be inserted automatically.
- When you rename one HTML/XML tag, automatically rename the paired HTML/XML tag
Usage
- Axios Snippets support in .vue, .js, .html , .ts.
When you rename one HTML/XML tag, automatically rename the paired HTML/XML tag
Composer.json Editor & IntelliSense
The composer.json editor is extended with smart actions, code lenses, tooltips, and IntelliSense to autocomplete packages and versions from packagist.org.
This extension adds formatting to CSS.
- Open a CSS file in the editor (status bar should show CSS as mode)
- Use command Format Document
This tool, although currently usable to an extent, is by no means completed and still requires a lot of work to be finalized. If this freaks you out, please stick around until a later, more stable version is released. Thanks!
Usage
- Works both for indented and single-line CSS styles. To activate it, just Ctrl+Shift+P into the workbench command window and type "Auto Prefix"
VSCode .env syntax highlighting
The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn't provide one the extension looks for a global install version. If you haven't installed ESLint either locally or globally do so by running npm install eslint in the workspace folder for a local install or npm install -g eslint for a global install.
On new folders you might also need to create a .eslintrc configuration file. You can do this by either using the VS Code command Create ESLint configuration or by running the eslint command in a terminal. If you have installed ESLint globally (see above) then run eslint --init in a terminal. If you have installed ESLint locally then run .\node_modules.bin\eslint --init under Windows and ./node_modules/.bin/eslint --init under Linux and Mac.
GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
Visual Studio Code CSS Intellisense for HTML
- HTML id and class attribute completion for Visual Studio Code.
Features
- HTML id and class attribute completion.
- Supports linked and embedded style sheets.
- Supports template inheritance.
- Supports additional style sheets.
- Supports other HTML like languages.
- Validates CSS selectors on demand.
Usage
You can view a list of id and class attribute suggestions via ctrl + space.
- This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size.
- Features
- Calculates the size of imports and requires. Currently supports:
- Default importing: import Func from 'utils';
- Entire content importing: import * as Utils from 'utils';
- Selective importing: import {Func} from 'utils';
- Selective importing with alias: import {orig as alias} from 'utils';
- Submodule importing: import Func from 'utils/Func';
- Require: const Func = require('utils').Func;
- Supports both Javascript and Typescript
- This extension highlights matching opening and/or closing tags. Optionally it also shows path to tag in the status bar. Even though VSCode has some basic tag matching, it's just that - basic. This extension will try to match tags anywhere: from tag attributes, inside of strings, any files, while also providing extensive styling options to customize how tags are highlighted.
Features
- A Visual Studio Code extension that provides CSS class name completion for the HTML class attribute based on the definitions found in your workspace or external files referenced through the link element.
Features
- Gives you autocompletion for CSS class definitions that can be found in your workspace (defined in CSS files or the in the file types listed in the Supported Language Modes section);
- Supports external stylesheets referenced through link elements in HTML files;
- Command to manually re-cache the class definitions used in the autocompletion;
- User Settings to override which folders and files should be considered or excluded from the caching process.
An opinionated Blade file formatter for VSCode. Marketplace page is here.
You can also format programmatically with the same syntax using the blade-formatter that this extension relies on.
Features
- Automatically indent markup inside directives
- Automatically add spacing to blade template markers
- PHP 8 support (null safe operator, named arguments) 🐘
- PSR-2 support (format inside directives)
- Automatically sort Tailwind CSS classes with respect of tailwind.config.js
Screencast
- This extension provides Laravel routes, views and ... autocomplete for VSCode.
Autocomplete
- Route names and route parameters
- Views and variables
- Configs
- Translations and translation parameters
- Laravel mix function
- Validation rules
- View sections and stacks
- Env
- Route Middlewares
- Asset
- Model Attributes (Beta!)
- Blade directives
How to use
How to use
- Minify your js, css and html files to save transmit bandwidth. Calls each of the minifiers directly, allowing settings to be passed:
- JS: uglify-js v2.7.4
- CSS: clean-css v3.4.21 * HTML: html-minifier v3.2.2
- Run the file minifier with F1 Minify.
- Visual Studio Code plugin that autocompletes npm modules in import statements.
This package extends VS Code with fast code completion, advanced editor features, code fixes, code lenses, code generators, debugger, built-in development web server, test explorer, tests debugger, and workspace-wide code analysis.
- PHP Namespace Resolver can import and expand your class. You can also sort your imported classes by line length or in alphabetical order.
- Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
Visual Studio Code Remote - SSH
The Remote - SSH extension lets you use any remote machine with a SSH server as your development environment. This can greatly simplify development and troubleshooting in a wide variety of situations. You can:
- Develop on the same operating system you deploy to or use larger, faster, or more specialized hardware than your local machine.
- Quickly swap between different, remote development environments and safely make updates without worrying about impacting your local machine.
- Access an existing development environment from multiple machines or locations.
- Debug an application running somewhere else such as a customer site or in the cloud.
No source code needs to be on your local machine to gain these benefits since the extension runs commands and other extensions directly on the remote machine. You can open any folder on the remote machine and work with it just as you would if the folder were on your own machine.
Visual Studio Code Remote - SSH: Editing Configuration Files
The Remote - SSH extension lets you use any remote machine with a SSH server as your development environment.
This extension complements the Remote - SSH extension with syntax colorization, keyword intellisense, and simple snippets when editing SSH configuration files.
If you already have an extension that provides this functionality, you can disable this extension.
Visual Studio Code Remote Explorer
The Remote - SSH and Remote - Tunnels extensions let you use any remote machine as your development environment.
This extension complements the Remote - SSH and Remote Tunnels extensions by enabling the Remote Explorer view that shows a list of remote machines available to connect to.
- Create snippets quickly from selected code blocks.
- Automate the creation of snippets with this extension. Simply save code blocks as snippet.
Features
- Highlight syntax for several text files.
- Open the file under the current cursor through the right-click menu "Open File".
- Simple folding and outline function.
- Add codelens for Makefile to make running makefile target easily.
- Highlight current line.
- Highlight multiple selected words in all active editors.
- Filter and focus on lines based on custom regular expressions
Vue Language Features is a language support extension built for Vue, Vitepress and petite-vue. this is based on @vue/reactivity to calculate everything on-demand, to implement native TypeScript language service level performance.
Usage
- Start command palette (with Ctrl+Shift+P or F1) and start typing Add gitignore
Wraps your selection in HTML tags. Can wrap inline selections and selections that span multiple lines (works with both single selections and multiple selections at once).
To use, select one or many chunks of code and press "Alt + W" ("Option + W" for Mac).
How to Use It
- Select one or more blocks of text or strings of text.
- Press Alt + W or Option + W for Mac.
- Type the tag name you want.
Copyright © 2021 IQBAL HASAN
