CodeCoupler Webpack Setup

Recommended Visual Code Setup

CodeCoupler Webpack will lint and fix JavaScript, Vue and TypeScript files by ESLint and Prettier, Stylesheet files by stylelint. The boilerplate will generate the needed configuration files which make Visual Code to lint these files plus markdown files with markdownlint on save.

To make this work you have to install the following extensions:

• eslint
• prettier
• stylelint
• markdownlint

If you are developing with Vue you should also install:

• Volar ¹

Also recommended but not mandatory which allows you to rewrap your comments to the rulers configured by the boilerplate (80, 100, 120):

• Rewrap

Initialize a new Project with Boilerplate

Create a new directory and initialize a GIT repository. This is usefull because the next commands will install git hooks:

mkdir new-project-folder
cd new-project-folder
git init -b main

Init the boilerplate and install the packages. Use always the "latest" tag or you will use the last version you have downloaded:

npm init @codecoupler/cc-webpack@latest
npm i

Initialize without Boilerplate

Change to your project directory and install as dev dependency:

npm i @codecoupler/cc-webpack --save-dev

If you do not have an ESLint configuration you have to create one:

./node_modules/.bin/eslint --init

Change your webpack.config.js ²:

From

module.exports = {
  // Webpack Configuration
};

To

const ccWebpack = require("@codecoupler/cc-webpack");
module.exports = (env) =>
  ccWebpack(
    {
      // CodeCoupler Webpack Configuration
    },
    env,
    {
      // Webpack Configuration
    }
  );

---

1. The package @codecoupler/create-cc-webpack up to version 2.1 was optimized for using Vetur. From version 2.2 it is optimized for Volar. ↩

2. These instructions are only from version 4 valid. In versions before you have to use the CodeCoupler Webpack CLI and separate configuration files. ↩