icelab · makenosound · Apr 6, 2017 · Apr 5, 2017 · Apr 6, 2017 · Apr 6, 2017
diff --git a/README.md b/README.md
@@ -120,6 +120,31 @@ This would append the theoretical `awesome-loader` loader to the end of the pipe
 * ES6
 * Linting
 * Babel compilation
+* Bundle splitting
+* Top-level entry point `import` resolution
+
+#### Code linting and formatting
+
+JS code in your source paths will be linted using [eslint](http://eslint.org). We use the base config from create-react-app, which is released as a separate package called [eslint-config-react-app](https://www.npmjs.com/package/eslint-config-react-app), and then add some small adjustments in each environment:
+
+* In development, we include [prettier](https://github.com/prettier/prettier) to enforce a code style across our projects. It’s recommended you [add integration with your editor](https://github.com/prettier/prettier#editor-integration) in some way so that you don’t get annoyed by all the errors. Ideally this formatting happens for us as part of the build, but this feature is disabled at the moment due to [an issue with Visual Studio Code](https://github.com/Microsoft/vscode/issues/2908).
+* In production, we do not include prettier so it will not break your builds. We do however add a `no-debugger` rule to ensure that you can’t push production code that includes debugging lines.
+
+If you’re using an eslint plugin/extension in your editor, you’ll need to configure it to read the `icelab-assets` configuration as its hidden within the package. For Visual Studio code you can add a workspace-specific configuration that looks like this:
+
+```js
+// .vscode/settings.json
+// Place your settings in this file to overwrite default and user settings.
+{
+  // Custom eslint config
+	"eslint.options": {
+    "configFile": "./node_modules/icelab-assets/eslintrc"
+  },
+  "eslint.nodePath":  "./node_modules/icelab-assets/node_modules"
+}
+```
+
+Once that’s integrated, you should be able to use eslint’s "Fix all auto-fixable problems" command to fix and format your code with prettier.
 
 ## Things to note
 

diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
@@ -112,23 +112,25 @@ module.exports = {
       { parser: { requireEnsure: false } },
       // First, run the linter.
       // It's important to do this before Babel processes the JS.
-      // {
-      //   test: /\.(js|jsx)$/,
-      //   enforce: 'pre',
-      //   use: [
-      //     {
-      //       // @remove-on-eject-begin
-      //       // Point ESLint to our predefined config.
-      //       options: {
-      //         configFile: path.join(__dirname, '../eslintrc'),
-      //         useEslintrc: false,
-      //       },
-      //       // @remove-on-eject-end
-      //       loader: 'eslint-loader',
-      //     },
-      //   ],
-      //   include: paths.appSrc,
-      // },
+      {
+        test: /\.(js|jsx)$/,
+        enforce: 'pre',
+        use: [
+          {
+            // Point ESLint to our predefined config.
+            options: {
+              configFile: path.join(__dirname, '../eslintrc'),
+              useEslintrc: false,
+              // Disabling autofix until this issue is resolved in VS Code as
+              // changing the underlying files breaks the undo stack
+              // https://github.com/Microsoft/vscode/issues/2908
+              // fix: true,
+            },
+            loader: 'eslint-loader',
+          },
+        ],
+        include: paths.appSrc,
+      },
       // ** ADDING/UPDATING LOADERS **
       // The "url" loader handles all assets unless explicitly excluded.
       // The `exclude` list *must* be updated with every change to loader extensions.

diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js
@@ -98,25 +98,23 @@ module.exports = {
       { parser: { requireEnsure: false } },
       // First, run the linter.
       // It's important to do this before Babel processes the JS.
-      // {
-      //   test: /\.(js|jsx)$/,
-      //   enforce: 'pre',
-      //   use: [
-      //     {
-      //       // @remove-on-eject-begin
-      //       // Point ESLint to our predefined config.
-      //       options: {
-      //         // TODO: consider separate config for production,
-      //         // e.g. to enable no-console and no-debugger only in production.
-      //         configFile: path.join(__dirname, '../eslintrc'),
-      //         useEslintrc: false,
-      //       },
-      //       // @remove-on-eject-end
-      //       loader: 'eslint-loader',
-      //     },
-      //   ],
-      //   include: paths.appSrc,
-      // },
+      {
+        test: /\.(js|jsx)$/,
+        enforce: 'pre',
+        use: [
+          {
+            // Point ESLint to our predefined config.
+            options: {
+              // Separate config for production to enable no-debugger only in
+              // production.
+              configFile: path.join(__dirname, '../eslintrc.prod'),
+              useEslintrc: false,
+            },
+            loader: 'eslint-loader',
+          },
+        ],
+        include: paths.appSrc,
+      },
       // ** ADDING/UPDATING LOADERS **
       // The "url" loader handles all assets unless explicitly excluded.
       // The `exclude` list *must* be updated with every change to loader extensions.

diff --git a/eslintrc b/eslintrc
@@ -0,0 +1,9 @@
+{
+  "extends": "react-app",
+  "plugins": [
+    "prettier"
+  ],
+  "rules": {
+    "prettier/prettier": "error"
+  }
+}
diff --git a/eslintrc.prod b/eslintrc.prod
@@ -0,0 +1,6 @@
+{
+  "extends": "react-app",
+  rules: {
+    "no-debugger": "error"
+  }
+}
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "babel-core": "^6.23.1",
+    "babel-eslint": "^7.2.1",
     "babel-jest": "^18.0.0",
     "babel-loader": "7.0.0-alpha.3",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
@@ -32,6 +33,14 @@
     "detect-port": "^1.0.1",
     "dotenv": "^2.0.0",
     "empty-dir": "^0.2.1",
+    "eslint": "^3.19.0",
+    "eslint-config-react-app": "^0.6.2",
+    "eslint-loader": "^1.7.1",
+    "eslint-plugin-flowtype": "^2.30.4",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^4.0.0",
+    "eslint-plugin-prettier": "^2.0.1",
+    "eslint-plugin-react": "^6.10.3",
     "extract-text-webpack-plugin": "^2.1.0",
     "file-loader": "^0.10.1",
     "friendly-errors-webpack-plugin": "^1.6.1",
@@ -45,6 +54,7 @@
     "postcss-cssnext": "^2.9.0",
     "postcss-import": "^9.1.0",
     "postcss-loader": "1.3.3",
+    "prettier": "^0.22.0",
     "promise": "7.1.1",
     "react-dev-utils": "^0.5.2",
     "style-loader": "0.13.2",

diff --git a/template/entry.js b/template/entry.js
@@ -1,11 +1,11 @@
 // Import the base CSS, basically our entry point for CSS. If your entry
 // doesn't require CSS, you can comment this out or remove it.
-import './index.css'
+import "./index.css";
 
 // Import the base JS, basically our entry point for JS. If your entry
 // doesn't require JS, you can comment this out or remove it.
-import './index.js'
+import "./index.js";
 
 // This will inspect all subdirectories from the context (this file) and
 // require files matching the regex.
-require.context('.', true, /^\.\/.*\.(jpe?g|png|gif|svg)$/)
+require.context(".", true, /^\.\/.*\.(jpe?g|png|gif|svg)$/);
diff --git a/template/index.js b/template/index.js
@@ -1,3 +1,3 @@
 /**
  * Start writing JS!
- */
+ */