Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/josephfrazier/prettier-diff
`git diff` wrapper for semantic JavaScript/JSON diffs
https://github.com/josephfrazier/prettier-diff
Last synced: 19 days ago
JSON representation
`git diff` wrapper for semantic JavaScript/JSON diffs
- Host: GitHub
- URL: https://github.com/josephfrazier/prettier-diff
- Owner: josephfrazier
- Created: 2017-03-29T18:40:57.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-04-18T15:19:32.000Z (over 1 year ago)
- Last Synced: 2024-08-10T06:13:21.600Z (3 months ago)
- Language: JavaScript
- Homepage: https://npm.im/prettier-diff
- Size: 315 KB
- Stars: 36
- Watchers: 3
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-diff-tools - prettier-diff - Wrapper around git diff for JavaScript/JSON, preprocesses the data with a prettifier. (Other Text Formats / Diff Enhancers)
README
# prettier-diff
`prettier-diff` is a `git diff` wrapper that preprocesses JavaScript and JSON files to reduce the number of formatting changes that appear in the diff.
This allows you to focus on the semantic changes, which is useful when viewing diffs that also have formatting changes.
JavaScript is preprocessed with [prettier], and JSON is preprocessed with [json-stable-stringify] and [json-align].
[prettier]: https://github.com/prettier/prettier
[json-stable-stringify]: https://github.com/substack/json-stable-stringify
[json-align]: https://github.com/nylen/node-json-align
## Installation
You can use [yarn] or [npm] to install `prettier-diff`:
```bash
yarn global add prettier-diff
# or
npm install --global prettier-diff
```
## Usage
### One-off usage
In any git repository, just use `prettier-diff` instead of `git diff`:
```bash
# instead of
git diff head^^
# do this
prettier-diff head^^
```
Behind the scenes, `prettier-diff` temporarily modifies the `.git/config` and `.git/info/attributes` files to set up the preprocessing by defining a [textconv] for all files.
### `git diff` integration
To always use `prettier-diff` as part of `git diff` in a given repository, you can run the following:
```bash
git config diff.prettier.textconv textconv-prettier
echo '*.js diff=prettier' >> .gitattributes
echo '*.json diff=prettier' >> .gitattributes
```
Now, `git diff` will automatically run `prettier-diff` on your JS/JSON files, and it plays well with the other `git diff` options like `--ignore-all-space`, as well as [diff-so-fancy].
See here for more information: [textconv]
[yarn]: https://yarnpkg.com/en/docs/getting-started
[npm]: https://www.npmjs.com/get-npm
[diff-so-fancy]: https://github.com/so-fancy/diff-so-fancy
[textconv]: https://git.wiki.kernel.org/index.php/Textconv
## Examples
For example, this repository contains a large commit that rewrote most of its code with [prettier-standard], and also renames a variable. You can see the commit on GitHub here: [8cc0119]
With `prettier-diff`, only the renaming is shown:
```bash
prettier-diff 8cc0119^ 8cc0119 --color | diff-so-fancy
```
[prettier-standard]: https://github.com/sheerun/prettier-standard
[8cc0119]: https://github.com/josephfrazier/prettier-diff/commit/8cc0119e3969132670e6b13cde1583280fababa5