My ESLint config for linting Vue 2 apps. You can use it along side Prettier without conflicts.

It includes the following:

• My base config eslint-config-roboleary-base config for a core collection of rules.
• The eslint-config-vue-plugin for vue rules.
• The eslint-config-prettier config to turn off the ESLint rules that conflict or are unnecessary when using Prettier. Ensure this is the last config included.

1. Install this package, ESLint (peer dependency) and Prettier (peer dependency) as devDependencies with the command npm i --save-dev eslint prettier eslint-config-vue2-roboleary.

2. Create an eslint config file in the root of your project directory e.g. .eslintrc. Add the following:

   {
     "extends": ["eslint-config-vue2-roboleary"]
   }

   Alternatively, you can put a reference to the config in your package.json under the property eslintConfig.

3. You can add scripts to your package.json to lint, fix, and format your code from the command-line.

   {
   	"scripts": {
   		"lint": "eslint .",
   		"lint:fix": "npm run lint -- --fix",
   		"format": "prettier src test --check",
   		"format:fix": "npm run prettier -- --write",
   	},
   }

If you want to use ES Lint and Prettier in VS Code, I recommend installing the extensions: ESLint, Prettier, and Format Code Action.

To format and lint code on save, you can update your user settings with the following:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.probe": [
      "javascript",
      "javascriptreact",
      "vue"
  ],
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": [
    "source.formatDocument",
    "source.fixAll"
  ],
}

If you use the Vetur plugin, ensure that Vetur's template validation does not interfere with linting. The setting is "vetur.validation.template", it is set to false by default.