Sublime Text - Unleashing Productivity

In the world of coding and text editing, finding the perfect tool to enhance productivity and streamline your workflow is crucial, its a versatile and powerful text editor, has been a favorite among developers and programmers for several years.

In this blog post, we will delve into the advantages of using Sublime Text and discover how it can revolutionize your coding experience.

Speed & Performance: One of the most significant advantages of Sublime Text is its exceptional speed and performance. The editor is built using a custom cross-platform UI toolkit, making it incredibly fast, even when handling large files. Its lightweight design ensures quick startup times, smooth scrolling, and seamless navigation, enabling developers to work efficiently without any distractions.

Cross-Platform Compatibility: Sublime Text's cross-platform compatibility is a boon for developers who frequently switch between different operating systems. Whether you're using Windows, macOS, or Linux, you can enjoy the same robust features and functionality across all platforms. This flexibility allows for a consistent coding experience, regardless of the environment you're working in.

Extensibility & Customization: Sublime Text's extensibility is a game-changer for developers, as it allows them to tailor the editor to suit their specific needs. With a vast ecosystem of plugins and packages, you can enhance functionality, automate repetitive tasks, and integrate with various tools and frameworks. Whether it's code linting, version control, or project management, Sublime Text offers a wide range of extensions to optimize your workflow.

Powerful Editing Features: Sublime Text boasts a rich set of editing features that significantly enhance productivity. Its multiple cursors feature enables simultaneous editing in different locations, saving valuable time. With powerful search and replace functionality, developers can quickly find and modify code snippets, variables, or function names within seconds. Additionally, Sublime Text supports extensive keyboard shortcuts, allowing you to navigate and edit code effortlessly.

Split Editing & Distraction-Free Mode: Sublime Text's split editing feature enables developers to work on multiple files or sections of code simultaneously. This feature is particularly useful when referencing multiple files or comparing code snippets side by side. Additionally, Sublime Text offers a distraction-free mode, providing a clutter-free environment for focused coding. With customizable preferences, you can create an ideal working environment that maximizes your concentration.

Project Management & Workspace Support: Managing complex projects becomes more manageable with Sublime Text's built-in project management capabilities. You can create project workspaces, organize files, and switch between projects effortlessly. By saving project settings, you can maintain a consistent setup across different coding sessions, eliminating the need for repetitive configuration.

Great Community Support: Sublime Text has a vibrant community of users who actively contribute to its ecosystem. You can find an abundance of community-created themes, packages, and plugins that cater to specific programming languages or frameworks. The community forums and documentation provide valuable resources, tutorials, and troubleshooting assistance, ensuring that you're never alone on your coding journey.

Join the community on discord channel.

Customization

Themes & Color Schemes: Sublime Text allows you to customize its appearance by choosing from a wide range of themes and color schemes. You can personalize the editor's UI to match your preferences, whether you prefer a light or dark theme, or if you want to highlight specific syntax elements with distinct colors.

Key Bindings: Sublime Text enables you to define your own key bindings or modify existing ones. This feature allows you to create custom shortcuts for frequently used commands or tailor the key bindings to match your preferred workflow. You can save valuable time by assigning shortcuts to tasks you perform regularly.

Snippets: Snippets are predefined code templates that can be easily inserted into your files. Sublime Text supports the creation and customization of snippets, allowing you to create shortcuts for commonly used code blocks. You can even add placeholders within the snippets for dynamic input, making code generation more efficient.

Packages

Productivity:

• LSP: The LSP (Language Server Protocol) plugin is a must-have for React developers as it provides language intelligence capabilities, including auto-completion, code navigation, and refactoring tools. It integrates with language servers specific to React and JavaScript, such as TypeScript, ESLint, and Prettier, to enhance the development experience.

• GitGutter: GitGutter provides a visual indication of Git changes directly in the gutter area. It helps React developers keep track of code modifications, additions, and deletions, making it easier to manage version control within the editor.

• Emmet: Emmet is a productivity-focused plugin that speeds up HTML and CSS coding. It allows you to write shorthand code snippets and quickly expand them into fully-formed markup. With Emmet, you can generate complex React component structures with minimal effort.

• ESLint: ESLint is a widely used and highly configurable linter tool for JavaScript. It helps identify and report code quality issues, enforce coding conventions, and catch potential errors and bugs.

• JsPrettier: JsPrettier is a popular package that integrates the Prettier code formatter. Prettier is a code formatting tool that helps enforce consistent code style and formatting conventions in JavaScript, TypeScript, and other related languages.

• DocBlockr: DocBlockr simplifies the process of writing documentation comments. With this plugin, you can generate well-formatted JSDoc-style comments for your React components, props, and methods. It saves time and promotes better code documentation.

• Quokka: Quokka is a powerful JavaScript and TypeScript productivity tool that provides a live coding and debugging experience within your code editor. It offers real-time feedback, advanced code execution capabilities, and interactive debugging features.

Appearance:

• File Type Icons: A File Icon replaces the default generic icons in the sidebar with more specific icons that represent different file types. It supports a wide range of file extensions, including common programming languages, markup files, images, audio, video, and more. This makes it easier to navigate and locate specific files in your project.

• BracketHighlighter: BracketHighlighter is a popular package that enhances the highlighting and navigation of brackets, tags, and other paired characters in your code. It helps improve code readability and makes it easier to identify matching pairs of brackets or tags

• GitHub Theme: GitHub Theme package offers a color scheme that closely resembles the syntax highlighting used on GitHub. It includes a dark background with various colors assigned to different programming language syntax elements to provide clear visibility and readability. The theme aims to create a coding experience that aligns with the familiar GitHub style.

