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 !
Top comments (0)