eslint config for my vue projects

eslint.md

Required VSCode plugins:

• ESLint
• Vetur
• Prettier is NOT necessary to be installed

IMPORTANT:

• don't put the .vscode folder (with the settings.json file) in the gitignore file:

There are 2 files and 1 user settings file that have to be edited:

/////////////////////////////////// .eslintrc.js ///////////////////////////////////

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/recommended', 'eslint:recommended', 'prettier/vue', 'plugin:prettier/recommended'],
  plugins: ['prettier'],
  rules: {
    'vue/require-default-prop': 0,
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'prettier/prettier': [
      2,
      {
        printWidth: 500,
        tabWidth: 2,
        singleQuote: true,
        arrowParens: 'always'
      }
    ]
  },
  globals: {
    $nuxt: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
};


/////////////////////////////////// package.json ///////////////////////////////////
// dependencies
"@vue/cli-plugin-eslint": "^3.4.0",
// devDependencies
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-config-prettier": "^4.2.0",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-vue": "^5.2.2",
"prettier": "^1.17.1",

////////// user settings file in vs code
{
  "workbench.iconTheme": "material-icon-theme",
  "search.exclude": {
    "**/bower_components": true
  },
  "workbench.colorTheme": "CodeSandbox",
  "breadcrumbs.enabled": false,
  "showMusicMetrics": false,
  "showGitMetrics": false,
  "showWeeklyRanking": false,
  "workbench.editor.showTabs": true,
  // linting
  // "vetur.format.defaultFormatter.css": "none",
  // "vetur.format.defaultFormatter.postcss": "none",
  // "vetur.format.defaultFormatter.scss": "none",
  // "vetur.format.defaultFormatter.less": "none",
  // "vetur.format.defaultFormatter.stylus": "none",
  // "vetur.format.defaultFormatter.ts": "none",
  // "vetur.format.defaultFormatter.js": "prettier",
  // "vetur.format.defaultFormatter.js": "vscode-typescript",
  // "vetur.format.defaultFormatter.html": "js-beautify-html",
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    // {
    //   "language": "vue-html",
    //   "autoFix": true
    // },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    }
  ],
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": false,
  "vetur.validation.template": false
  // "eslint.enable": true,
  // "editor.tabSize": 2,
  // "eslint.alwaysShowStatus": true
}

/////////////////////////////////// settings.json ///////////////////////////////////
{
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "vue-html",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    }
  ],
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": false,
  "vetur.validation.template": false
  // "eslint.enable": true,
  // "editor.tabSize": 2,
  // "eslint.alwaysShowStatus": true
}

adding git hooks

For adding a git hook that will check the code for linting errors when trying to commit, you have to install: npm i --save-dev lint-staged

// add this to package.json
"gitHooks": {
  "pre-commit": "lint-staged"
},
"lint-staged": {
  "*.js": [
    "vue-cli-service lint",
    "git add"
  ],
  "*.vue": [
    "vue-cli-service lint",
    "git add"
  ]
}