@e9ine/eslint-config-vue-style

This package provides e9ine's .eslintrc as an extensible shared config for style (scss, less etc.) vue projects

Usage

We export 1 ESLint configuration for your usage which already inherits stylelint-config-standard. So you do not need to extend stylelint-config-standard Our default export contains all of our ESLint rules. It has its peer dependencies stylelint, stylelint-config-standard so you do not require to install stylelint , stylelint-config-standard separately

Installation

1. Install the correct and latest version of the package

   npm install --save-dev @e9ine/eslint-config-vue-style

2. Make sure to extend the configurations to package.json.

   ...
       
   "devDependencies": {
       ...
       "@e9ine/eslint-config-vue-style": "^1.0.0"
   },
   "stylelint": {
       "extends": "@e9ine/eslint-config-vue-style"
   }

3. Add below a scripts for lint-only.

   ...
       
   "scripts": {
       ...
       "lint-style": "./node_modules/.bin/stylelint ."
   },
       
   ...

Note : lint command provided by vue-cli-service will auto fix the issues.

Integration with husky

husky can be integrated with the projects based on the team size. However we highly recommend to use husky

1. Install husky as dev dependency

   npm install --save-dev husky

2. Define husky config in package.json

   ...
      
   "husky": {
       "hooks": {
         "pre-commit": "npm run lint-style"
       }
    }

Integration with lint-staged

lint-staged can be highly effective when you only would want to run linters on staged-files. This will also prevent the user from committing code which is not in compliance with the standards and specified formatting.

However we highly recommend to use lint-staged in combination with husky if you are working in a team consisting more than 2 members.

1. Install lint-staged as dev dependency

   npm install --save-dev lint-staged

2. Define lint-staged config in package.json

   "husky": {
       "hooks": {
         "pre-commit": "lint-staged"
       }
   },
     "lint-staged": {
       "*.vue": ["./node_modules/.bin/eslint --ext .vue . --fix", "./node_modules/.bin/stylelint . --fix", "git add"]
   }

--fix option will try to fix the formatting and fixable errors. If there are still any "manual-only-fixable" error found, then commit will be rejected.