Sublime Text 3 Package Control and Plugins Setup

Sublime text 3 is simple and very effective text editor compare to Adobe dream weaver or notepad++, so I recommended to use Sublime text editor. In this editor I never face any kind of lagging and frizzing problem and main advantage of this editor is- it have too many plugin with package controller. So try it. It also available for 30 days trial version.

Sublime Text 3 Package Control and Plugins Setup

sublime text 3

How to Install Sublime Text 3:

Step 1: First of all download the sublime text 3.

Step 2: Than Install Sublime text 3 and enter your license key to activate your sublime text editor 3.

Step 3: All Things are done! Now open it.

Install Sublime Package Control:

Step 1: first go to Google and search for “Sublime Text Package Control”.

Step 2: You can see the title written as “Package Control: the Sublime Text Package Manager”. Click on that.

Step 3: On the top right corner, you can see the button “Install now”. Click on that button.

Step 4: In the left side of the page there are two option. First is Sublime Text 3 and the second is Sublime Text 2. You had to select Sublime Text 3.

Step 5: Then, copy the code and open the Sublime Text 3.

copy package control code

Step 6: In the top menu, go to view and click on “Show Console”.

open console

Step 7: Paste the code into the bottom bar and hit enter and wait for that finish.

paste code of package

Step 8: When it is finished, don’t forget to restart the Sublime Text 3.

To test and it is working or not, press Ctrl+Shift+P and type “install” and if we the command written as “Package Control: Install Package that means that we successfully install the package control.

package control installed

Install Plugin and Features:

1.) Color Scheme:

Step 1: press Ctrl+Shift+P and type “install” and hit enter.

package control

Step 2: Search “Dayle” and you can see the Package “Dayle Rees Color Schemes”. Click that command to install package. You can see in the bottom left, it will say Installing Package.

install dayle rees color schemes

Step 3: After installing the package. Go to Sublime Text on the top and go to Preferences, color Scheme and go to Dayle Rees Color Schemes and we can see all the Color scheme.

open dayle color schemes

2.) Predawn:

Step 1: Again press Ctrl+Shift+P and type “Install” and hit enter.

Step 2: Search “Predawn” and click on “Predawn” Package.

install predawn

Step 3: the pop-up comes with a ReadMe file. It says that “To activate the theme, add or replay the current theme setting with the below code.

copy predawn activation code

Step 4: Copy the below code and go to Sublime Text and then go to Preferences and go to Settings – User and erase all the coding for that.

user setting

Step 5: Paste that code that we copy from the ReadMe file and save the settings. You can see the changes.

Step 6: Go to that ReadMe file. Below it is written as “Also, some other settings that I like.”

Step 7: Below, copy all the coding and go to user settings again and paste it there and save the configuration.

Step 8: In the ReadMe file, you can see an important message “Make sure to restart sublime after installing”. So restart the Sublime Text 3.

3.) Bracket Highlighter:

Step 1: Press Ctrl+Shift+P and type “Install” and hit enter.

Step 2: Search “Bracket Highlighter” and click on Bracket Highlighter package to install.

result

Step 3: And click on any bracket and it will tell you that where that bracket start is and where it will end. It will also work in you CSS and HTML files.

4.) Sidebar Enhancements:

Step 1: Press Ctrl+Shift+P and type “install” and hit enter.

Step 2: Search “Sidebar Enhancements” and click on Sidebar Enhancements package. To install.

Step 3: right click on any folder in the Sidebar and you can see that there is a lot of options are added.

Note: we are using same steps again and again so “Ctrl+Shift+P” opens sublime command palette and after typing “install” its opens package control manager. So when you want to install any plugin. you want to do same thing every time and in package manager, you need to type plugin name.

5.) Sublime Code Intel:

Step 1: Press Ctrl+P and type “install” and hit enter.

Step 2: Search “Sublime Code Intel” and click on Sublime Code Intel to install that package. This one take a second to install.

Step 3: And again the Popup ReadMe file will open, and it will only give you the information.

Step 4: for testing, open a sheet and, for example, I wrote testString and when I hit dot, the popup will come with the various method that I can use.

6.) Emmet:

Step 1: Press Ctrl+Shift+P and type “install” and hit enter.

Step 2: Search “Emmet” and click on Emmet package to install.

Step 3: Again the ReadMe file will come up. It will only give you the information.

Step 4: for example, if I open my HTML file and I want Three <div>. So I can write div*3 and hit Tab, and it will come out with three <div>.

result of emmet

 

result of emmet 2

 

7.) Sublime Linter:

Firstly, we had to go to node.js.org. Download and install Node Package Manger.

Step 1: After install Node Package Manger, press Ctrl+Shift+P and type “install” and hit enter.

Step 2: Search “Sublime Linter’ and click Sublime Linter package to install. Once it will install. It doesn’t do anything itself, we have to install each language separately.

8.) SublimeLinter JsHint:

Step 1: Go to Google and search SublimeLinter JsHint and click on the top link.

Step 2: Go down in the installation instruction. Read the instruction and copy the code.

Step 3: Open up your Terminal and paste that code to install JsHint. If you get an error, you may need to do “sudo” before the command.

cmd

Step 4: To install JsHint Package, open Sublime Text 3 and press Ctrl+Shift+P and type “install” and hit enter.

Step 5: Search “SublimeLinter – JsHint” and click on SublimeLinter – JsHint to install package. Restart the Sublime Text 3 after installation.

Step 6: Now we go to our JavaScript File and see that if its works or not.

Step 7: Select any coding and see on the bottom, it will tell you what’s the problem is, example errors, Missing Semicolon, etc.

8.) SublimeLinter CssLint:

Step 1: Go to Google and Search SublimeLinter CssLint and click on the top click in Google.

Step 2: Go down in the Linter Installation instruction.

Step 3: Read all the instruction and copy the code.

Step 4: Go back to the terminal(CMD) and do “sudo” and paste the code and install.

Step 5: Open Sublime Text 3 and press Ctrl+Shift+P and type “install” and hit enter.

Step 6: Search SublimeLinter – csslint and click on SublimeLinter – csslint to install package. Restart the Sublime Text 3 again.

Step 7: Open your CSS Script and select any coding. In the bottom, it will tell you what the problem in the script is.

If you want to remove the message. Press Ctrl+Shift+P and type “remove” instead of “install” and hit enter. It will show you all the packages that you have installed. Click on any package to remove.

remove plugin

Final Words!

In sublime text 3 you got lots of plugin and feature but I mention best plugin which I using for my daily developing project and its helps me a lot. After using sublime text my programing speed improved and you don’t need to enter single line continually and you can edit multiple lines in one time 🙂

So I hope you enjoy my tutorial or if you like this please share this with your friends and if you have any question than comment it below.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.