From 5b28dceef4d605f7a22eae31b78a7cdf817ac135 Mon Sep 17 00:00:00 2001 From: Graham McGregor Date: Sun, 29 Oct 2017 16:49:16 -0400 Subject: [PATCH 1/6] Configure git to ignore build output --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index d906f01..5a7321b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ .DS_Store node_modules bower_components +dist/ npm-debug.log From f5bde2fd5e2ff821a5f4c4be86d662492de7ac41 Mon Sep 17 00:00:00 2001 From: Graham McGregor Date: Sun, 29 Oct 2017 16:28:02 -0400 Subject: [PATCH 2/6] Remove relative bin path in npm scripts When using npm scripts, npm can find binaries in ./node_modules/.bin/ without having to explicitly reference that path. --- package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index bf2ea7d..a2f0236 100644 --- a/package.json +++ b/package.json @@ -67,9 +67,9 @@ "scripts": { "start": "node server.js", "build": - "BABEL_ENV=production ./node_modules/.bin/webpack --config webpack.config.production.js && node pre-render.js", - "lint": "./node_modules/.bin/eslint .", - "test": "node_modules/karma/bin/karma start --single-run --browsers PhantomJS", - "pretty": "node_modules/.bin/prettier --write --config .prettierrc \"app/scripts/**/*.js\"" + "BABEL_ENV=production webpack --config webpack.config.production.js && node pre-render.js", + "lint": "eslint .", + "test": "karma start --single-run --browsers PhantomJS", + "pretty": "prettier --write --config .prettierrc \"app/scripts/**/*.js\"" } } From 6968cc62e120962a09156e97bc598a2389585e72 Mon Sep 17 00:00:00 2001 From: Graham McGregor Date: Sun, 29 Oct 2017 13:32:56 -0400 Subject: [PATCH 3/6] Remove explicit `--config` for prettier Since we're using the default config file name, it should be found without needing to specify. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a2f0236..fbc463b 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,6 @@ "BABEL_ENV=production webpack --config webpack.config.production.js && node pre-render.js", "lint": "eslint .", "test": "karma start --single-run --browsers PhantomJS", - "pretty": "prettier --write --config .prettierrc \"app/scripts/**/*.js\"" + "pretty": "prettier --write \"app/scripts/**/*.js\"" } } From deda513aed21d0fa17d7d002fab6e8a2164c46d9 Mon Sep 17 00:00:00 2001 From: Graham McGregor Date: Sun, 29 Oct 2017 13:32:56 -0400 Subject: [PATCH 4/6] Run prettier against all the filetypes it can --- .prettierignore | 6 ++++++ package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 .prettierignore diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..840b50d --- /dev/null +++ b/.prettierignore @@ -0,0 +1,6 @@ +node_modules/ +bower_components/ +dist/ +package-lock.json +# npm install will reformat package.json which can conflict with prettier +package.json diff --git a/package.json b/package.json index fbc463b..250c15a 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,6 @@ "BABEL_ENV=production webpack --config webpack.config.production.js && node pre-render.js", "lint": "eslint .", "test": "karma start --single-run --browsers PhantomJS", - "pretty": "prettier --write \"app/scripts/**/*.js\"" + "pretty": "prettier --write '**/*.{js,jsx,ts,css,less,scss,json}'" } } From bb6cdc92648d1919c48e72ecb7aa52ad2bf5f22e Mon Sep 17 00:00:00 2001 From: Graham McGregor Date: Sun, 29 Oct 2017 13:32:56 -0400 Subject: [PATCH 5/6] Check prettier status when linting We want to ensure that all code conforms to prettier. Ideally contributors will have the prettier plugin for their editor to autoformat-on-save and they won't have to do anything manually. Also, remove eslint-prettier plugin since it's not being used anymore. --- .eslintrc | 1 - package.json | 3 +-- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/.eslintrc b/.eslintrc index 932540d..78c2f08 100644 --- a/.eslintrc +++ b/.eslintrc @@ -112,7 +112,6 @@ "no-plusplus": 0 }, "plugins": [ - "prettier", "react" ], "extends": ["plugin:react/recommended"] diff --git a/package.json b/package.json index 250c15a..4954165 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,6 @@ "babel-preset-stage-0": "^6.3.13", "css-loader": "^0.23.1", "eslint": "^3.14.1", - "eslint-plugin-prettier": "^2.3.1", "eslint-plugin-react": "^7.4.0", "font-awesome-webpack": "0.0.4", "jasmine-core": "^2.4.1", @@ -68,7 +67,7 @@ "start": "node server.js", "build": "BABEL_ENV=production webpack --config webpack.config.production.js && node pre-render.js", - "lint": "eslint .", + "lint": "eslint . && prettier --list-different '**/*.{js,jsx,ts,css,less,scss,json}'", "test": "karma start --single-run --browsers PhantomJS", "pretty": "prettier --write '**/*.{js,jsx,ts,css,less,scss,json}'" } From 33f16c5c152238088f0d2a1971bfd0432edce9d4 Mon Sep 17 00:00:00 2001 From: Graham McGregor Date: Sun, 29 Oct 2017 16:26:10 -0400 Subject: [PATCH 6/6] Autoformat code using prettier --- app/styles/index.less | 9 +++------ karma.conf.js | 8 ++++---- package.json | 3 +-- server.js | 2 +- webpack.config.js | 26 +++++++++++++++----------- webpack.config.production.js | 28 ++++++++++++++-------------- 6 files changed, 38 insertions(+), 38 deletions(-) diff --git a/app/styles/index.less b/app/styles/index.less index 762a58c..ac603c8 100644 --- a/app/styles/index.less +++ b/app/styles/index.less @@ -56,10 +56,8 @@ footer { .form-control:focus { border-color: #e0e0e0; outline: 0; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), - 0 0 8px rgba(102, 175, 233, 0.6); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), - 0 0 8px rgba(224, 224, 224, 0.6); + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(224, 224, 224, 0.6); } .btn, @@ -231,8 +229,7 @@ li.modeNavItem.active a { } .transition { - transition: max-height 0.4s ease, height 0.4s ease, margin 0.4s ease, - opacity 0.75s ease; + transition: max-height 0.4s ease, height 0.4s ease, margin 0.4s ease, opacity 0.75s ease; opacity: 1; overflow: hidden; } diff --git a/karma.conf.js b/karma.conf.js index a6a3f15..4b72538 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -20,18 +20,18 @@ module.exports = function(config) { // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor preprocessors: { // add webpack as preprocessor - "scripts/spec/*.js": ["webpack", "sourcemap"] + "scripts/spec/*.js": ["webpack", "sourcemap"], }, webpack: { devtool: "inline-source-map", - module: webpackConfig.module + module: webpackConfig.module, }, webpackMiddleware: { // webpack-dev-middleware configuration // i. e. - noInfo: true + noInfo: true, }, // test results reporter to use @@ -58,6 +58,6 @@ module.exports = function(config) { // Continuous Integration mode // if true, Karma captures browsers, runs the tests and exits - singleRun: false + singleRun: false, }); }; diff --git a/package.json b/package.json index 4954165..c408942 100644 --- a/package.json +++ b/package.json @@ -65,8 +65,7 @@ }, "scripts": { "start": "node server.js", - "build": - "BABEL_ENV=production webpack --config webpack.config.production.js && node pre-render.js", + "build": "BABEL_ENV=production webpack --config webpack.config.production.js && node pre-render.js", "lint": "eslint . && prettier --list-different '**/*.{js,jsx,ts,css,less,scss,json}'", "test": "karma start --single-run --browsers PhantomJS", "pretty": "prettier --write '**/*.{js,jsx,ts,css,less,scss,json}'" diff --git a/server.js b/server.js index 44ad718..73a6baf 100644 --- a/server.js +++ b/server.js @@ -8,7 +8,7 @@ new WebpackDevServer(webpack(config), { publicPath: config.output.publicPath, contentBase: "./app/", hot: true, - historyApiFallback: true + historyApiFallback: true, }).listen(port, "localhost", function(err) { if (err) { console.log(err); diff --git a/webpack.config.js b/webpack.config.js index 9c0fe0d..e72bdc4 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -47,17 +47,21 @@ var port = 1234; module.exports = { port: port, - entry: ["webpack-dev-server/client?http://localhost:" + port, "webpack/hot/dev-server", "./app/scripts/index.js"], + entry: [ + "webpack-dev-server/client?http://localhost:" + port, + "webpack/hot/dev-server", + "./app/scripts/index.js", + ], output: { path: path.resolve(__dirname, "build"), filename: "bundle.js", - publicPath: "/" + publicPath: "/", }, resolve: { - extensions: ["", ".js"] + extensions: ["", ".js"], }, resolveLoader: { - root: path.join(__dirname, "node_modules") + root: path.join(__dirname, "node_modules"), }, devtool: "inline-source-map", plugins: [new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin()], @@ -66,21 +70,21 @@ module.exports = { { test: /\.jsx?$/, loaders: ["babel"], - include: path.join(__dirname, "app", "scripts") + include: path.join(__dirname, "app", "scripts"), }, { test: /\.less$/, - loader: "style!css!less" + loader: "style!css!less", }, { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, - loader: "url-loader?limit=10000&minetype=application/font-woff" + loader: "url-loader?limit=10000&minetype=application/font-woff", }, { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, - loader: "file-loader" + loader: "file-loader", }, - { test: /\.html/, loader: "file?name=[name].[ext]" } - ] - } + { test: /\.html/, loader: "file?name=[name].[ext]" }, + ], + }, }; diff --git a/webpack.config.production.js b/webpack.config.production.js index 0a2061c..acdad22 100644 --- a/webpack.config.production.js +++ b/webpack.config.production.js @@ -47,45 +47,45 @@ module.exports = { output: { path: path.join(__dirname, "dist/Piano-Trainer"), filename: "bundle.js", - publicPath: "./" + publicPath: "./", }, resolve: { - extensions: ["", ".js"] + extensions: ["", ".js"], }, resolveLoader: { - root: path.join(__dirname, "node_modules") + root: path.join(__dirname, "node_modules"), }, devtool: "source-map", plugins: [ new webpack.optimize.OccurenceOrderPlugin(), new webpack.DefinePlugin({ "process.env": { - NODE_ENV: JSON.stringify("production") - } + NODE_ENV: JSON.stringify("production"), + }, }), new webpack.optimize.UglifyJsPlugin({ compress: { - warnings: false - } - }) + warnings: false, + }, + }), ], module: { loaders: [ { test: /\.jsx?$/, loaders: ["babel"], - include: path.join(__dirname, "app", "scripts") + include: path.join(__dirname, "app", "scripts"), }, { test: /\.less$/, - loader: "style!css!less" + loader: "style!css!less", }, { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, - loader: "url-loader?limit=10000&minetype=application/font-woff" + loader: "url-loader?limit=10000&minetype=application/font-woff", }, { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }, - { test: /\.html/, loader: "file?name=[name].[ext]" } - ] - } + { test: /\.html/, loader: "file?name=[name].[ext]" }, + ], + }, };