This is how to configure Nuxt with ESLint and Prettier + VSCode to format source on save.
- Install dependencies in project folder:
$ npm install eslint babel-eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue eslint-loader prettier -D
- Create
.eslintrc.js:
module.exports = {
root: true,
env: {
node: true,
browser: true
},
extends: [
"plugin:vue/recommended",
"eslint:recommended",
"prettier/vue",
"plugin:prettier/recommended"
],
rules: {
"vue/component-name-in-template-casing": ["error", "PascalCase"],
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
},
globals: {
$nuxt: true
},
parserOptions: {
parser: "babel-eslint"
}
};
- Install required extensions for VSCode in
File → Settings → Extensions:ESLint,Vetur - Create
.vscode/settings.jsonin project folder:
{
"editor.formatOnSave": true,
"vetur.validation.template": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
- based on tutorial by Alex Gogl
Top comments (4)
Apparently, the easiest way is to just use
npx create-nuxt-app, and you have a choice to include everything.But, VSCode settings can be actually hard for newcomers.
Yes, but this article is aimed on non-standard configurations like laravel-nuxt and laravel-nuxt-js by Cristian Pallarés.
Thank you...
Thank you