DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Gridsome + Eslint: the complete Guide
David CouronnΓ©
David CouronnΓ©

Posted on

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:

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 !

Top comments (0)

Let's Get Hacking

Join the DEV x Linode Hackathon 2022 and use your ingenuity and creativity to build using Linode.

β†’ Join the Hackathon <-