style: introduce prettier (#1647)

Author: hiroppy

.eslintrc

@@ -1,5 +1,5 @@
 {
-  "extends": "webpack",
+  "extends": ["webpack", "prettier"],
   "globals": {
     "document": true,
     "window": true
@@ -12,7 +12,7 @@
     "consistent-return": "off",
     "no-param-reassign": "off",
     "no-underscore-dangle": "off",
-    "prefer-destructuring": ["error", {"object": false, "array": false}],
+    "prefer-destructuring": ["error", { "object": false, "array": false }],
     "prefer-rest-params": "off",
     "strict": ["error", "safe"]
   }

.github/ISSUE_TEMPLATE.md

@@ -6,11 +6,11 @@
   General questions, how-to questions, and support requests will be closed.
 -->
 
-* Operating System:
-* Node Version:
-* NPM Version:
-* webpack Version:
-* webpack-dev-server Version:
+- Operating System:
+- Node Version:
+- NPM Version:
+- webpack Version:
+- webpack-dev-server Version:
 
 <!--
   Please place an x, no spaces, in all [ ] that apply
@@ -37,11 +37,11 @@
 -->
 
 ```js
-  // webpack.config.js
+// webpack.config.js
 ```
 
 ```js
-  // additional code, remove if not needed.
+// additional code, remove if not needed.
 ```
 
 ### Expected Behavior

.prettierignore

@@ -0,0 +1,3 @@
+client-src/live/web_modules/
+node_modules
+CHANGELOG.md

.prettierrc.js

@@ -0,0 +1,15 @@
+module.exports = {
+  printWidth: 80,
+  tabWidth: 2,
+  singleQuote: true,
+  trailingComma: 'es5',
+  arrowParens: 'always',
+  overrides: [
+    {
+      files: '*.json',
+      options: {
+        useTabs: false,
+      },
+    },
+  ],
+};

CONTRIBUTING.md

@@ -39,19 +39,18 @@ Pull requests often need some real-world testing.
 
 1. In your `package.json`, change the line with `webpack-dev-server` to:
 
-  ```json
-  "webpack-dev-server": "github:webpack/webpack-dev-server#pull/<ID>/head"
-  ```
+```json
+"webpack-dev-server": "github:webpack/webpack-dev-server#pull/<ID>/head"
+```
 
-  `<ID>` is the ID of the pull request.
+`<ID>` is the ID of the pull request.
 
 2. Run `npm install`.
 
 3. Go to the `webpack-dev-server` module (`cd node_modules/webpack-dev-server`), and run `npm run prepublish`.
 
 The pull request is now ready to be tested.
 
+---
 
-------------
-
-*Many thanks to [create-react-app](https://github.com/facebookincubator/create-react-app/blob/master/CONTRIBUTING.md) for the inspiration with this contributing guide*
+_Many thanks to [create-react-app](https://github.com/facebookincubator/create-react-app/blob/master/CONTRIBUTING.md) for the inspiration with this contributing guide_

README.md

@@ -54,6 +54,7 @@ The easiest way to use it is with the CLI. In the directory where your
 ```console
 node_modules/.bin/webpack-dev-server
 ```
+
 _**Note**: Many CLI options are available with `webpack-dev-server`. Explore this [link](https://webpack.js.org/configuration/dev-server/)._
 
 ### With NPM Scripts
@@ -154,25 +155,18 @@ This project is heavily inspired by [peerigon/nof5](https://github.com/peerigon/
 
 #### [MIT](./LICENSE)
 
-
 [npm]: https://img.shields.io/npm/v/webpack-dev-server.svg
 [npm-url]: https://npmjs.com/package/webpack-dev-server
-
 [node]: https://img.shields.io/node/v/webpack-dev-server.svg
 [node-url]: https://nodejs.org
-
 [deps]: https://david-dm.org/webpack/webpack-dev-server.svg
 [deps-url]: https://david-dm.org/webpack/webpack-dev-server
-
 [tests]: http://img.shields.io/travis/webpack/webpack-dev-server.svg
 [tests-url]: https://travis-ci.org/webpack/webpack-dev-server
-
 [cover]: https://codecov.io/gh/webpack/webpack-dev-server/branch/master/graph/badge.svg
 [cover-url]: https://codecov.io/gh/webpack/webpack-dev-server
-
 [chat]: https://badges.gitter.im/webpack/webpack.svg
 [chat-url]: https://gitter.im/webpack/webpack
-
 [docs-url]: https://webpack.js.org/configuration/dev-server/#devserver
 [hash-url]: https://twitter.com/search?q=webpack
 [middleware-url]: https://github.com/webpack/webpack-dev-middleware

bin/options.js

@@ -24,7 +24,8 @@ const options = {
   inline: {
     type: 'boolean',
     default: true,
-    describe: 'Inline mode (set to false to disable including client scripts like livereload)'
+    describe:
+      'Inline mode (set to false to disable including client scripts like livereload)'
   },
   progress: {
     type: 'boolean',
@@ -158,7 +159,8 @@ const options = {
   },
   'allowed-hosts': {
     type: 'string',
-    describe: 'A comma-delimited string of hosts that are allowed to access the dev server',
+    describe:
+      'A comma-delimited string of hosts that are allowed to access the dev server',
     group: CONNECTION_GROUP
   }
 };

bin/utils.js

@@ -10,15 +10,15 @@
 const open = require('opn');
 
 const colors = {
-  info (useColor, msg) {
+  info(useColor, msg) {
     if (useColor) {
       // Make text blue and bold, so it *pops*
       return `\u001b[1m\u001b[34m${msg}\u001b[39m\u001b[22m`;
     }
 
     return msg;
   },
-  error (useColor, msg) {
+  error(useColor, msg) {
     if (useColor) {
       // Make text red and bold, so it *pops*
       return `\u001b[1m\u001b[31m${msg}\u001b[39m\u001b[22m`;
@@ -33,12 +33,14 @@ const defaultTo = (value, def) => {
   return value == null ? def : value;
 };
 
-function version () {
-  return `webpack-dev-server ${require('../package.json').version}\n` +
-  `webpack ${require('webpack/package.json').version}`;
+function version() {
+  return (
+    `webpack-dev-server ${require('../package.json').version}\n` +
+    `webpack ${require('webpack/package.json').version}`
+  );
 }
 
-function status (uri, options, log, useColor) {
+function status(uri, options, log, useColor) {
   const contentBase = Array.isArray(options.contentBase)
     ? options.contentBase.join(', ')
     : options.contentBase;
@@ -55,13 +57,19 @@ function status (uri, options, log, useColor) {
 
   if (contentBase) {
     log.info(
-      `Content not from webpack is served from ${colors.info(useColor, contentBase)}`
+      `Content not from webpack is served from ${colors.info(
+        useColor,
+        contentBase
+      )}`
     );
   }
 
   if (options.historyApiFallback) {
     log.info(
-      `404s will fallback to ${colors.info(useColor, options.historyApiFallback.index || '/index.html')}`
+      `404s will fallback to ${colors.info(
+        useColor,
+        options.historyApiFallback.index || '/index.html'
+      )}`
     );
   }
 
@@ -88,14 +96,14 @@ function status (uri, options, log, useColor) {
   }
 }
 
-function bonjour (options) {
+function bonjour(options) {
   const bonjour = require('bonjour')();
 
   bonjour.publish({
     name: 'Webpack Dev Server',
     port: options.port,
     type: 'http',
-    subtypes: [ 'webpack' ]
+    subtypes: ['webpack']
   });
 
   process.on('exit', () => {

bin/webpack-dev-server.js

@@ -27,13 +27,7 @@ const webpack = require('webpack');
 
 const options = require('./options');
 
-const {
-  colors,
-  status,
-  version,
-  bonjour,
-  defaultTo
-} = require('./utils');
+const { colors, status, version, bonjour, defaultTo } = require('./utils');
 
 const Server = require('../lib/Server');
 
@@ -43,7 +37,7 @@ const createLogger = require('../lib/utils/createLogger');
 
 let server;
 
-const signals = [ 'SIGINT', 'SIGTERM' ];
+const signals = ['SIGINT', 'SIGTERM'];
 
 signals.forEach((signal) => {
   process.on(signal, () => {
@@ -70,7 +64,9 @@ try {
   require.resolve('webpack-cli');
 } catch (err) {
   console.error('The CLI moved into a separate package: webpack-cli');
-  console.error('Please install \'webpack-cli\' in addition to webpack itself to use the CLI');
+  console.error(
+    "Please install 'webpack-cli' in addition to webpack itself to use the CLI"
+  );
   console.error('-> When using npm: npm i -D webpack-cli');
   console.error('-> When using yarn: yarn add -D webpack-cli');
 
@@ -97,7 +93,7 @@ const config = require('webpack-cli/bin/convert-argv')(yargs, argv, {
 // we should use portfinder.
 const DEFAULT_PORT = 8080;
 
-function processOptions (config) {
+function processOptions(config) {
   // processOptions {Promise}
   if (typeof config.then === 'function') {
     config.then(processOptions).catch((err) => {
@@ -109,9 +105,7 @@ function processOptions (config) {
     return;
   }
 
-  const firstWpOpt = Array.isArray(config)
-    ? config[0]
-    : config;
+  const firstWpOpt = Array.isArray(config) ? config[0] : config;
 
   const options = config.devServer || firstWpOpt.devServer || {};
 
@@ -141,7 +135,8 @@ function processOptions (config) {
 
   if (!options.publicPath) {
     // eslint-disable-next-line
-    options.publicPath = firstWpOpt.output && firstWpOpt.output.publicPath || '';
+    options.publicPath =
+      (firstWpOpt.output && firstWpOpt.output.publicPath) || '';
 
     if (
       !/^(https?:)?\/\//.test(options.publicPath) &&
@@ -214,11 +209,7 @@ function processOptions (config) {
     typeof options.stats === 'object' &&
     typeof options.stats.colors === 'undefined'
   ) {
-    options.stats = Object.assign(
-      {},
-      options.stats,
-      { colors: argv.color }
-    );
+    options.stats = Object.assign({}, options.stats, { colors: argv.color });
   }
 
   if (argv.lazy) {
@@ -277,9 +268,10 @@ function processOptions (config) {
   // that wouldn't throw errors. E.g. both argv.port and options.port
   // were specified, but since argv.port is 8080, options.port will be
   // tried first instead.
-  options.port = argv.port === DEFAULT_PORT
-    ? defaultTo(options.port, argv.port)
-    : defaultTo(argv.port, options.port);
+  options.port =
+    argv.port === DEFAULT_PORT
+      ? defaultTo(options.port, argv.port)
+      : defaultTo(argv.port, options.port);
 
   if (options.port != null) {
     startDevServer(config, options);
@@ -325,7 +317,10 @@ function startDevServer(config, options) {
     }).apply(compiler);
   }
 
-  const suffix = (options.inline !== false || options.lazy === true ? '/' : '/webpack-dev-server/');
+  const suffix =
+    options.inline !== false || options.lazy === true
+      ? '/'
+      : '/webpack-dev-server/';
 
   try {
     server = new Server(compiler, options, log);