Gridsome + Eslint: the complete Guide

While VueJS has the great Vue Cli tool, Gridsome has "not yet" the equivalent.

To install and configure Eslint, we must install our dependencies by hand.

Install dev dependencies

This article assumes that you already have a Gridsome project installed. If not, you can consult the list of starters on this page: Gridsome Starters.

As Gridsome is based on Vuejs, we will use the same recommended tools:

• eslint
• prettier
• @vue/cli-service
• @vue/cli-plugin-eslint
• @vue/eslint-config-prettier
• eslint-plugin-vue
• eslint-plugin-prettier
• babel-eslint

yarn add eslint prettier @vue/cli-service @vue/cli-plugin-eslint @vue/eslint-config-prettier eslint-plugin-vue eslint-plugin-prettier babel-eslint -D

You have time to have a coffee during the installation !

Configurations files

In your root directory, create two files: .prettierrc.js and .eslintrc.js

// .prettierrc.js
module.exports = {
  singleQuote: true,
  semi: false
}

And:

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    'plugin:prettier/recommended',
    '@vue/prettier'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}

Now, you have to add a script in your package.json file:

// package.json
"scripts": {
    "build": "gridsome build",
    "develop": "gridsome develop",
    "explore": "gridsome explore",
    "lint": "vue-cli-service lint"
  },

And just run:

yarn lint

Happy coding !