【Vue.js】 ESLint and Prettier’s settings

Required
Install required modules command one-liner
Extensions
Contents of various configuration files
1. .eslintrc.js
2. .vscode/settings.json

Required

eslint (reports code that doesn’t follow the rules you set)
prettier (code formater)
eslint-config-prettier (turns off rules that may conflict with Prettier)
eslint-loader (detects code that does not follow the rules without executing commands. I need to set it up later)
eslint-plugin-prettier (include rules set in ESlint into Prettier)
eslint-plugin-vue (vue file parser)
babel-eslint

Install required modules command one-liner

npm i -D babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-prettier eslint-plugin-vue prettier

Extensions

Vetur - Visual Studio Marketplace

Extension for Visual Studio Code - Vue tooling for VS Code

ESLint - Visual Studio Marketplace

Extension for Visual Studio Code - Integrates ESLint JavaScript into VS Code.

Contents of various configuration files

.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',
    'prettier'
  ],
  required to lint *.vue files
  plugins: [
    'vue'
  ],
  add your custom rules here
  rules: {
    "semi": ,
 [2, "never"]   "no-console": "off",
    "vue/max-attributes-per-line": "off",
    "vue/html-self-closing": ["error", {
      "html": {
        "void": "always",
      }
    }],
  }
}

.vscode/settings.json

"eslint.autoFixOnSave": true,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}