Navigation

• FileManager: The FileManager package offers a comprehensive file management system. It provides a graphical interface for creating, renaming, moving, and deleting files and folders. FileManager also supports advanced features like batch renaming and creating file templates.

• Switch Window: The Switch Window package is a useful tool that enhances the workflow when working with multiple open files or tabs in the editor. It provides a quick and efficient way to switch between different windows or tabs.

To conclude, I'd like to share some of my personal settings and key bindings that empower me to be more efficient in my daily work as a Front End Developer.

Personal Configurations

LSP

1{
2    "show_diagnostics_panel_on_save": 0,
3    "show_diagnostics_count_in_view_status": true,
4    "show_diagnostics_in_view_status": false,
5    "show_view_status": false,
6    "semantic_highlighting": true,
7    "show_references_in_quick_panel": true,
8    "show_code_actions": "bulb",
9    "lsp_code_actions_on_save": {
10        "source.fixAll.stylelint": true,
11        "source.fixAll.eslint": true
12    }
13}

Preferences

1{
2    "hardware_acceleration": "opengl",
3    "mini_diff": "auto",
4    "word_wrap": false,
5    "drag_text": false,
6    "margin": 20,
7    "goto_anything_exclude_gitignore": true,
8    "ensure_newline_at_eof_on_save": true,
9    "font_face": "Fira Mono",
10    "font_size": 13,
11    "font_options": ["gray_antialias", "subpixel_antialias"],
12    "highlight_line": true,
13    "highlight_line_number": true,
14    "ignored_packages": ["Vintage"],
15    "spell_check": true,
16    "translate_tabs_to_spaces": true,
17    "trim_trailing_white_space_on_save": "all",
18    "caret_style": "smooth",
19    "caret_extra_bottom": 10,
20    "caret_extra_top": 10,
21    "scroll_context_lines": 10,
22    "scroll_past_end": 0.5,
23    "scroll_speed": 5.0,
24    "line_padding_top": 7,
25    "line_padding_bottom": 7,
26    "auto_complete_include_snippets": false,
27    "show_full_path": false,
28    "show_project_first": true,
29    "hide_tab_scrolling_buttons": true,
30    "inactive_sheet_dimming": false,
31    "theme": "GitHub Adaptive.sublime-theme",
32    "color_scheme": "GitHub Dimmed.sublime-color-scheme",
33    "update_check": true,
34    "draw_minimap_border": true,
35}

Key Bindings

1[
2    { "keys": ["super+k", "super+k"], "command": "toggle_distraction_free" },
3    { "keys": ["alt+r"], "command": "reveal_in_side_bar" },
4    {
5        "keys": ["super+i"],
6        "command": "reindent",
7        "args": { "single_line": false }
8    },
9    {
10        "keys": ["super+alt+t"],
11        "command": "show_panel",
12        "args": { "panel": "console", "toggle": true }
13    },
14    {
15        "keys": ["super+shift+7"],
16        "command": "toggle_comment",
17        "args": { "block": false }
18    },
19    { "keys": ["super+0"], "command": "focus_side_bar" },
20    {
21        "keys": ["super+shift+m"],
22        "command": "expand_selection",
23        "args": { "to": "brackets" }
24    },
25    { "keys": ["super+m"], "command": "move_to", "args": { "to": "brackets" } },
26    { "keys": ["super+k", "super+."], "command": "toggle_inline_diff" },
27    {
28        "keys": ["super+k", "super+i"],
29        "command": "lsp_execute",
30        "args": {
31            "session_name": "LSP-typescript",
32            "command_name": "_typescript.organizeImports",
33            "command_args": ["${file}"]
34        }
35    },
36    {
37        "keys": ["super+m"],
38        "command": "bh_key",
39        "args": {
40            "plugin": {
41                "args": { "select": "right", "alternate": true },
42                "command": "bh_modules.bracketselect"
43            },
44            "lines": true,
45            "no_outside_adj": null
46        }
47    },
48    {
49        "keys": ["super+t"],
50        "command": "emmet_go_to_tag_pair"
51    },
52    {
53        "keys": ["super+alt+n"],
54        "command": "fm_create",
55        "args": {
56            "initial_text": "$here/"
57        }
58    },
59    {
60        "keys": ["ctrl+w"],
61        "command": "emmet_wrap_with_abbreviation",
62        "context": [{ "key": "setting.is_widget", "operand": false }]
63    },
64    {
65        "keys": ["super+shift+m"],
66        "command": "expand_selection",
67        "args": { "to": "scope" }
68    },
69    {
70        "keys": ["super+."],
71        "command": "lsp_code_actions",
72        "context": [
73            {
74                "key": "lsp.session_with_capability",
75                "operand": "codeActionProvider"
76            }
77        ]
78    },
79    {
80        "keys": ["super+k", "super+down"],
81        "command": "lsp_next_diagnostic",
82        "context": [{ "key": "setting.lsp_active" }]
83    },
84    {
85        "keys": ["super+k", "super+up"],
86        "command": "lsp_prev_diagnostic",
87        "context": [{ "key": "setting.lsp_active" }]
88    }
89]

Conclusion

Sublime Text is an exceptional text editor that empowers developers with its speed, cross-platform compatibility, extensibility, and powerful editing features. Whether you're a beginner or a seasoned programmer, offers a wealth of advantages that enhance productivity and make coding a joy.

By harnessing its capabilities, you can optimize your workflow, streamline your development process, and unlock your full coding potential. Give Sublime Text a try and experience the difference it can make in your coding endeavors.