@e9ine/eslint-config-vue

@e9ine/eslint-config-vue

This package provides e9ine's .eslintrc as an extensible shared config for vue projects

Usage

We export 2 ESLint configurations for your usage which already inherits eslint-recommended and plugin:vue/recommended config. So you do not need to extend eslint:recommended and plugin:vue/recommended

Our default export contains all of our ESLint rules, including ECMAScript 6+ . It has its peer dependencies eslint, babel-eslint, eslint-plugin-vue so you do not require to install eslint , babel-eslint , eslint-plugin-vue separately

Installation

1. Install the correct and latest version of the package

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

2. Make sure to extend the configurations to package.json. globals can be overridden based on project requirements.

   ...
   
   "devDependencies": {
       ...
       "@e9ine/eslint-config-vue": "^1.0.0"
   },
   "eslintConfig": {
       "root": true,
       "extends": [
         "@e9ine/eslint-config-vue"
       ]
   }
   

3. Add below a scripts for lint-only.

   ...
   
   "scripts": {
       ...
       "lint": "./node_modules/.bin/eslint --ext .vue .",
       "lint-fix": "vue-cli-service lint",
   },
   
   ...
   

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

Integration with chalk

chalk must be added to make sure error messages are prompted properly.

npm install --save-dev chalk

Integration with yorkie

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

1. Install yorkie as dev dependency

   npm install --save-dev yorkie
   

2. Define gitHooks config in package.json which will be used by yorkie

   ...
   
   "gitHooks": {
       "pre-commit": "vue-cli-service lint"
   },
   

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 yorkie 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

   "gitHooks": {
       "pre-commit": "lint-staged"
   },
   "lint-staged": {
       "*.js": [
           "vue-cli-service lint",
           "git add"
       ],
       "*.vue": [
           "vue-cli-service lint",
           "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.

Add scripts folder to root of the folder and copy below files.

• verifyCommit.js

/* eslint no-console: 0 */
const chalk = require('chalk');
const msgPath = process.env.HUSKY_GIT_PARAMS;
const msg = require('fs')
    .readFileSync(msgPath, 'utf-8')
    .trim();

const commitRE = /^(revert: |Merge.+)|(feat|fix|docs|dx|style|refactor|perf|test|workflow|build|chore|types|wip|merge)(\(.+\))?: .+/;

if (!commitRE.test(msg)) {
    console.error(`  ${chalk.bgRed.white(' ERROR ')} ${chalk.red('invalid commit message format.')}\n\n`);
    process.exit(1);
}

• verifyUntrackable.js

/* eslint no-console: 0 */
const chalk = require('chalk');

console.log(process.argv);
if (process.argv[0]) {
    console.error(
        `  ${chalk.bgRed.white(' ERROR ')} ${chalk.red(
            'config.js must not be trackable.'
        )}\n\n`
    );
    process.exit(1);
}

How to use

npm run lint    // shows errors
npm run lint-fix    // fixes the errors