【Vue.js】 ESLint and Prettier’s settings


  • 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


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


module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  parserOptions: {
    parser: 'babel-eslint'
  extends: [
    consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
  required to lint *.vue files
  plugins: [
  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",


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