docs(readme.md): Make docs and settings more user friendly

- Add brief 'How to use it' at the top of the readme
- Rename 'Usage' section to 'Detailed Usage' and add a few more details
- Move scopes outside of the 'formatOnSave' block and below other
  options as these take up a lot of room and will likely not be
  modified as frequently.
- Add that prettier-eslint runs `--fix` to the option description
- Add different, smaller demo gif

fix #207

README.md

@@ -13,11 +13,21 @@
 [![PRs Welcome][prs-badge]][prs]
 
 Atom package to format your JavaScript, Typescript, CSS, Sass, and JSON using [Prettier](https://github.com/prettier/prettier).
-Comes with powerful optional [ESLint](http://eslint.org/) integration.
+Optionally integrates with [ESLint](http://eslint.org/), [EditorConfig](http://editorconfig.org/), and [stylelint](https://stylelint.io/).
+
+## How to use it
+
+After [installation](#installation):
+- Enable 'format on save' to have prettier format your code upon saving
+- Run the command `Prettier: Format` to format your file manually
+  - Windows/Linux: <kbd>ctrl</kbd> + <kbd>alt</kbd> + <kbd>f</kbd>
+  - Mac: <kbd>control</kbd> + <kbd>option</kbd> + <kbd>f</kbd>
+- By default, formatting will use your [prettier configuration](https://prettier.io/docs/en/configuration.html).
+  Otherwise it falls back to the prettier settings you chose in this plugin.
 
 ## Demo
 
-![prettier demo][prettier-demo]
+![prettier demo](prettier-demo.gif)
 
 ## Installation
 
@@ -29,18 +39,38 @@ Or go to _Settings → Install_ and search for `prettier-atom`.
 
 Make sure to restart Atom after the package is installed.
 
-## Usage
+## Detailed Usage
+
+### How to Format
 
 There are two modes you can use:
 
-* Invoke manually using the **keyboard shortcut** (if no selection, whole file is formatted): <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>F</kbd>
 * Automatically **format on save** (requires enabling in _Packages → Prettier → Toggle Format on Save_)
+* Invoke manually using the **keyboard shortcut** (if no selection, whole file is formatted): <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>F</kbd>
+
+### What Version of Prettier Gets used?
+
+By default, we use the prettier instance in your project's 'node_modules' directory.  If one isn't found, then
+we fall back to using the version that comes bundled with the prettier-atom package.
+
+### ESLint Integration
 
 If you use ESLint, check the "ESLint Integration" checkbox and \*poof\*, everything should work (we use Kent Dodds's [`prettier-eslint`][prettier-eslint] plugin under the hood).
 We will recursively search up the file tree for your `package.json` and ESLint settings, and use them when formatting.
 
 ![prettier-eslint demo][prettier-eslint-demo]
 
+### EditorConfig
+
+Support is [built into prettier](https://prettier.io/blog/2017/12/05/1.9.0.html#add-editorconfig-support-3255-https-githubcom-prettier-prettier-pull-3255-by-josephfrazier-https-githubcom-josephfrazier).  It derives prettier settings from your `.editorconfig` file and formats accordingly.
+
+### stylelint
+
+stylelint is supported via [prettier-stylelint](https://github.com/hugomrdias/prettier-stylelint).
+It derives prettier settings from your [stylelint configuration](https://stylelint.io/user-guide/configuration/) and formats accordingly.
+
+## Questions?
+
 More detailed descriptions of each option can be found in the Atom settings for this plugin.
 
 Please open a pull request or file an issue if you notice bugs or something doesn't work as it should!

dist/atomInterface/index.js

@@ -62,31 +62,31 @@ var shouldRespectEslintignore = function shouldRespectEslintignore() {
 };
 
 var getJavascriptScopes = function getJavascriptScopes() {
-  return getConfigOption('formatOnSaveOptions.javascriptScopes');
+  return getConfigOption('scopes.javascript');
 };
 
 var getTypescriptScopes = function getTypescriptScopes() {
-  return getConfigOption('formatOnSaveOptions.typescriptScopes');
+  return getConfigOption('scopes.typescript');
 };
 
 var getCssScopes = function getCssScopes() {
-  return getConfigOption('formatOnSaveOptions.cssScopes');
+  return getConfigOption('scopes.css');
 };
 
 var getJsonScopes = function getJsonScopes() {
-  return getConfigOption('formatOnSaveOptions.jsonScopes');
+  return getConfigOption('scopes.json');
 };
 
 var getGraphQlScopes = function getGraphQlScopes() {
-  return getConfigOption('formatOnSaveOptions.graphQlScopes');
+  return getConfigOption('scopes.graphQl');
 };
 
 var getMarkdownScopes = function getMarkdownScopes() {
-  return getConfigOption('formatOnSaveOptions.markdownScopes');
+  return getConfigOption('scopes.markdown');
 };
 
 var getVueScopes = function getVueScopes() {
-  return getConfigOption('formatOnSaveOptions.vueScopes');
+  return getConfigOption('scopes.vue');
 };
 
 var getAllScopes = function getAllScopes() {