Angular development with Sublime Text is feasible, but it requires manual configuration to improve efficiency. First install Node.js and Angular CLI, and create or run the project through "ng new" or "ng serve"; open the project root directory in Sublime to access the core file. Then install necessary plugins such as TypeScript, AngularJS, Emmet, LSP-typescript or LSP-eslint to enhance language support and code prompts. Then customize the settings, enable functions such as automatic completion, indentation adjustment, and configure shortcut keys and build systems to execute Angular commands. Finally, use the split-screen function to simultaneously edit the component's .ts, .html and .css files, and create code snippets (such as ngComponent) to speed up development. Through these steps, although Sublime does not have deep integration with IDE, it can still achieve an efficient and lightweight Angular development experience.

Using Sublime Text with Angular is totally doable, though it's not the most plug-and-play setup compared to heavier IDEs like VS Code. But if you're already used to Sublime or prefer a lighter editor, here's how to make it work well without sacrificing too much productivity.

Set up your environment properly

Before diving into editing files, make sure you have Node.js and Angular CLI installed — that's standard for any Angular project. Once that's set, you can generate or open an Angular project using ng new my-app or ng serve to start a dev server.

In Sublime, the key thing is organizing your workspace. Open the root folder of your Angular project — that's where angular.json lives. This gives you access to all the core files like src/ , app/ , and assets/ .

A few things to check:

• Make sure syntax highlighting is set to JavaScript or TypeScript depending on the file
• Install a package like TypeScript (from Package Control) to get better TS support

Install useful packages for Angular development

Sublime doesn't come with Angular-specific features out of the box, but adding a few packages make a big difference.

Here are the most helpful ones:

• TypeScript : Adds syntax highlighting, auto-completion, and some basic intelligence
• AngularJS (yes, it still helps): Offers snippets and some template support, even though it's technically for Angular 1.x
• Emmet : Speeds up HTML writing inside component templates
• LSP-typescript or LSP-eslint : For real-time linting and code suggestions (you'll need to enable LSP in settings)

To install them, use Package Control ( Cmd Shift P or Ctrl Shift P ) and search for each one.

Customize settings for better workflow

Out of the box, Sublime is fast but pretty barebones. You can tweak a few settings to make it more Angular-friendly.

Open Preferences > Settings , and add these tweaks:

 {
  "auto_complete": true,
  "tab_size": 2,
  "translate_tabs_to_spaces": true,
  "highlight_modified_tabs": true,
  "show_encoding": true
}

Also, consider setting up keyboard shortcuts for common Angular tasks like running ng serve or ng generate component . You can create custom build systems under Tools > Build System > New Build System , which lets you run terminal commands directly from Sublime.

Work efficiently with split views and snippets

One of Sublime's strengths is being able to work in multiple files at once. Use split view ( Alt Shift 2 or Alt Shift 3 for vertical/horizontal) to keep your component .ts , .html , and .css files open side by side. It's especially handy when building Angular components.

You can also create your own snippets for commonly used Angular patterns — like creating a new component manually or inserting a service injection.

For example, create a snippet called ngComponent.sublime-snippet with this kind of content:

 <snippet>
  <content><![CDATA[
@Component({
  selector: &#39;app-${1}&#39;,
  templateUrl: &#39;./${1}.component.html&#39;,
  styleUrls: [&#39;./${1}.component.css&#39;]
})
export class ${2}Component {}
]]></content>
</snippet>

Now just type ngComponent and hit Tab to insert a full component shell.

That's basically it. Sublime isn't going to give you full Angular language service or deep template checking unless you layer in tools like LSP and external linters. But with the right setup, it's still a solid option for Angular projects — especially if you value speed and simplicity over feature-heavy IDEs.

The above is the detailed content of How do I use Sublime Text with Angular?. For more information, please follow other related articles on the PHP Chinese website!