Here are some packages associated with JavaScript development.
Non-default packages can be installed with `M-x package-install`
;; to set up our packages repos
(require 'package)
(package-initialize)
(add-to-list 'package-archives
'("melpa" . "http://melpa.org/packages/"))
;; then
(package-install 'js-comint) ;; for example
(require 'js-comint)Or-if you're using `straight.el` (a functional package manager) with `use-package` (a macro for installing/configuring emacs)-run the following commands.
(straight-use-package 'use-package) (setq straight-use-package-by-default 't) ;; then (use-package elgot) ;; example install
web-mode.el is an autonomous emacs major-mode for editing web templates.
;; after installing it ex. (use-package web-mode)
(add-to-list 'auto-mode-alist '("\\.html\\'" . web-mode))(setq js-jsx-syntax 't) ;; Emacs will active JSX support in js-mode automatically (add-hook 'js-mode-hook (lambda () (setq-default js-indent-level 2))) ;; we use 2 tabs indent width (add-hook 'js-mode-hook 'sgml-electric-tag-pair-mode) ;; to close JSX/html tags automatically
(add-to-list 'auto-mode-alist '("\\.json\\'" . json-mode)) ;; if not already set automatically
(add-hook 'json-mode-hook
(lambda ()
(setq-default js-indent-level 4))) ;; we use 4 tabs ident widthAn LSP client to get IDE (static code analysis) features. Allows the editor to better navigate/understand code as well as refactor it. Integrates well with Emacs default packages such as flymake.
;;after installing eglot (use-package eglot)
(defun my-project-try-jsconfig-json (dir)
(when-let* ((found (locate-dominating-file dir "jsconfig.json")))
(cons 'eglot-project found)))
(add-hook 'project-find-functions
'my-project-try-jsconfig-json nil nil)
;; after installing the server bin with:
;; npm install -g typescript-language-server typescript
(add-to-list 'eglot-server-programs
'((js-mode) "typescript-language-server" "--stdio"))
;; to use eslint with eglot in our projects (for error checking)
(add-hook 'js-mode-hook 'eglot-ensure) ;; to run it automatically with JS
(defun my-project-try-jsconfig-json (dir)
(when-let* ((found (locate-dominating-file dir "jsconfig.json")))
(cons 'eglot-project found)))
(add-hook 'project-find-functions
'my-project-try-jsconfig-json nil nil)Most projects use eslint. eslint-fix allows us to format/automatically fix some issues on save.
;; after installing it (add-hook 'js-mode-hook #'eslint-fix-auto-mode)
js-comint will send code from Emacs into a JavaScript interpreter in an inferior process window (node.js or rhino).
;; after installing it (defun inferior-js-mode-hook-setup () (add-hook 'comint-output-filter-functions 'js-comint-process-output)) (add-hook 'inferior-js-mode-hook 'inferior-js-mode-hook-setup t) ;; to run call M-x: js-comint-repl (define-key js-mode-map [remap eval-last-sexp] #'js-comint-send-last-sexp) (define-key js-mode-map (kbd "C-c b") 'js-send-buffer))
Indium connects to a browser tab or nodejs process and provides many features for JavaScript development.
From WikiEmacs: subword-mode is a buffer-local minor mode. Enabling it remaps word-based editing commands to subword-based commands that handle symbols with mixed uppercase and lowercase letters, e.g. "GtkWidget", "EmacsFrameClass", "NSGraphicsContext".
(add-hook 'js-mode (lambda () (subword-mode +1)) ;; or (global-subword-mode +1)
rainbow-delimiters is a "rainbow parentheses"-like mode which highlights delimiters such as parentheses, brackets or braces according to their depth.
;; after installing (add-hook 'prog-mode-hook 'rainbow-delimiters-mode)
It turns out that a lot of the paredit key bindings work as expected in non-lisp buffers, since many major modes provide reasonable sexp-oriented navigation.
;; afte installing (use-package paredit-everywhere) (add-hook 'prog-mode-hook 'paredit-everywhere-mode)
(add-hook 'js-mode (lambda () (sgml-electric-tag-pair-mode +1))