Saturday, 25 July 2020

How to install the Browser sync in the sublime text 3 | sublime text 3 install package

How to install Browser sync in Sublime Text 3 

How to install the Browser sync in the sublime text 3
How to install the Browser sync in the sublime text 3

In this article I'm going to show you another alternative to View in the browser, If your device doesn’t support it then you should read this article because this will blow your mind and you can use it if only one is not working and the vice-versa.  However this is very useful for front end web developers. 

how to install package control in sublime text 3


how to install package control in sublime text 3
how to install package control in sublime text 3



As I already said,  we need to install Package Control. package control is Sublime's Text Package Manager, which makes it simple to find, install and keep other packages and plugins up-to-date. If you already have Package control you can skip this step, as i already mentioned it before.



 For me I have Sublime Text 3 so After that go back to sublime text and hit Control Tilde to open the console. Another way to open this is via View show console. Paste the code in the console and hit enter, it should start installing. When this pop-up comes through, it means that the installation for Package control was successful. (If your package control is n't installed ) All you have to do now is click OK and close Sublime or not it doesn’t matter much more , it still works.


sublime package control install |Best Sublime text 3 package download 


To check whether Package control installed successfully please click Ctrl Shift P to launch the Package control. And ah if you type: "package" you should see various options that are available for Package control. This means that Package control installed successfully. In case the console installation didn't work for you for some reason for example you've got a proxy on your network there is another way you can install the Package control. 


You do that by manually installing Package control. To manually install, go to this link, download this package

 

Once you copy it go back to Sublime Text "Preferences" "Browse Packages" it will bring up Packages in Sublime Text 3 as you can see here go up one space, go into "Installed Packages" and paste the package you just downloaded in here. This is the manual way of installing Package control. 


Download the Browser sync preview in sublime text 3


 It should now have Package control installed. Now that Package control is working, the next step for us is to search the package called Browser sync in install package options and install it and then wait for sometime to download it as it depends upon your internet speed.

Browser sync in the sublime text 3 install package
opening repositories in package control 


Then simply type in "install package" select it and it will open up with a list of available packages. So as you can see these are all the available packages that you can install in Sublime. So simply type in "Browser" and you've got Browser sync in the top there, simply click on it and if you look at the bottom here it is actually installing the package.



Browser sync is actually the package that we will use to open our code in a web browser. Then install the Browser sync or View in Browser  package for that matter this is what you do.Browser sync is create a local host as like a wammp server.

       

sublime text 3 install package
Menu bar of sublime text 


As you can see at the bottom left corner there is no longer any status updates meaning that Browser sync was installed successfully. Then after every install in Sublime Text you need to restart it so that that package registers with Sublime Text. After  we installed Package control so we have to do it again for Browser sync after restarting Sublime Text we are all set to view our code in a web browser. 



Best sublime package control install
Launch option in Browser sync


To view our code in a web browser but wait there is no default shortcut key you have to open it in the menu tab at the end and before the help menu it will show that Browser sync menu. To view in Browser Preview in your default browser then you should go to  Browser sync >> Launch it .



Preview in chrome browser.

Preview in chrome
Preview in chrome browser.



NOTE :--If by chance any prompt or windows firewall will be stopped to run it when it is first time in use, nothing any worry about it just give it permission to it then after you launch again there is no prompt or any pop up which is stop to run by the windows firewall.



Just to recap in this  article we saw how to install Package control either through the console installation or You can try the other similar Browser preview is View in Browser Click here to see the Browser preview in the sublime text 3.


Your opinion is important!


If you have any problem to install or any other issue you can comment down below I will be answer your question as soon as possible 


Share your tips/opinion in the comments below, won’t you? This way, we, at Unique Imagination  will cook up something even better for your taste next time!

That's it for now guys see you next time. I hope you will like my article, if you got this article useful you share it to another person who is finding a solution, which gave a motivation to write more kind of helpful article like this.


Thank you regards Pratap


Browser Preview in Sublime Text 3 | sublime text 3 package control

Browser Preview in Sublime Text 3 

 

Browser Preview in Sublime Text 3
Browser Preview in Sublime Text 3 


sublime text 3 package control


In this article I'm going to show you how you can enable Browser Preview, of your code in sublime text. Basically this is very useful for font end web developers. 

how to install package control in sublime text 3


Browser Preview in Sublime Text 3
Command Palette open in Sublime Text.


The first thing that we need to do is to install Package Control.  package control is Sublime's Text Package Manager, which makes it simple to find, install and keep other packages and plugins up-to-date. If you already have Package control you can skip this step.



Head over to this site and depending on the version of sublime text that you have please copy the corresponding code. For me I have Sublime Text Three so I'm going to copy this one. After that go back to sublime text hit Control Tilde to open the console. Another way to open this is via View show console. Paste the code in the console and hit enter, it should start installing. When this pop-up comes through, it means that the installation for Package control was successful. 



All you have to do now is click OK and close Sublime. We needed to restart Sublime Text so that Package control could finish installing. To check whether Package control installed successfully please click Ctrl Shift P to launch the Package control. 



And ah if you type: "package" you should see various options that are available for Package control. This means that Package control installed successfully. In case the console installation didn't work for you for some reason for example you've got a proxy on your network there is another way you can install the Package control. 


You do that by manually installing Package control. To manually install, go to this link, download this package. I've already downloaded it here and ah copy it.

 

Once you copy it go back to Sublime Text "Preferences" "Browse Packages" it will bring up Packages in Sublime Text 3 as you can see here go up one space, go into "Installed Packages" and paste the package you just downloaded in here. 

This is the manual way of installing Package control. After you paste this in here, close this and restart your Sublime Text.


 It should now have Package control installed. Now that Package control is working, the next step for us is to use it to install the View In Browser package. 


Command Palette open in Sublime Text.
Search in package control 



View In Browser is actually the package that we will use to open our code in a web browser. So to install View In Browser or any other package for that matter this is what you do. Simply type in "install package" select it and it will open up with a list of available packages. So as you can see these are all the available packages that you can install in Sublime. So simply type in "view" and you've got View In Browser the top there, simply click on it and if you look at the bottom here it is actually installing the package View In Browser.



As you can see at the bottom left corner there is no longer any status updates meaning that View In Browser was installed successfully. So after every install in Sublime Text you need to restart it so that that package registers with Sublime Text. 


Customization for Browser



This is the same thing that we did when we installed Package control so we have to do it again for View In Browser after restarting Sublime Text we are all set to view our code in a web browser. To view our code in a web browser we simply hit Ctrl+Alt+V and it will open up in your default web browser.


setting in View in Browser package control in sublime text 3
setting in View in Browser package control in sublime text 


Mostly in the Firefox browser but my default browser is Chrome if You wish you could do, Just copy the below line and paste it in the Preferences>package setting>View in browser>setting user.


{
"browser": "chrome",
}

And then save the file and close the tab. And use the shortcut to open your contents that view in browser.

User setting in View in Browser
User Setting of View in Browser 

 
Preview in Chrome Browser Looks likes

Preview in Chrome Browser via View in Browser
Preview in Chrome Browser 


Just to recap in this  article we saw how to install Package control either through the console installation or You can try the another similar Browser preview is Browser sync. Click here to see the article how to install the Browser sync in the sublime text 3.


That's it for now guys see you next time.Thank you Guys for reading my article and I hope you will like my article, if you got this article useful you share it to another person who is finding a solution, which gave a motivation to write more kind of helpful article like this.


Thank you very much :)