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...