Merge branch 'develop' into add-markdown-linting

Author: Jeremy Wiebe

CHANGELOG

@@ -1,6 +1,7 @@
 Pending Release
     - Remove `variable-for-property` rule from sass-lint
     - Adds markdown linting via `lint-md` script
+    - Add ESLint and Atom Text integration how-to doc
 
 2.6.0
     - Remove `variable-for-property` rule from sass-lint [#126](https://github.com/mobify/mobify-code-style/pull/126)

README.md

@@ -89,6 +89,10 @@ Make sure to install the following NPM modules:
  - `eslint-import-resolver-webpack`
  - `eslint-plugin-react` (for React/JSX linting only)
 
+## ESLint and Atom
+
+Find out how to integrate [ESLint and Atom Text](./javascript/atom.md).
+
 ## CSS
 Our Client Services team's [CSS Style Guide](/css/Readme.md). Written with a lot of tender care by @kpeatt and @jeffkamo.
 

assets/atom-linter-settings.png

@@ -4,6 +4,10 @@ This folder includes a default ESLint configuration, `mobify-es5.yml`, compatibl
 
 # General
 
+## ESLint and Atom
+
+Find out how to integrate [ESLint and Atom Text](../javascript/atom.md).
+
 ##Comments
 
 Please comment code extensively. More comments are always better than fewer comments. Comments should describe the why of your code - not what the code is doing:

assets/linting-in-atom.gif

@@ -14,6 +14,14 @@ JSX accessibility linting is available with the `mobify-es6-react-a11y.yml` conf
 - `eslint-plugin-react`
 - `eslint-plugin-jsx-a11y`
 
+## ESLint and Atom
+
+Find out how to integrate [ESLint and Atom Text](../javascript/atom.md).
+
+*NOTE*: While these instructions use the code style's ES5 config file, an ES6 file may be alternatively
+substituted. Mobify's ES6-compatible projects will have their own `.eslintrc.yml` config file, which
+will be enforced by Atom and `linter-eslint`.
+
 ## Global Names and Environments
 
 By default, the lint configuration only assumes the standard set of

css/class-naming-conventions/readme.md

@@ -6,6 +6,11 @@ with ESLint 1.x or lower.**
 **For new projects or ESLint 2.x and up, use the contents of the `mobify-code-style/es5` directory**
 
 # General
+
+## ESLint and Atom
+
+Find out how to integrate [ESLint and Atom Text](./atom.md).
+
 ##Comments
 
 Please comment code extensively. More comments are always better than fewer comments. Comments should describe the why of your code - not what the code is doing:

es5/README.md

@@ -0,0 +1,34 @@
+# ESLint and Atom Text
+
+![Linting in Atom](../assets/linting-in-atom.gif "Linting in Atom")
+
+Instead of relying on your project's linting tasks (`grunt lint` or `npm run lint`), wouldn't it be better to have Atom proactively linting your JS as you compose it, using Mobify's code style as a ruleset? Here's how!
+
+## Prerequisites
+
+1. Install Node.js and NPM with [NVM](https://github.com/creationix/nvm)
+1. Install eslint and Mobify's code style globally:
+```bash
+npm install -g eslint
+npm install -g mobify-code-style
+```
+
+## Instructions for Atom
+
+1. Install the [linter package](https://atom.io/packages/linter)
+1. Install the [linter-eslint package](https://atom.io/packages/linter-eslint)
+1. Open your Atom package settings for `linter-eslint` and ensure:
+    * Your `ESLint Path` is set
+        * Find your ESLint path by running `which eslint` in a terminal
+    * Your `.eslintrc Path` is set to the ES5 config file from Mobify's code style
+        * This config is the fallback for when an existing ESLint config does not exist in the current project
+    * Your `Global Node Installation Path` is set
+        * Find this by running `npm get prefix` in a terminal
+
+Your Atom settings will look something like this:
+![Atom Linter Settings](../assets/atom-linter-settings.png "Atom Linter Settings")
+
+Now restart Atom and open a JS file to see it in action.
+
+*Tip*: When working on a project that does not need to conform to this code style,
+toggle the linter off/on by opening the command palette with <kbd>shift</kbd>+<kbd>⌘</kbd>+<kbd>p</kbd> (Mac) or <kbd>shift</kbd>+<kbd>ctrl</kbd>+<kbd>p</kbd> (PC) and type + select `Linter: Toggle`