Ember Extensions

Visual Studio Code is a code editor optimized for building and debugging modern web applications. Visual Studio Code is one of the most popular text editors among Ember developers.

Install the extension pack to get everything you need to work on Ember.js projects.

Ember.js Extension Pack - It will install the following addons

Glimmer Templates Syntax - Syntax formatting for glimmer templates.

Stable Ember Language Server - Stable Ember Language Server is a stable, full-featured language server. Its name comes from its history as a fork of Ember Language Server and the efforts to keep up with changes in Ember.

ESLint - Integrates ESLint into VS Code.

EditorConfig for Visual Studio Code - Attempts to override user/workspace settings with settings found in .editorconfig files. The .editorconfig file helps developers define and maintain consistent coding styles between different editors and IDEs.

Prettier - Prettier is an opinionated code formatting tool. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary. Prettier supports Handlebars, Ember and Glimmer out of the box.

Zoey says...

This is not installed as part of the extension pack but should be considered for Ember projects built with TypeScript. Learn more about Glint here.

Glint is a set of tools to aid in developing code that uses the Glimmer VM for rendering, such as Ember.js v3.24+ and GlimmerX projects.

Vim is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems and with Apple OS X. Alternatively, Neovim is a hyper-extensible Vim-based text editor. Both editors share a range of cross-compatible extensions listed below.

You'll want to remove any linter / completion manager you currently have installed (or disable them for .js, .ts or .hbs files), and follow the install guides for the following packages:

Only one of these solutions is needed, with tree-sitter being the highest fidelity.

nvim-treesitter - high-fidelity static highlighting with support for .gjs and .gts and embedded hbs. Use ensure_installed = { 'glimmer' }. Example nvim-treesitter config can be found here

or

vim-ember-hbs - Add Ember template syntax highlighting and indentation to Vim. To get embedded highlighting will involve these additional plugins:

• vim-javascript
• vim-js-pretty-template

Only one of these solutions should be used at a time.

Native LSP with assistance from Mason.nvim Easily install and manage LSP servers, DAP servers, linters, and formatters. Example mason+LSP config can be found here

or

Conquer for Completion (COC) for Neovim - An IntelliSense engine which takes control over all linting, hinting, and language-server integration. With the ember plugin coc-ember - Ember.js language server extension including useful configuration instructions.

ember.vim - Shortcuts to navigate related files with Ember.js projects.

Ember Tools - Various tools for working with Ember.js projects.

Atom is hackable text editor for the 21st Century.

atom-ide-ember - Atom package to use the Ember Language Server.

emberjs-atom - Atom autocomplete and snippets for Ember.js.

atom-ember-snippets - Ember.js ES6, EmberData & Handlebars snippets for Atom editor.

language-ember-htmlbars - Add Ember template syntax highlighting and indentation to Atom

A sophisticated text editor for code, markup and prose.

ember-cli-sublime-snippets - Ember CLI snippets for Sublime Text 3.

ember-component-template-split-view - Super simple Sublime Text plugin that will let you open corresponding template or route files with Ember.js components.

CodeLobster IDE is a smart free cross-platform editor.

CodeLobster IDE plug-in for Ember gives autocomplete and tooltips for Ember.js functions, context and dynamic help.