Make eslint-loader (+ prettier) play nice with gridsome

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  parserOptions: {
    parser: "babel-eslint",
  },
  settings: {
    'import/resolver': 'webpack',
  },
  extends: [
    "plugin:vue/recommended",
    "plugin:gridsome/recommended",
    "prettier/vue"
  ],
  plugins: [
    "vue",
    "prettier"
  ],
  rules: {
    ...
  },
};

gridsome.config.js

module.exports = {
  ...
  chainWebpack: (config => {
    config.module
      .rule('lint')
        .test(/\.(js|vue)$/)
        .pre()
        .include
          .add(path.resolve(__dirname, 'src'))
          .end()
        .use('eslint')
          .loader('babel-loader')
          .loader('eslint-loader');
  });
  ...
};

package.json

{
  ...
  "scripts": {
    ...
    "lint": "eslint --ext .js,.vue src",
    "lint-autofix": "eslint --ext .js,.vue src --fix"
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    "babel-eslint": "^10.0.3",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.10.0",
    "eslint-import-resolver-webpack": "^0.12.1",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-gridsome": "^1.4.0",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-vue": "^6.1.2",
    "prettier": "^1.19.1",
    "prettier-stylelint": "^0.4.2",
    "vue-eslint-parser": "^7.0.0"
  }
}

webpack.config.js

// This file is required so that eslint-import-resolver-webpack can resolve our webpack aliases
module.exports = {
  resolve: {
    alias: {
      "~": require("path").resolve(__dirname, "src")
    }
  }
};

Thank you for this!