How to Setup Sublime Text for Angular and Dotnet

While working on a fullstack project, Visual Studio Code has been the top pick for many developers. It's open source, feature-rich, and community-driven. However you could also find lots of complaints about slow, not responding, and cumbersome of VSCode all around. For example of my sample project Angular+dotnet, I have a list of minimum VSCode extension installed yet still the IDE would insist occupying high CPU usage while idle.

At this moment my 2016 MacBook Pro w/ 16GB RAM is already struggling with a sluggish scrolling of VSCode as well as a pitching blowing fan. Time for some alternatives...

The main IDE would be Sublime Text 4 to replace VSCode. There are plenty of tutorials how to install Sublime Text 4 around, and I will not cover the basics here. The configuration consists of two parts:

• Frontend development (Anguar, Typescript etc.)
• Backend development (dotnet, C# etc.)

Angular

Since Sublime Text 4, it has built-in support for Typescript so no more investment on the language itself. However AngularJS still needs some good packages to provide better integration with the IDE. The following packages are recommended:

• AngularJS Provide the core support of AngularJS, code completion, template, and lots of other handy stuff.

• BracketHighlighter A must-have extension if you have lots of nested code enclosed in brackets!

• SideBarEnhancements This extension brings the missing features in Sublime Text that VSCode has strengths. Many useful features like "reveal current file in sidebar", "open terminal from here" etc.

• Terminal Lauch terminals from the current file or folder. This is quite useful for a quick angular cli command.

• LSP The language server protocol for Sublime Text. It's the prerequisite of many other language specific LSP extensions.

• LSP-eslint The Eslint support gives you insightful hints for the quality of your Typescript code.

• LSP-css (optional) CSS, SCSS, LESS support for Sublime's LSP plugin

Recommended setting of LSP, which will show the diagnostics panel with level >= hint when saving files, and fix all eslint error automatically if possible.

1{
2	"show_diagnostics_panel_on_save": 4,
3	"lsp_code_actions_on_save": {
4	  "source.fixAll.eslint": true
5	}
6}

Dotnet

For dotnet development assuming C# is used, it is pretty straightforward. Only the following is needed:

• LSP-OmniSharp The language server for C# with the recommended settings for better coding experience like code completion etc.

1{
2    "omnisharp.enableAsyncCompletion": true,
3    "omnisharp.enableImportCompletion": true,
4    "omnisharp.organizeImportsOnFormat": true
5}

• Custom build system for dotnet. As there is no built-in support to build .csproj file, we could write our own build system for dotnet. Thanks to this powerful sublime feature. This would provide multiple actions when pressing key super+B to bring up the menu to choose.

 1{
 2    "working_dir": "${folder:${project_path:${file_path}}}",
 3    "selector": "source.cs",
 4
 5    "variants":
 6    [
 7        {
 8            "name": "Build",
 9            "shell_cmd": "dotnet build",
10            "word_wrap": false,
11            "quiet": true,
12        },
13        {
14            "name": "Clean",
15            "shell_cmd": "dotnet clean"
16        },
17        {
18            "name": "Run",
19            "shell_cmd": "dotnet run"
20        },
21        {
22            "name": "Run Interactive",
23            "cmd": ["dotnet", "run"],
24            "target": "terminus_open",
25            "auto_close": false,
26        }
27    ],
28}

As of now we have a close-to-complete IDE for a fullstack development environment (Angular + dotnet). Comparing to VSCode memory usage often at 1GB and up, Sublime Text only occupies ~250MB RAM w/o any excessive CPU usage while idling, which is a huge resource (life) saver! 😆 I don't find anything uncomfortable with Sublime writing Typescript and C# code v.s. using VSCode. Plus, you could even install the sublime merge (a gitkraken alternative) to make it a even better IDE. A comparison of GitKraken vs Sublime Merge would be expected in the future.

Translations:

• "中文" |