Package Exports

@codecoupler/create-cc-webpack

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@codecoupler/create-cc-webpack) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

What is this

Initializer of CodeCoupler Webpack Configuration Factory: cc-webpack

This will produce a boilerplate with all needed configuration files to exploit the full potential of cc-webpack.

All the files of the boilerplate explained:

VSCode Settings in .vscode/settings.json

{

  //Tell VSCode what type postcssrc is:
  "files.associations": {
    "*.postcssrc": "json"
  },

  //Disable built-In Validators and let only stylelint validate and fix.
  //Autofix works only with stylelint-plus extension:
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "stylelint.enable": true,
  "stylelint.autoFixOnSave": true,

  //Enable eslint with automatic fix. By default only JavaScript files
  //will be linted. This enabled linting for typescript files.
  //No fix on save with auto "files.autoSave=on":
  "eslint.enable": true,
  "files.autoSave": "off",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  //To avoid validation from any TSLint installation:
  "tslint.enable": false,

  //Enable automatic fix for prettier extension:
  "editor.formatOnSave": true

  //Unify tab sizes
  "editor.tabSize": 2,

  //Unify EOL
  "files.eol": "\n"

  //This is recommended to prevent running 2 formatting commands
  //on save for JavaScript and TypeScript files, but this will
  //disable automatic fixing at all. So this will *not* be used:
  // "[javascript]": {
  //   "editor.formatOnSave": false
  // },
  // "[javascriptreact]": {
  //   "editor.formatOnSave": false
  // },
  // "[typescript]": {
  //   "editor.formatOnSave": false
  // },
  // "[typescriptreact]": {
  //   "editor.formatOnSave": false
  // }

}

ESLint Setting in .eslintrc

{

  // Starting with the global configuration for all JavaScript Files

  "extends": [
    // set of rules which are recommended for all projects by the ESLint Team
    "eslint:recommended",
    // Enables eslint-plugin-prettier and eslint-config-prettier.
    // Turns off all rules that are unnecessary or might conflict with Prettier
    // This will display prettier errors as ESLint errors.
    // Make sure this is always the last configuration in the extends array.
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    // Using version 11 to allow dynamic imports and implement lazy loading
    "ecmaVersion": 11,
    "sourceType": "module"
  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  // Plugin with formatting rules
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  },

  // Now override special configuration for TypeScript Files

  "overrides": [
    {
      "files": ["**/*.ts"],
      // Specifies the ESLint parser that will allow ESLint to lint TypeScript code
      "parser": "@typescript-eslint/parser",
      "extends": [
        // set of rules which are recommended for all projects by the ESLint Team
        "eslint:recommended",
        // Turns off all rules that are unnecessary or might conflict with Prettier
        "plugin:@typescript-eslint/eslint-recommended",
        // Uses the recommended rules from the @typescript-eslint/eslint-plugin
        "plugin:@typescript-eslint/recommended",
        // Uses eslint-config-prettier to disable ESLint rules from
        // @typescript-eslint/eslint-plugin that would conflict with prettier
        "prettier/@typescript-eslint",
        // Enables eslint-plugin-prettier and eslint-config-prettier.
        // This will display prettier errors as ESLint errors.
        // Make sure this is always the last configuration in the extends array.
        "plugin:prettier/recommended"
      ],
      "parserOptions": {
        // Using version 11 to allow dynamic imports and implement lazy loading
        "ecmaVersion": 11,
        "sourceType": "module"
      },
      "env": {
        "browser": true,
        "node": true,
        "es6": true
      },
      "plugins": [
        // A plugin that contains a bunch of ESLint rules that are TypeScript specific
        "@typescript-eslint/eslint-plugin",
        // Plugin with formatting rules
        "prettier"
      ],
      "rules": {
        "prettier/prettier": "error"
      }
    }
  ]
}

Prettier Settings in .prettierc

This was done to align the rules of the eslint-prettier-plugin rules and the default prettier rules used by the IDE on save:

{
  "trailingComma": "none"
}

markdownlint Settings in .markdownlint.json

{
  // This rule is disabled by default, because lines are often longer than 80 chars. But the markdown
  // looks odd has long lines and short lines distributed unevenly. Maybe a line length of 100 is a better
  // approach:
  "MD013": { "line_length": 100 }
  // Linebreak are sometimes very usefull. Sometimes you need multiline headers for example:
  "MD033": {
    "allowed_elements": ["br"]
  }
}

PostCSS Settings in .postcssrc

{
  "plugins": {
    // You could ask at this point why we need "postcss-import" since we already use css-loader
    // after PostCSS. Both will follow @import rules and inline the code. The reason is that PostCSS
    // do some more things with the inlined CSS as css-loader. Without this plugin the imported CSS
    // will not compiled for the targeted browsers, prefixed and so on. On the other hand we need
    // css-loader for including url() statements.
    "postcss-import": {},
    // Compile modern CSS for targeted browsers
    "postcss-preset-env": {},
    // Prefix CSS for targeted browsers
    "autoprefixer": {},
    // Mangle and minify CSS
    "cssnano": {}
  }
}

stylelint Settings in .stylelintrc

{
  // This configuration turns off all rules that might conflict with Prettier
  "extends": ["stylelint-config-standard","stylelint-prettier/recommended"],
  "plugins": ["stylelint-prettier"],
  "rules": {
    "prettier/prettier": true
  }
}

TypeScript Settings in tsconfig.json

{
  "compilerOptions": {
    // The directory for the output
    // Is this needed? Maybe because it will be automatically set as "exclude" glob.
    "outDir": "./dist/",
    // Is this needed?
    "noImplicitAny": true,
    // Without this (or with another value like "es6") we cannot use 'import "a-node-library"' from
    // TypeScript files.
    "module": "commonjs",
    // Enable Decorators for class style vue apps
    "experimentalDecorators": true,
    // As we use babel this maybe is not needed, or other values acceptable.
    // From Vue.js docs: This aligns with Vue's browser support
    "target": "es5",
    // Create source maps in combination with "devtool"
    "sourceMap": true,
    // From Vue.js docs:
    // This enables stricter inference for data properties on `this`.
    // Note that you have to include strict: true (or at least noImplicitThis: true which is a part
    // of strict flag) to leverage type checking of this in component methods otherwise it is always
    // treated as any type.
    "strict": true
    // Vue.js docs note this two settings, but they are not used here:
    // If using webpack 2+ or rollup, to leverage tree shaking:
    // "module": "es2015",
    // "moduleResolution": "node"
  }
}

GIT Exclusion in .gitignore

# Dependency directories
node_modules/

# Transpiled JavaScript files
dist/

# Cache used by TypeScript's incremental build
*.tsbuildinfo

# Output of 'npm pack'
*.tgz

# Optional eslint cache
.eslintcache

Pre-Commit Linting in .lintstagedrc and package.json

In package.json the pre-commit will be initialized with:

"husky": {
    "hooks": {
        "pre-commit": "lint-staged"
    }
},

In .lintstagedrc will be defined what files to lint before commit:

{
  "src/**/*.ts": "tslint",
  "src/**/*.js": "jslint",
  "src/**/*.css": "csslint"
}