How to add linting to your Vuejs Project in vscode


Hello Vue JS developers. In this post I'm going to provide a step by step guide to add linting to your vuejs project using elint in Visual Studio Code which is one of the vue developer tools.


  1. Execute the command in project base directory to install the eslint related dependencies
npm install --save-dev eslint eslint-friendly-formatter eslint-loader eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-vue babel-eslintbabel-eslint
  1. Create a file .eslintrc.js in your project directory and put the following content

module.exports = {
	root: true,
	parserOptions: {
		parser: 'babel-eslint'
	env: {
		browser: true
	extends: [
		// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
	// required to lint *.vue files
	plugins: ['vue'],
	// add your custom rules here
	rules: {
		"indent": "off",
		'vue/html-indent': [4, "tab", {
			attribute: 1,
			closeBracket: 0,
		// allow async-await
		'generator-star-spacing': 'off',
		// allow debugger during development
		'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  1. Create a file .eslintignore in your project directory and put the below content
  1. Add eslint plugin in Visual Studio Code (vscode).

  2. In Vscode, Open User Settings (File > Preferences > Settings >) and add below property

"eslint.validate": [
			"language": "vue",
			"autoFix": true

You can also configure your vuejs project for formatting. In my case my user settings looks like this.

	"editor.detectIndentation": false,
	"editor.fontFamily": "Ubuntu Mono",
	"editor.fontSize": 22,
	"editor.formatOnType": true,
	"editor.insertSpaces": false,
	"editor.tabSize": 4,
	"editor.wordWrap": "on",
	"files.trimTrailingWhitespace": true,
	"git.enabled": false,
	"html.format.indentInnerHtml": true,
	"html.format.preserveNewLines": true,
	"html.format.unformatted": "code",
	"html.format.wrapLineLength": 0,
	"telemetry.enableTelemetry": false,
	"javascript.implicitProjectConfig.checkJs": true,
	"window.newWindowDimensions": "maximized",
	"window.openFoldersInNewWindow": "off",
	"workbench.activityBar.visible": true,
	"editor.quickSuggestions": {
		"strings": true
	"extensions.ignoreRecommendations": false,
	"element-helper.version": "2.1",
	"vetur.format.defaultFormatter": {
		"html": "prettier",
		"css": "prettier",
		"postcss": "prettier",
		"scss": "prettier",
		"less": "prettier",
		"js": "prettier",
		"ts": "prettier",
		"stylus": "stylus-supremacy"
	"eslint.validate": [
			"language": "vue",
			"autoFix": true

That's it. Now when you open a .vue file in vscode. It will display the number of errors/ warnings in the left sidebar of vscode. I have created a template on github by integrating formatter and linting.

Published in: Web Development - Ide
Originally Published On : Feb 19, 2018