Linux · February 16, 2019 0

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

</p>
<p>$ npm install eslint-plugin-prettier eslint-config-prettier --save-dev</p>
<p>

User Settings in VSCode

</p>
<p>{</p>
<p>	"editor.tabSize": 2,</p>
<p>	"diffEditor.renderSideBySide": true,</p>
<p>	"window.zoomLevel": 0,</p>
<p>	"vetur.format.defaultFormatter.js": "vscode-typescript",</p>
<p>	"vetur.format.defaultFormatter.html": "js-beautify-html",</p>
<p>	"javascript.format.insertSpaceBeforeFunctionParenthesis": true,</p>
<p>	"editor.formatOnSave": false,</p>
<p>	"vetur.validation.template": false,</p>
<p>	"eslint.autoFixOnSave": true,</p>
<p>	"eslint.validate": [</p>
<p>		{</p>
<p>			"language": "vue",</p>
<p>			"autoFix": true</p>
<p>		},</p>
<p>		{</p>
<p>			"language": "html",</p>
<p>			"autoFix": true</p>
<p>		},</p>
<p>		{</p>
<p>			"language": "javascript",</p>
<p>			"autoFix": true</p>
<p>		}</p>
<p>	]</p>
<p>}</p>
<p>

Add following to your package.json

<br>
"eslintConfig": {<br>
    "root": true,<br>
    "env": {<br>
      "node": true<br>
    },<br>
    "extends": [<br>
      "plugin:vue/essential",<br>
      "plugin:prettier/recommended",<br>
      "eslint:recommended"<br>
    ],<br>
    "rules": {},<br>
    "parserOptions": {<br>
      "parser": "babel-eslint"<br>
    }<br>
  }<br>