Lint Configuration

eslint Setup

In order to easily fix lint errors we will setup a lint fix script in our package.json. Open your package.json and other scripts add the following line.

      "lint:fix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
    

Then you can run:

      npm run lint:fix
    

stylelint Setup

First we shall create a .stylelintrc.json file at the root of our project and add the following:

      {
        "processors": ["stylelint-processor-html"],
        "extends": "stylelint-config-standard",
        "plugins": ["stylelint-scss"],
        "rules": {
          //all your rules can go here
      }
    

Next we need to install the packages:

      npm i stylelint-scss stylelint-processor-html stylelint-config-standard -D
    

Now lets go to our package.json and add the styleint script so that it looks in our scss files but also our vue files

      "stylelint": "stylelint '**/*.vue' '**/*.scss'"
    

In order to run the lint tool to see if you have any errors just type

      npm run stylelint
    

Pre-commit hooks

Let's add some pre commit hooks so that all lint errors must be solved before being allowed to add a commit. This is a great way of making sure your code is clean before you commit.

First let's install Husky

      npm install husky -D
    

Next let's go to our package.json and add the following under the scripts (not inside the scripts)

      "husky": {
        "hooks": {
          "pre-commit": "npm run lint && npm run stylelint"
        }
      },