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](/visual-studio-code-setup.html) 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

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

3. Create a file `.eslintignore` in your project directory and put the below content


4. Add <a href=”” rel=”noopener” target=”_blank”>eslint plugin</a> in Visual Studio Code (vscode).

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


Leave a Reply

Your email address will not be published. Required fields are marked *