Visual studio code extensions for php. Best plugins for VS Code
Let's talk about Code
- . My dear readers asked me to tell you about the extensions that I use for development. This is what we will do now. 
VSC Download Link: https://code.visualstudio.com/ Our VSC will be a five-horned laser-shooting unicorn - after we equip it with the most useful extensions which I use every day. Oh, and if you're not already using the amazing VSC editor, there's a link below the picture above to the official website where you can download it. 
Material Theme
Material Theme
The most epic theme for Visual Studio Code:
https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme Auto Import
Automatically finds, parses and completes method and event names for everyone available files. Supports Typescript and TSX.
https://marketplace.visualstudio.com/items?itemName=steoates.autoimport Import Cost
This extension will display the size of the imported package in the editor in one line with the corresponding method. The extension uses Webpack with babili-webpack-plugin to detect the imported object and estimate its size.
https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost Indent-Rainbow
A simple extension that makes indentation more readable.
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow IntelliSense for CSS class names in HTML
A VSCode extension that automatically completes the CSS class name for the HTML class attribute based on definitions found in your workspace or external files referenced by the link element.
https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion SVG Viewer
An easy way to preview SVG.
https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer Prettier - Code formatter
Can't live without it — VSCode package for JavaScript/TypeScript/CSS formatting using Prettier.
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode React Native Tools
Hints, debugging and built-in commands for React Native.
https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native Sublime Text Keymap and Settings Importer
https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings This extension allows you to use hotkeys in VSCode Sublime Text 3. Try to test it by opening the console with the keyboard shortcut: cmd ⌘ + P - Mac ctrl + P - Windows 
In this console you can quickly navigate to files, and also if you add a > symbol in front search bar, you can search for actions such as switching the built-in terminal, installing an extension, and so on. A very convenient thing for those of us who are used to ST3. ? npm Intellisense
A VSCode plugin that automatically completes npm module names in imports.
https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense lit-html
Adds syntax highlighting and support HTML markup inside JavaScript strings and TypeScript, as used in lit-html and other frameworks.
https://marketplace.visualstudio.com/items?itemName=bierner.lit-html highlight-matching-tag
This extension is designed to highlight paired opening or closing tags — functionality that is missing in VSCode, but which should be built into the editor out of the box.
https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag GitLens - Git supercharged
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens This extension reboots Visual Studio Code's built-in Git capabilities. It provides clear information about the authorship of changes in Git, and also makes it easier to navigate through repositories and allows you to track the history of changes to files or branches, use code comparison commands, and much more. Git Project Manager
Git Project Manager (GPM) is Microsoft extension VSCode, which allows you to open a new window based on a git repository directly from VSCode.
https://marketplace.visualstudio.com/items?itemName=felipecaputo.git-project-manager Git History
View git logs and file change history and compare branches or commits.
https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory File Utilities
A convenient way to create, duplicate, move, rename and delete files and directories.
https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils Bracket Pair Colorizer
Customizable extension for coloring paired brackets. Extremely useful when working with a large number of callbacks.
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer Color Highlight
This extension highlights the CSS/web colors found in your document.
https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight CSS Peek
Going to CSS properties of identifiers (id) and classes directly from HTML files. Supports switching between files and quick transition from one to another.
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek Debugger for Chrome
A tool for debugging JavaScript code or any other code in the Chrome browser.
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome Quokka.js
Executes JavaScript code in the console in parallel with how you write it. (Useful for quick demos).
https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode Trailing Spaces
Instantly highlights and removes trailing spaces.
https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces#user-content-installation TypeScript Hero
https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero This extension will be useful for anyone who writes in TypeScript and wants VSC to organize imports for it. WakaTime
Metrics, insights and time tracking automatically generated based on statistics of your programming work.
https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime Vetur
Vue support for VSCode
https://marketplace.visualstudio.com/items?itemName=octref.vetur Code Runner
Run the code snippet or whole file in several languages at once.
Thank you for reading this article! Follow the Twitter link for more VSCode extensions. Do you know any other useful plugins that are not mentioned here? Please write them in the comments❤ https://twitter.com/wesbos/status/907347014823923714 Translation of the article: “✨ Code Time is an open-source plugin source code, which provides metrics right in the code editor.
After installing the extension, you will be prompted to log into the control panel. If inside the code editor you press command + shift + P, a window will open in which you can enter Code Time, and then choose between displaying the data in the code editor or in the browser.
Inside the browser, the information will look like this:
It's more colorful inside the browser:
Code Time is useful if you need to know exactly or are just curious how much time you spend writing code.
One Dark Pro
One Dark Pro one of the most popular and frequently downloaded themes for Visual Studio Code.
In this example you can see that we have icons for directories such as client and server, and also for files such as .eslintrc .gitignore And package.json.
One Dark Pro supported in React, Angular, Redux and many different frameworks and libraries, providing different directory icons for components, utilities, styles, as well as Reducers, Actions and Stores.
Bracket Pair Colorizer
This extension allows you to match brackets with colors. This is useful when you have deeply nested objects or functions, as shown here:
Color Highlight
Color Highlight shows a visual representation of any color code. For example, if you enter RGB, RGBa, hexadecimal or any other color code, you can see the color as in this example:
Path Intelligence
Path Intellisense is a plugin that automatically completes filenames.
This is useful for importing components into React because you don't have to manually enter the path to the file you're looking for.
ES7 React/Redux/GraphQL/React-Native snippets
The next extension is ES7 React/Redux/GraphQL/React-Native snippets. Long name, but will save you a lot of time, especially if you use it in React.
This extension provides JavaScript and React/Redux snippets in ES7 with the functionality of the Babel plugin for VS Code.
Right in the code editor you can click command + shift + P and then ES7 Snippet Search, you will see a long list short commands, which can be run to produce longer code snippets.
With this extension, you can easily find a command for, for example, a piece of a functional component. You run commands by typing them in the editor and pressing enter. It's simple!
GitLens - Git supercharged
GitLens extends the Git capabilities built into Visual Studio Code. Helps you identify the author of code at a glance with Git-blame and code lens annotations, easily navigate and explore Git repositories, gain valuable insights using diff commands, and much more. Clicking on a line of code will show you who edited it, when it was edited, and in what commit.
Text editors created on the basis of web technologies are experiencing a real boom. Atom, VS Code, Brackets, like the monsters of rock, are gaining popularity among web developers (wait, what year is it on the calendar now for the “popular monsters of rock”? 🙂 - Ed.). People switch to them both from IDEs and simply from native editors. The reason is extremely simple: repositories are teeming with useful plugins, and anyone can create the missing ones on their own, using purely web technologies.
The number of extensions in official repositories is constantly growing, and so that you don’t get lost in them, we have prepared for you a list of the most popular plugins that simplify web development.
To the author's taste
Your humble servant used all the editors listed and eventually settled on VS Code. There are several reasons for this, but the main one is performance. Microsoft did a great job and, despite the late release (VS Code appeared on the scene last), managed to gather a huge community around itself. This has had a positive impact on the plugins: some of them, in my opinion, are head and shoulders above the Atom alternatives. In this regard, the names of extensions specifically for VS Code will appear in the text of the review. A link to an approximate functionality option for Atom will be given below. Don't be surprised if you copy the name of the plugin and search the Atom repository and find nothing. Use links from the description.
Reasons for popularity
Editors built on web technologies have approximately the same problems. One of the main ones is performance. The developers are working on the speed of the editors, but let's be honest - this problem is unlikely to be solved 100%. Native solutions are still superior in performance, and this is worth considering when choosing an editor.
Well, okay, the performance of native solutions is unrivaled. Why then did the newly created “lightweight” editors win so many hearts of developers? The main argument in favor is the technology stack. What does it mean to develop a plugin for some Sublime or Notepad? ? That's right, we'll have to deal with C, Python (any other programming language can be used here), SDK editor and other things not needed for the main job.
What web developer would agree to this feat? He has enough worries and technologies of his own (a real revolution of solutions is taking place in the frontend). So it turned out that the ecosystem of plugins for web developers among native editors has always suffered from a lack of specialized solutions.
The idea of creating editors based on web technologies for masters of these same technologies effectively solved the problem of a poor ecosystem of third-party modules. Third-party web developers quickly jumped on the bandwagon and began creating the bells and whistles they needed. The results are easy to follow - the official repositories are filled with plugins for a wide variety of tasks. Creating new plugins has become easier: you no longer need to learn a foreign programming language, JavaScript is quite enough.
Unfortunately, the ease of improving the editor's functionality comes at the cost of performance and resources. Lightweight editors often require more system resources and are not ready to compete with native ones in terms of speed. During testing, Atom with a gentlemanly set of extensions managed to overtake WebStorm in memory consumption.
Snippets
Plugins-snippets - separate class extensions for editors. They are wildly popular, and there is an individual offer in the repositories for almost every modern framework or library. Snippets save time. Do you need to describe a class template? No problem, enter a couple of characters and get several lines ready code. There is no point in analyzing snippet plugins in detail - there are too many of them. Here are some links to plugin snippets for popular technologies. You will find the missing ones yourself.
VS Code:
Atom:
Wrapper for HTML
When describing page layout, you constantly have to wrap blocks, that is, nest one block inside another. I wrote the block markup, and then realized that for ease of styling it is better to wrap it in additional block. It’s easy to do: write the opening tag at the very beginning, scroll through the block to the end and add a closing tag. There is only one problem - on large blocks this is inconvenient to do. There is every chance of placing the “closer” in the wrong place and breaking the markings. A similar problem appears when styling individual pieces of text. Try to quickly insert numerous opening and closing tags without going crazy. Plugins will help you cope with difficulties htmltagWrap And Atom wrap in tag. With their help, the solution comes down to selecting a piece of code/line and pressing a combination of hot keys.
- VS Code: htmltagwrap
- Atom: Atom wrap in tag
Getting used to hotkeys
When switching to new editor/IDE you always face the same problem - you need to learn new hotkeys. I just got used to certain combinations, and then bam - and everything is different. You begin to spend more time on familiar actions than usual, and once again you wonder whether it is advisable to switch to something new. I’m sure that developers who started their careers 10–15 years ago have repeatedly encountered this, so they will definitely appreciate the power of plugins with key bindings for popular editors. The point is simple: you get used to the Visual Studio hotkey layout - download the corresponding plugin, and the new editor begins to respond to the usual commands.
VS Code:
Atom:
Autocomplete for files
By default, none of the editors provide auto-completion of file names when they are connected. This is often the cause of errors. You have to remember the full path to the file location. If the project is more complex than Hello world, then the files are grouped into several directories, and you will have to use the services of a file manager to specify the path. Not very convenient. It’s easier to enable autocomplete using the AutoFileName and autocomplete+ plugins. Then all you have to do is type the first letters of the file/directory name, after which the plugin will offer options for substitution.
- VS Code: AutoFileName
- Atom: autocomplete+ paths suggestions
Linters
The modern development process is unthinkable without automation. If something can be automated and transferred to tools, it is worth doing. There is nowhere in the frontend without all kinds of linters, so when working on your next project you should immediately take care of connecting solutions like ESLint, HTMLHint, CSSLint,<твой_линтер>. Linters control the style of code writing and, in case of discrepancies with the config, will immediately point out errors.
Linters are especially useful in team development, when the chances of getting “mixed” code increase significantly. Need examples? Please! There is a constant debate among JS developers about the choice of quotes. Some are adherents of single ones, others - double ones, and still others support the idea of reverse ones. Linters will help achieve uniformity and promptly notify a developer who has gone astray.
Continuation is available only to members
Option 1. Join the “site” community to read all materials on the site
Membership in the community within the specified period will give you access to ALL Hacker materials, increase your personal cumulative discount and allow you to accumulate a professional Xakep Score rating!
The main editor I use to write code is Visual Studio Code (VSCode for short). Before that, I worked in the Sublime Text editor, which I completely deleted two weeks after I started using VSCode, simply because VSCode is much cooler and faster.
In this article I want to tell you about best extensions for the VSCode editor, which I use myself and I advise you to pay your attention to them.
VSCode implements search and installation of extensions directly from the editor - just open the extensions panel and in the search for extensions in the Marketplace, enter the name of the extension or keyword(tag), and the editor will immediately do a search and offer you options available for your search query.
By default, VSCode already has the Emmet plugin installed, but read on to find out which extensions you should install to make your work faster and more comfortable.
Extensions for Visual Studio Code
Project Manager - Project Manager
This is the extension that you should install in the VSCode editor first. Author of this extension Alessandro Fragnani is an experienced developer with more than a dozen extensions for VSCode.
The extension will help you easily access your projects, no matter where they are located. You can define your own favorite projects or choose to automatically discover VSCode projects, Git, Mercurial and SVN repositories or any folder.
In general, you can make any folder on your computer a project and using this extension you can quickly switch between your projects or open them in a new editor.
I personally contributed to the development of the Project Manager extension - I made it multilingual and added Russian, so that it is now available in Russian.
Bookmarks - Bookmarks
Another extension for VSCode from Alessandro Fragnani.
The extension allows you to bookmark lines in a file, which is indicated by a mark in the margin.
Bookmarks have own panel Explorer and icon on the left menu bar, which provides quick access to bookmarks. You can add an unlimited number of them.
For convenience, to make it easier to navigate bookmarks, I often bookmark a comment. Below is an example on the screen - the bookmark is on the line with the comment Buttons and in the bookmark explorer it is marked Buttons. I think this is convenient:
Just like for Project Manager, I contributed to the development of this extension - I made it multilingual and added Russian to it.
The extension adds the ability to quickly open html files in the browser.
With this extension you don't need to fiddle around for a long time to open the file in the browser.
If the file is open in an editor and is in active state- just press the combination Alt keys+ B and the file will open in your default browser.
If you press the combination Shift keys+ Alt + B - then in command line editor, a list of browsers will appear where you can select which specific browser you want to open the file in.
You don’t need to remember the key combinations mentioned above - just press right button mouse and context menu There are corresponding items to open the file in the default browser or select a browser from the list. Moreover, you can open not only active files (opened in the editor), but also files from the Explorer panel.
Path Intelligence
Path Intelligence- this plugin for Visual Studio Code, which automatically fills in file names.
A similar extension is Path Autocomplete.
Performs the same functionality as Path Intelligence, adding the path and file names.
I currently have it disabled Path Intelligence, but is turned on. I'm testing which of these two extensions responds faster and gives hints in Intelesense. So far I like it better, the impression is that it is faster.
file-size
This extension shows the size of the active file in the editor's status bar.
I looked for a setting in VSCode options to display file size, but couldn't find it. But this small utility solves this problem and displays information about the file size in the editor’s status bar.
htmltagwrap
This extension wraps the selected fragment with HTML tags.
It's simple - select a fragment or line and use the keyboard shortcut Alt + W
If you get used to it and remember the command, it’s very cool.
Active File In Status Bar
Displays the path to the file in the editor status bar. When clicked, it copies the path to the file to the clipboard.
Bracket Pair Colorizer
This plugin allows you to set a color for each pair of brackets, which allows you to visually control nesting or condition rules in the code. Works for round(), curly() and square brackets.
Before installing this plugin, I had problems with closing brackets, now I can see the nesting of brackets by color.
File and folder icons
VSCode simpler Icons with Angular
This is a collection of icons for files. I reviewed a lot of icons, but settled on this assembly, because... here are stylized folders for node_modules and bower only. In other assemblies different folders(for example: images, js, css, etc.) have their own beautiful icons, but it is difficult to quickly distinguish a folder from a file, but here everything is simple - in the tree of folders and files I can clearly see where open folder, and where is closed.
There are a lot of similar sets on the Marketplace, so you can look for yourself and choose the icon styles that suit you. You can put many collections at once. Changing icons is easy - the setting for changing icons is in the menu on the gear located at the bottom of the toolbar:
Select an item File Icon Theme and the file icon themes you have installed will appear in the editor command line. Three default themes from VSCode and what you add. In the list, simply scroll through the topics with up and down arrows and the icons will be immediately applied and displayed in the file explorer. So you can quickly select the topic that you like.
I repeat that I liked the topic VSCode simpler Icons with Angular
Launches local server development with active reload function for static and dynamic pages.
To do this, there is a launch button in the editor status bar. After clicking on it, it opens the file in the browser and monitors changes in the files. When files change, it automatically reloads the page in the browser.
Personally, I prefer to work with Browsersync via Gulp, which is faster, more functional and creates less load, but since Gulp is not always installed in every project, there is work to be done to extend Live Server.
Profiled extensions for VSCode
And now I will offer a list of extensions for VSCode for specific areas.
Working with Git and Github
In addition to the fact that VSCode works with Git by default, the Marketplace has a lot of extensions for every taste for working with Git and Github. I stand like this:
Git History, GitLens, Git Merger, GitHub Pull Requests
RemoteFS
This extension allows you to connect to the server via FTP and SFTP protocols.
All you need to open a site or project located on the server is to add in the settings.json file next setting:
"remotefs.remote": ( "first site": ( "scheme": "ftp", "host": "Host", "port": 21, "username": "FTP login", "password": "Password ", "rootPath": "/", "connectTimeout": 10000), "second site": ( "scheme": "ftp", "host": "Host", "port": 21, "username": " FTP user", "password": "Password", "rootPath": "/", "connectTimeout": 10000 ) )
Connection data can be obtained on your hosting in the section FTP users. I specifically showed a connection layout for two sites - using this scheme, you can connect as many sites as you like using different protocols (FTP or SFTP).
Let's look at the best Visual Studio Code editor plugins for Web development in 2020.
- Live Server
- Auto Close Tag
- Import Cost
- Material Theme
- Apache Conf
- Russian Language Pack
- Small bonus
1. Live Server
Enabling Live Server for .html or .htm files:
Enabling Live Server if there are no .html or .htm files:
How to set up automatic page refresh for PHP files using Live Server
2. Sass
Sass syntax support: indentation, autocompletion, etc.
Compiles SASS/SCSS files to CSS in real time
To turn it on you need to press Watch Sass in the status bar
What Live Sass Complier includes:
- selecting the export folder for the compiled file
- choice CSS styling(expanded, compact, compressed, nested)
- choosing an extension name (.css or .min.css)
- extension compatible Live Server
- setting up automatic installation of vendor prefixes
- and so on
Selecting tags - opening and closing
Tag highlighting can be customized to suit your needs. My setup:
"highlight-matching-tag.leftStyle": ( "borderWidth" : "2px 2px 2px 2px" , "borderStyle" : "solid" , "borderColor" : "yellow" , "borderRadius" : "5px" ) , "highlight-matching-tag.rightStyle": ( "borderWidth" : "2px 2px 2px 2px" , "borderStyle" : "solid" , "borderColor" : "yellow" , "borderRadius" : "5px" ) ,Highlighting web colors in the editor with the appropriate color
The extension colors symmetrical brackets the same color, but different from other brackets.
When you change one paired tag, the second will be changed automatically.
By default, the extension works for all languages, so you can change this setting use the following code:
"auto-rename-tag.activationOnLanguage": [ "html" , "xml" , "php" , "javascript" ] ,8. Auto Close Tag
Automatic closing of tags
Works by default for all languages: HTML, PHP, JavaScript, markdown, liquid, etc. You can change the settings in setting.json
"auto-close-tag.activationOnLanguage": [ "php" , "javascript" , "javascriptreact" , "typescript" , "typescriptreact" , "plaintext" , "markdown" , "vue" , "liquid" , ]9.Import Cost
This extension will display the editor's built-in size of the imported package.
10. Material Theme
One of the most popular themes for VS Code. You can also install a font that supports ligatures (converting a sequence of characters into a single element)
Then the settings for settings.json will be like this
"editor.fontLigatures" : true , "editor.fontFamily" : "Fira Code" , "editor.fontWeight" : "100" ,11. Apache Conf
Apache syntax support. Convenient for editing files with extensions .htaccess. Also supports file types: .conf, .htgroups, .htpasswd