js-auto-format-mode

Emacs minor mode for auto-formatting JavaScript code.

By default, this package uses ESLint as formatter. For details, please see --fix option of ESLint command line.

Table of Contents

• Install
  • Dependencies
  • ESLint
  • MELPA
• Usage
  • Format on demand
  • Customize
  • Use other formatter
  • Disable in any directories
  • Enable in editing CSS
• Change Log
• Development
  • Setup
  • Release
• License

Install

Dependencies

• Emacs 24+

Optional (if you use a different formatter than the default one):

• Node.js
• ESLint

ESLint

Install eslint command:

npm install --global eslint

Create ~/.eslintrc file:

{
  "extends": "eslint:recommended"
}

For details, please see ESLint official site.

MELPA

Install from MELPA.

M-x package-install RET js-auto-format-mode RET

Usage

Recommended configuration:

(add-hook 'js-mode-hook #'js-auto-format-mode)

NOTE: In a Node.js project, it's recommended to install also add-node-modules-path, which puts project local eslint (node_modules/.bin/eslint) before global eslint.

If you use use-package, installation and configuration are easier:

(use-package js-auto-format-mode
  :config
  (add-hook 'js-mode-hook #'js-auto-format-mode))

(use-package add-node-modules-path
  :config
  (add-hook 'js-mode-hook #'add-node-modules-path))

Format on demand

M-x js-auto-format-execute

(or M-x j-a-f-e)

Customize

M-x customize-group RET js-auto-format RET

(or M-x cus-g RET j-a-f RET)

Use other formatter

For example, in case of using Prettier.

First, install prettier command.

npm install --global prettier

Then, customize js-auto-format-mode.

(custom-set-variables
  '(js-auto-format-command "prettier")
  '(js-auto-format-command-args "--write --single-quote --no-semi"))

Disable in any directories

M-x add-dir-local-variable RET js-mode RET js-auto-format-disabled RET t

Enable in editing CSS

(defun my/enable-auto-format-on-css ()
  (setq-local js-auto-format-command "prettier")
  (setq-local js-auto-format-command-args "--write --no-color")
  (js-auto-format-mode))
(add-hook 'css-mode-hook #'my/enable-auto-format-on-css)

Change Log

For each release, please see here.

Development

Setup

1. git clone git@github.com:ybiquitous/js-auto-format-mode.gi
2. npm ci

Release

1. git checkout master
2. git pull
3. npm run release:dry-run
4. npm run release
5. git push --follow-tags

License

GPLv3 © Masafumi Koba