TSLint setup

.eslintrc

{
  "extends": "eslint:recommended",
  "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": "module",
      "ecmaFeatures": {
          "jsx": true
      }
  },
  "rules": {
      "semi": 2
  }
}

install.bat

# typescript + tslint:
npm install eslint eslint-plugin-standard tslint-config-prettier tslint-react typescript --save-dev

#webpack: 
npm install webpack webpack-cli awesome-typescript-loader css-loader mini-css-extract-plugin node-sass sass-loader style-loader --save-dev

package.json

  "scripts": {
    "start": "webpack --watch",
    "watch": "echo \"STARTED\" && exit 1",
    "test": "echo \"STARTED\" && exit 1",
    "build": "webpack"
  },

"devDependencies": {
    "eslint": "^4.19.1",
    "eslint-plugin-standard": "^3.1.0",
    "tslint-config-prettier": "^1.12.0",
    "tslint-react": "^3.6.0",
    "typescript": "^2.8.3"
  }

tsconfig.json

{
  "compilerOptions": {
    "outDir": "tmp",
    "target": "es5",
    "module": "esnext",
    "lib": [
      "es2017",
      "dom"
    ],
    "rootDir": "src",
    "jsx": "react",
    "sourceMap": true,
    "declaration": true,
    "moduleResolution": "node",
    "noImplicitAny": false,
    "removeComments": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "types": [
      "node",
      "sharepoint"
    ],

  },
  "exclude": [
    "node_modules",
    "webpack.config.js",
    "gulpfile.js",
    "build",
    "dist",
    "tmp",
    "acceptance-tests",
    "webpack",
    "jest",
  ]
}

tsconfig.test.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "commonjs"
  }
}

tslint.json

{
  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
  "linterOptions": {
    "exclude": [
      "config/**/*.js",
      "node_modules/**/*.ts"
    ]
  }
}

webpack.config.js

const path = require('path');
const MiniCss = require('mini-css-extract-plugin');

module.exports = (env = {}, argv = {}) => {
    const config = {
        // cache: true,
        mode: argv.mode || 'development',   // we default to development when no 'mode' arg is passed
        // mode: argv.mode || 'production', // we default to production  when no 'mode' arg is passed
        entry: {
            style: path.join(__dirname, 'styles', 'style.scss'),
            'index.js': path.join(__dirname, 'scripts', 'index.ts'),
        },
        output: {
            path: path.resolve(__dirname, '../wwwroot/dist'),
            filename: 'bundle.[name]'
        },
        devtool: 'source-map',
        module: {
            rules: [
                {
                    test: /\.scss$/,
                    use: [
                        // TODO: add css minifications
                        // TODO: add source maps for the .sccs files
                        MiniCss.loader, // #3 // Extracts .css file from the .js fine
                        'css-loader',   // #2
                        'sass-loader'   // #1 
                    ]
                },
                {
                    test: /\.ts(x?)$/,
                    exclude: /(node_modules|bower_components)/,
                    use: [ 'awesome-typescript-loader' ]
                }
            ]
        },
        plugins: [
            new MiniCss({})
        ],
        resolve: {
            extensions: ['.ts', '.tsx', '.js']
        }
    }

    return config;
};