This is how to configure Nuxt with ESLint and Prettier + VSCode to format source on save.
- Install dependencies in project folder:
$npminstalleslint 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 byAlex Gogl
Top comments(4)
Subscribe
Pacharapol Withayasakpunt•• Edited on• Edited
Currently interested in TypeScript, Vue, Kotlin and Python. Looking forward to learning DevOps, though.
- LocationThailand
- EducationYes
- Joined
Apparently, the easiest way is to just usenpx 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.
For further actions, you may consider blocking this person and/orreporting abuse
