Sublime Text 3 Settings for HTML and CSS

Learn how to set up Sublime Text 3 for HTML & CSS development with an example.

Sublime Text 3 Settings for HTML and CSS

Sublime Text 3 is a great code editor for working with HTML and CSS. It has a range of useful features, such as syntax highlighting, code auto-completion, and an integrated file browser. Here are some tips on how to customize Sublime Text 3 to get the most out of it when working with HTML and CSS.

Syntax Highlighting

Syntax highlighting is an important feature when it comes to writing HTML and CSS. It allows you to easily see which elements and attributes are being used in your code. To enable syntax highlighting, go to Preferences > Settings. In the settings file, add the following line:

"color_scheme": "Packages/Color Scheme - Default/Monokai.sublime-color-scheme"

This will enable the Monokai syntax highlighting theme. You can also choose from other themes, such as Solarized and Tomorrow Night, by changing the theme name in the settings file.

Code Autocompletion

Sublime Text 3 has a powerful code autocompletion feature, which can save you a lot of time when writing HTML and CSS. To enable code autocompletion, go to Preferences > Settings and add the following line:

"auto_complete_triggers": [ {"selector": "source.css - comment - string.quoted.double.css - string.quoted.single.css - punctuation.definition.string.end.css", "characters": ":"} ]

This will enable code autocompletion for CSS properties. You can also enable autocompletion for HTML tags and attributes by adding the following line to the settings file:

"auto_complete_selector": "text.html - source - meta.tag - meta.tag.block.any - meta.tag.block.table.any - meta.tag.inline.any - meta.tag.other.html - punctuation.definition.tag.html",

This will enable code autocompletion for HTML tags and attributes. You can also add other language-specific autocompletion rules, such as for JavaScript and PHP.

File Browser

Sublime Text 3 also includes an integrated file browser that makes it easy to navigate your project folders. To enable the file browser, go to Preferences > Settings and add the following line:

"show_full_path": true

This will enable the file browser, which can be accessed by clicking the icon in the top-right corner of the window.

Conclusion

Sublime Text 3 is a great code editor for working with HTML and CSS. With the right settings, it can be even more powerful. By following the tips outlined in this article, you can customize Sublime Text 3 to get the most out of it when working with HTML and CSS.