Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ybiquitous/js-auto-format-mode
🔧 🔄 Emacs minor mode for auto-formatting JavaScript code
https://github.com/ybiquitous/js-auto-format-mode
emacs eslint formatting javascript
Last synced: about 20 hours ago
JSON representation
🔧 🔄 Emacs minor mode for auto-formatting JavaScript code
- Host: GitHub
- URL: https://github.com/ybiquitous/js-auto-format-mode
- Owner: ybiquitous
- License: gpl-3.0
- Created: 2016-04-25T04:23:36.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-11-14T01:28:54.000Z (almost 2 years ago)
- Last Synced: 2024-04-14T05:57:10.689Z (7 months ago)
- Topics: emacs, eslint, formatting, javascript
- Language: Emacs Lisp
- Homepage: https://melpa.org/#/js-auto-format-mode
- Size: 10.9 MB
- Stars: 6
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# js-auto-format-mode
[](https://melpa.org/#/js-auto-format-mode)
[](https://conventionalcommits.org)
Emacs minor mode for auto-formatting JavaScript code.
By default, this package uses [ESLint](https://eslint.org/) as formatter.
For details, please see [`--fix`](https://eslint.org/docs/user-guide/command-line-interface#--fix)
option of ESLint command line.
## Table of Contents
- [Install](#install)
- [Dependencies](#dependencies)
- [ESLint](#eslint)
- [MELPA](#melpa)
- [Usage](#usage)
- [Format on demand](#format-on-demand)
- [Customize](#customize)
- [Use other formatter](#use-other-formatter)
- [Disable in any directories](#disable-in-any-directories)
- [Enable in editing CSS](#enable-in-editing-css)
- [Change Log](#change-log)
- [Development](#development)
- [Setup](#setup)
- [Release](#release)
- [License](#license)
## Install
### Dependencies
- [Emacs 24+](https://www.gnu.org/software/emacs)
Optional (if you use a different formatter than the default one):
- [Node.js](https://nodejs.org/)
- [ESLint](https://eslint.org/)
### ESLint
Install `eslint` command:
```sh
npm install --global eslint
```
Create `~/.eslintrc` file:
```json
{
"extends": "eslint:recommended"
}
```
For details, please see [ESLint official site](https://eslint.org/).
### MELPA
Install from [MELPA](https://melpa.org/).
M-x package-install RET js-auto-format-mode RET
## Usage
Recommended configuration:
```elisp
(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`](https://github.com/codesuki/add-node-modules-path),
which puts project local `eslint` (`node_modules/.bin/eslint`) before global `eslint`.
If you use [`use-package`](https://github.com/jwiegley/use-package),
installation and configuration are easier:
```elisp
(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](https://prettier.io/).
First, install `prettier` command.
```sh
npm install --global prettier
```
Then, customize `js-auto-format-mode`.
```elisp
(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
```elisp
(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](CHANGELOG.md).
## Development
### Setup
1. `git clone [email protected]:ybiquitous/js-auto-format-mode.gi`
1. `npm ci`
### Release
1. `git checkout master`
1. `git pull`
1. `npm run release:dry-run`
1. `npm run release`
1. `git push --follow-tags`
## License
[GPLv3](LICENSE) © Masafumi Koba