How to add eslint rules to prettier in Vue project on VsCode

Question

I would like to add rules to my existing formating rules

Actually I'm using a .vscode/settings.json file with the following

{
 "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript"],
  "vetur.useWorkspaceDependencies": true,
  "vetur.validation.style": false,
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "vetur.format.defaultFormatter.html": "prettier",
  "[vue]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "octref.vetur",
  },
  "eslint.format.enable": true
} 

It works well but let's say i want to add a rule for exemple vue-script-indent

I don't know how to add this rules to my existing config

Answer 1

vue/script-indent (ESLint rule)

From the eslint-plugin-vue docs:

Create .eslintrc.* file to configure rules. See also: http://eslint.org/docs/user-guide/configuring.

Example .eslintrc.js:

module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    // 'eslint:recommended',
    'plugin:vue/essential'
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'vue/no-unused-vars': 'error'
  }
}

So in your .eslintrc.js, add the script-indent rule to the rules property. Note the eslint-plugin-vue rule names are all prefixed with vue/, so use "vue/script-indent" in the rules property below:

module.exports = {
  extends: [
    'plugin:vue/essential',
  ],
  rules: {
    'vue/script-indent': ['error', 2, {
      baseIndent: 0,
      switchCase: 0,
      ignores: []
    }]
  }
}

Finally, ensure you have the ESLint VS Code extension installed to enable formatting from the IDE.

Prettier

Your workspace settings point to Prettier, so make sure your Prettier options align with the vue/script-indent rule. That is, the tabWidth value in Prettier should match the tab width in vue/script-indent.

For example, to require a 4-space tab width, create .prettierrc in the root of your project with the following JSON:

// .prettierrc
{             👇
  "tabWidth": 4
}

...and update .eslintrc.js to match:

// .eslintrc.js
module.exports = {
  rules: {                         👇
    'vue/script-indent': ['error', 4, {
      baseIndent: 0,
      switchCase: 0,
      ignores: []
    }]
  }
}

Also ensure you have the Prettier VS Code extension installed to enable formatting from the IDE.