├── .gitignore
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── keymaps
    └── auto-prettier.json
├── lib
    └── auto-prettier.js
├── menus
    └── auto-prettier.json
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | npm-debug.log
3 | node_modules
4 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ## 0.1.0 - First Release
2 | * Add "Auto Format" to prettier menu and keymap
3 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2017 Grant Nestor
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining
 4 | a copy of this software and associated documentation files (the
 5 | "Software"), to deal in the Software without restriction, including
 6 | without limitation the rights to use, copy, modify, merge, publish,
 7 | distribute, sublicense, and/or sell copies of the Software, and to
 8 | permit persons to whom the Software is furnished to do so, subject to
 9 | the following conditions:
10 | 
11 | The above copyright notice and this permission notice shall be
12 | included in all copies or substantial portions of the Software.
13 | 
14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 📏 atom-auto-prettier
 2 | 
 3 | An Atom package that semantically reformats Javascript based on the window size. 
 4 | 
 5 | Powered by [prettier](https://github.com/prettier/prettier) and inspired by [refmt](https://facebook.github.io/reason/tools.html) for Reason.
 6 | 
 7 | ## 🎥 Demo 
 8 | 
 9 | ### Without auto-prettier:
10 | 
11 | Notice how Atom simply breaks lines at whitespace characters:
12 | 
13 | ![screenshot](http://g.recordit.co/crI712NXmx.gif)
14 | 
15 | ### With auto-prettier:
16 | 
17 | Notice how prettier breaks lines at Javascript-specific boundaries, such as blocks, object properties, and function arguments:
18 | 
19 | ![screenshot](http://g.recordit.co/Q7cyk3wk5r.gif)
20 | 
21 | > Does this package modify my source code?
22 | 
23 | Yes, in the author of prettier's words: "[Prettier] removes all original styling and ensures that all outputted JavaScript conforms to a consistent style".
24 | 
25 | ## 💾 Install
26 | 
27 | ### atom-auto-prettier depends on [prettier-atom](https://github.com/jlongster/prettier-atom)
28 | 
29 | Install both **atom-auto-prettier** and **prettier-atom**  via Atom's [Install view](http://flight-manual.atom.io/using-atom/sections/atom-packages/#atom-packages) or via [apm](http://flight-manual.atom.io/using-atom/sections/atom-packages/#command-line):
30 | 
31 | ```
32 | apm install atom-auto-prettier prettier-atom
33 | ```
34 | 
35 | ## 💻 Usage
36 | 
37 | Use Atom's [command palette](http://flight-manual.atom.io/getting-started/sections/atom-basics/#command-palette) to toggle auto-prettier on/off or use the <kbd>CTRL+ALT+SHIFT+F</kbd> shortcut.
38 | 
39 | ## 👍 Contributing
40 | 
41 | See the Atom [contributing guidelines](https://github.com/atom/atom/blob/master/CONTRIBUTING.md)
42 | 
43 | ### Workflow
44 | 
45 | * Fork this repo
46 | * Clone your fork
47 |   * `git clone https://github.com/[YOUR_NAME]/atom-auto-prettier.git && cd atom-auto-prettier`
48 | * Install dependencies
49 |   * `npm install`
50 | * Link your repo (which installs this local version of the package and allows you to test changes in Atom)
51 |   * `apm link`
52 | * Reload Atom to test changes
53 |   * Atom Command Palette > "Window: Reload"
54 | * Submit a pull request!
55 | 


--------------------------------------------------------------------------------
/keymaps/auto-prettier.json:
--------------------------------------------------------------------------------
1 | {
2 |   "atom-workspace": {
3 |     "ctrl-alt-shift-f": "auto-prettier:toggle"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/lib/auto-prettier.js:
--------------------------------------------------------------------------------
 1 | 'use babel';
 2 | 
 3 | import { CompositeDisposable } from 'atom';
 4 | 
 5 | export default {
 6 |   subscriptions: null,
 7 |   enabled: false,
 8 |   preferredLineLength: atom.config.get('editor.preferredLineLength'),
 9 | 
10 |   activate() {
11 |     this.subscriptions = new CompositeDisposable();
12 |     this.subscriptions.add(
13 |       atom.commands.add('atom-workspace', {
14 |         'auto-prettier:toggle': () => this.toggle()
15 |       })
16 |     );
17 |   },
18 | 
19 |   deactivate() {
20 |     this.subscriptions.dispose();
21 |   },
22 | 
23 |   toggle() {
24 |     window.onresize = this.enabled
25 |       ? null
26 |       : window.onresize = this.handleResize.bind(this);
27 |     this.enabled = !this.enabled;
28 |   },
29 | 
30 |   handleResize(event) {
31 |     const editor = atom.workspace.getActiveTextEditor();
32 |     if (editor && editor.getFileName().includes('.js')) {
33 |       const { width } = editor;
34 |       const lineLength = Math.ceil(width / 8);
35 |       if (lineLength <= this.preferredLineLength) {
36 |         atom.config.set('prettier-atom.printWidth', lineLength);
37 |         atom.commands.dispatch(atom.views.getView(editor), 'prettier:format');
38 |       } else if (
39 |         atom.config.get('prettier-atom.printWidth') !== this.preferredLineLength
40 |       ) {
41 |         atom.config.set('prettier-atom.printWidth', this.preferredLineLength);
42 |         atom.commands.dispatch(atom.views.getView(editor), 'prettier:format');
43 |       }
44 |     }
45 |   }
46 | };
47 | 


--------------------------------------------------------------------------------
/menus/auto-prettier.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "context-menu": {
 3 |     "atom-text-editor": [
 4 |       {
 5 |         "label": "Toggle auto-prettier",
 6 |         "command": "auto-prettier:toggle"
 7 |       }
 8 |     ]
 9 |   },
10 |   "menu": [
11 |     {
12 |       "label": "Packages",
13 |       "submenu": [
14 |         {
15 |           "label": "prettier",
16 |           "submenu": [
17 |             {
18 |               "label": "Auto Format",
19 |               "command": "auto-prettier:toggle"
20 |             }
21 |           ]
22 |         }
23 |       ]
24 |     }
25 |   ]
26 | }
27 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "atom-auto-prettier",
 3 |   "main": "./lib/auto-prettier",
 4 |   "version": "0.1.1",
 5 |   "author": "Grant Nestor",
 6 |   "description": "An Atom package that semantically reformats Javascript based on the window size",
 7 |   "keywords": [
 8 |     "atom",
 9 |     "prettier",
10 |     "javascript",
11 |     "format"
12 |   ],
13 |   "activationCommands": {
14 |     "atom-workspace": "auto-prettier:toggle"
15 |   },
16 |   "repository": "https://github.com/gnestor/atom-auto-prettier",
17 |   "license": "MIT",
18 |   "engines": {
19 |     "atom": ">=1.0.0 <2.0.0"
20 |   },
21 |   "dependencies": {}
22 | }
23 | 


--------------------------------------------------------------------------------