Added linters, reorganized configuration

Author: Jakub Sowinski

README.md

@@ -8,25 +8,40 @@ Run
 npm install
 ```
 Your app is now installed and ready to go.
+
 #### Build
 Run
 ```
 npm run build
 ```
 Result of your build will be in ``build`` directory.
+
 #### Live server
 Run
 ```
 npm start
 ```
 Your live server is available at ``http://localhost:3000/``.
+
 #### Tests
 Run
 ```
 npm run test
 ```
 Tests report will be displayed in console.
 
+#### Linting
+In order to run general linter, use
+```
+npm run lint
+```
+In order to run specific linters, use
+```
+npm run lint:ts
+npm run lint:css
+```
+Linters report will be displayed in console.
+
 ## Changelist:
 #### v.0.1
 ##### v0.1.1
@@ -48,13 +63,19 @@ Tests report will be displayed in console.
 * React-Bootstrap
 * SCSS processing
 
-#### to be added
-* SCSSLint
+##### v0.1.3
+* Awesome TypeScript Loader
 * TSLint
-* JSX-Loader
+* SCSSLint
+* basic linting rules
+
+#### to be added
 * Express
 * IE9 support
+* absolute import
 * sophisticated HMR
+* sophisticated linting rules
+* source maps
 
 #### to be considered
 * Redux-Form

app/containers/Home/style.scss

@@ -1,5 +1,7 @@
 .entry {
-  h1, small, p {
+  h1,
+  small,
+  p {
     color: blue;
   }
-}
+}

config/jestconfig.json

@@ -0,0 +1,11 @@
+{
+  "transform": {
+    ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
+  },
+  "testRegex": "tests/.*\\.test\\.(ts|tsx|js)$",
+  "moduleFileExtensions": [
+    "ts",
+    "tsx",
+    "js"
+  ]
+}

config/stylelint.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+	extends: "stylelint-config-standard"
+};

tsconfig.json renamed to config/tsconfig.json

@@ -1,13 +1,17 @@
 {
   "compilerOptions": {
-    "target": "es6",
+    "target": "es5",
     "module": "commonjs",
     "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
     "jsx": "react"
   },
+  "include": [
+    "app/**/*"
+  ],
   "exclude": [
-    "node_modules"
+    "node_modules",
+    "**/*.test.ts*"
   ]
 }

config/tslintconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["tslint:recommended", "tslint-eslint-rules", "tslint-react"]
+}

config/webpack.base.config.js

@@ -1,16 +1,3 @@
-
-
-module.exports = {
-	// ...
-	module: {
-		loaders: [
-			// ...
-
-		]
-	},
-
-}
-
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var path = require('path');
 
@@ -29,10 +16,9 @@ module.exports = {
 			'node_modules'
 		],
 		extensions: [
-			'.js',
-			'.jsx',
 			'.ts',
-			'.tsx'
+			'.tsx',
+			'.js'
 		]
 	},
 	module: {
@@ -42,7 +28,7 @@ module.exports = {
 				exclude: /node_modules/,
 				loaders: [
 					'babel-loader',
-					'ts-loader'
+					'awesome-typescript-loader?configFileName=config/tsconfig.json'
 				]
 			},
 			{

config/webpack.dev.config.js

@@ -1,15 +1,14 @@
 var webpack = require('webpack');
-var baseConfig = require('./webpack.base.config');
-var config = baseConfig;
+var config = require('./webpack.base.config');
 
 config.entry = [
 	'react-hot-loader/patch',
 	'webpack-dev-server/client?http://localhost:3000',
 	'webpack/hot/only-dev-server',
-	...baseConfig.entry || []
+	...config.entry || []
 ];
 
-config.module.loaders = baseConfig.module.loaders.map(function(loader) {
+config.module.loaders = config.module.loaders.map(function(loader) {
 	if (loader.test === /\.tsx?$/) {
 		loader.loaders = [
 			'react-hot-loader/webpack',
@@ -21,7 +20,7 @@ config.module.loaders = baseConfig.module.loaders.map(function(loader) {
 
 config.plugins = [
 	new webpack.HotModuleReplacementPlugin(),
-	...baseConfig.plugins || []
+	...config.plugins || []
 ];
 
 module.exports = config;

package.json

@@ -12,9 +12,13 @@
   "author": "soofka",
   "license": "UNLICENSED",
   "scripts": {
-    "build": "webpack --config ./config/webpack.prod.config.js --color -p",
-    "start": "node scripts/server.js",
-    "test": "jest"
+    "build": "webpack --config ./config/webpack.prod.config.js --color --optimize-minimize",
+    "build:dev": "webpack --config ./config/webpack.dev.config.js --color",
+    "lint": "npm run lint:ts && npm run lint:css",
+    "lint:ts": "tslint ./app/**/*.ts* --config ./config/tslintconfig.json",
+    "lint:css": "stylelint ./app/**/*.*css --config ./config/stylelint.config.js",
+    "start": "node ./scripts/server.js",
+    "test": "jest --config ./config/jestconfig.json"
   },
   "dependencies": {
     "immutable": "^3.8.1",
@@ -33,6 +37,7 @@
     "whatwg-fetch": "^2.0.2"
   },
   "devDependencies": {
+    "@types/core-js": "^0.9.35",
     "@types/immutable": "^3.8.7",
     "@types/jest": "^18.1.1",
     "@types/node": "^7.0.5",
@@ -44,6 +49,7 @@
     "@types/redux": "^3.6.0",
     "@types/redux-immutable": "^3.0.33",
     "@types/whatwg-fetch": "0.0.33",
+    "awesome-typescript-loader": "^3.0.7",
     "babel-core": "^6.22.1",
     "babel-jest": "^18.0.0",
     "babel-loader": "^6.2.10",
@@ -63,20 +69,13 @@
     "react-hot-loader": "^3.0.0-beta.6",
     "react-test-renderer": "^15.4.2",
     "sass-loader": "^6.0.2",
+    "stylelint": "^7.9.0",
+    "stylelint-config-standard": "^16.0.0",
     "ts-jest": "^18.0.3",
-    "ts-loader": "^2.0.0",
+    "tslint": "^4.4.2",
+    "tslint-eslint-rules": "^3.4.0",
+    "tslint-react": "^2.4.0",
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.3.0"
-  },
-  "jest": {
-    "transform": {
-      ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
-    },
-    "testRegex": "tests/.*\\.test\\.(ts|tsx|js)$",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js"
-    ]
   }
 }

scripts/server.js

@@ -1,9 +1,9 @@
 var webpack = require('webpack');
 var webpackDevServer = require('webpack-dev-server');
-var devConfig = require('../config/webpack.dev.config');
+var config = require('../config/webpack.dev.config');
 
-new webpackDevServer(webpack(devConfig), {
-	publicPath: devConfig.output.publicPath,
+new webpackDevServer(webpack(config), {
+	publicPath: config.output.publicPath,
 	hot: true,
 	historyApiFallback: true
 }).listen(3000, 'localhost', function (err) {