User settings for VSCode prettier and eslint


Eslint and Prettier should be already installed, in vue cli they come with project configuration when creating project using vue-cli


$ npm install eslint-plugin-prettier eslint-config-prettier --save-dev

User Settings in VSCode


{

	"editor.tabSize": 2,

	"diffEditor.renderSideBySide": true,

	"window.zoomLevel": 0,

	"vetur.format.defaultFormatter.js": "vscode-typescript",

	"vetur.format.defaultFormatter.html": "js-beautify-html",

	"javascript.format.insertSpaceBeforeFunctionParenthesis": true,

	"editor.formatOnSave": false,

	"vetur.validation.template": false,

	"eslint.autoFixOnSave": true,

	"eslint.validate": [

		{

			"language": "vue",

			"autoFix": true

		},

		{

			"language": "html",

			"autoFix": true

		},

		{

			"language": "javascript",

			"autoFix": true

		}

	]

}

Add following to your package.json
"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "plugin:prettier/recommended",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  }

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s