4

10 Top Sublime Text Packages for Web Developers

 1 year ago
source link: https://www.laravelcode.com/post/10-top-sublime-text-packages-for-web-developers
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

10 Top Sublime Text Packages for Web Developers

  494 views

  6 months ago

Ubuntu

Sublime Text is more popular text editor among the web developers. It nativelly supports all programming languages and markup languages. Every developer has their own environment setup in text editor that make them more comfort in writing codes. There are so many packages available to make working easy and comfort. But sometimes they don't know about the package they needed. So I have mentioned bellow some of Sublime Text editor packages that may useful in web development.

Here is the list of Sublime Text packages that are useful in web developement:

1. Package Control

Of course, Package Control is the first package that necessary not only for web developers it required for Sublime Text users. Package Control makes users to install other packages directly from Sublime Text editor instead of pasting packages in Package directory. To install Package control, go to Package Control Installation page, choose your Sublime Text version and copy all Python script. Now go to Sublime Text, open Sublime Text Console either using shortcut key CTRL+` or go to the menu View > Show Console. It will open input box at the bottom of the window. Now paste here Python script and hit enter. After that press shortcut key CTRL+SHIFT+P and search for Install Package, Now you can download more Sublime Text packages.

sublime-text-console-package.png

package-control-sublime-text-plugin-install-package-package.png

2. SideBarEnhancements

By defult Sublime Text provides limited options for file operation on right click. SideBarEnhancements provides more useful options with file, e.g., Cut, Copy, Open in Browser etc. It package saves user's time by providing direct operation from Sublime Text.

SideBarEnhancements-sublime-text-package.png

3. Emmet

Emmet is write less code type of packages in HTML and CSS codes. Emmet provides shortcut which makes write HTML tags and CSS easily. Suppose you are creating unordered list with 5 li element and class. Then only you have to write one line of code and then press TAB button. It will generate HTML tags.

ul#list.list-group>li.list-group-item*5
emmet-sublime-text-package-code.png
emmet-works-result.png

Checkout this official documentation for more shortcuts.

4. Git

Git is the most popular VCS(version control software) that helps developers to maintain project code easily. This package provides developers to run basic Git commands direcly from Sublime Text. To access Git commands, press shortcut key CTRL+SHIFT+P, type git and you can see all available Git commands.

git-sublime-text-packages.png

5. Bracket​Highlighter

Bracket​Highlighter highllights brackets and make user experience more useful. Bracket​Highlighter highlights all starting and eniding brackets. It also highlights HTML tags.

bracket-highlighter-sublime-text-package.png

6. Alignment

Alignment makes your code align with delimiter like = and :. It makes your code more readable. To use, first you need to add delimiter in the setting by which you want to align. For that, Go through Preferences > Package Settings > Alignment > Settings - User menu in Sublime Text and paste bellow lines. You can also add more signs for alignment.

{
    "alignment_chars": [
        "=", ":"
    ]
}

To align code, select the code and press CTRL+ALT+A shortcut. It will align selected code by the charcaters.

alignment-sublime-text-package.png

7. Color​Picker

ColorPicker provides you Color Picker from directly from Sublime Text. This is useful to select color for applying CSS. To access Color Picker panel, use shortcut CTRL+SHIFT+C.

color-picker-sublime-text-package.png

8. All Autocomplete

When you type some method or variable name, then by default, Sublime Text gives you suggestion words from current file. All Autocomplete finds matching words from all opened files and gives suggestion. This way, All Autocomplete saves times and you do not need to write some words everytime.

all-autocomplete-sublime-text-package.png

9. A File Icon

A File Icon package generated different file icons in sidebar according to file type. A File Icon package make your User experience more interesting.

a-file-icon-sublime-text-package.png

10. SASS

This package is specifically useful for Web Designer. It highlights syntax of SASS and SCSS files.

Conclusion

There are lots of packages available for Sublime Text that makes your work in Sublime Text smooth and easy. You can check these popular packages available for Sublime Text. Also check this article  to install Sublime Text. I hope this article will help you to find useful Sublime Text packages. If you have any suggestions, let me know in the bellow comment section.

Author : Harsukh Makwana
Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK