Introduction to Visual Studio Code

Visual Studio Code is one of the most popular source code editors & editors developed by Microsoft and widely used by the developer community around the world. Because of its compactness, cross-platform (can be used on Windows, Linux, Mac OS operating systems) and most importantly, it's completely free, allowing the community to develop extensions (extension features) that's why. currently VS Code is loved by the developer community and used to develop many different programming languages.

With my personal perspective, when I was new to coding (I did PHP), I initially used the PHP Storm IDE, which is extremely suitable for newbies because of the available features and support for most of the code prompts that almost always I didn't have to install anything, however, after a while of working experience, I decided to switch to visual studio code , even though it was difficult at first because I was familiar with keyboard shortcuts, features and editor interface. Old draft, but after 1 month, I have completely switched to visual studio code because of its convenience, can code in many different languages, but most importantly, its lightness!

Some commonly used extensions in Visual Studio

FTP & SFTP Extensions for Visual Studio:

SFTP _{Author: liximomo}

PHP code prompt extension for Visual Studio:

PHP Intelephense _{Author: Ben Mewburn}

php-fmt – PHP Formater _{Author: kokororin}

Extension prompts HTML code, automatically adds tags:

Auto Rename Tag _{Author: Jun Han}

Visual Studio keyboard shortcuts:

• Reformat (reformat the code) to clearly show the structure of the code: press Shift + Alt + F .

See detailed discussion at stack overflow

• Search and replace: Ctrl+H for windows, command+option+F for Macos
• Quick comment code: ctrl+/ for windows, command+/ for Macos
• Tab command blocks to reformat the code to make it beautiful and structured: tab

Collapse code /Expand code (expand and collapse functions in the code structure for easy viewing when programming): press Ctrl + Shift + [ , Ctrl + Shift + ]

Common problems

Can't click tabs in visual studio:

How to handle: press Ctrl+M with Windows or Command+shift+M with Macos

see detailed discussion at stack overflow

Use SFTP to upload the code:

Step 1: install Author liximomo's STFP Extension

Find on the menu bar header, view -> command pallete -> SFTP:Config to create the sftp.json file for the folder

Configure the sftp.json file as follows:

 {    "protocol": "ftp",    "host": "hostname",    "port": 21,    "username": "username",    "password": "",    "remotePath": "/path",    "uploadOnSave": true }

Build SASS,LESS,SCSS in Visual Studio Code

Step 1: install Sass or Less transpiler

 npm install -g sass less

Step 2: Create sass or less . file

Step 3: create the tasks.json file, manually create the sass file in the project root directory or navigate to Terminal > Configure Tasks > Create tasks.json file from template

 // Sass configuration { // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": [ { "label": "Sass Compile", "type": "shell", "command": "sass styles.scss styles.css", "group": "build" } ] }

Step 4: build after each update of scss file:

Ctrl+Shift+B ( Run Build Task ).

Select the appropriate task (in case of multiple tasks).

Remove command block tab spaces in visual studio code

Solution 1:

• Select command block
• Use the keyboard shortcut shift+tab to tab the command block to the left

Solution 2:

• Select option: " Selection " > " Column Selection mode " on the tool header bar
• Hold shift, select the spaces to delete with left mouse
• Press backspace or delete to delete the spaces.

See detailed discussion at stack overflow