Vue.js + Prettier with 4-space indentation

General Discussion
1

A quick tip for using Vue.js with 4-space indentation:

If using vue-cli with prettier, the generated project will complain about 4-space indentation. To fix it, I have the following content in my .eslintrc.js:

// .eslintrc.js
module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        'plugin:vue/essential',
        'eslint:recommended', // add this
        '@vue/prettier'
    ],
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        // 'vue/script-indent': ['error', 4, {'baseIndent': 1}],
        indent: ['error', 4]
    },
    parserOptions: {
        parser: 'babel-eslint'
    }
};

I created a .prettierrc.js file with this content:

// .prettierrc.js
module.exports = {
    tabWidth: 4,
    'singleQuote': true
};

And the (default) package.json looks like this:

{
  "name": "testing_exp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:e2e": "vue-cli-service test:e2e",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "register-service-worker": "^1.5.2",
    "vue": "^2.5.21",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.2.0",
    "@vue/cli-plugin-e2e-cypress": "^3.2.0",
    "@vue/cli-plugin-eslint": "^3.2.0",
    "@vue/cli-plugin-pwa": "^3.2.0",
    "@vue/cli-plugin-unit-mocha": "^3.2.0",
    "@vue/cli-service": "^3.2.0",
    "@vue/eslint-config-prettier": "^4.0.1",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-eslint": "^10.0.1",
    "chai": "^4.1.2",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1",
    "vue-template-compiler": "^2.5.21"
  }
}
1 Like
2

I’ve been having a lot of problems when trying to use Vue’s (or Nuxt’s) linters. The default linters have wasted hours of my time, so I wanted to add a few more notes here.

When generating new projects with nuxt or vue-cli, you can say “no” to the linter option and then do npm i -D eslint-plugin-vue. Then add the extra line to the .eslintrc.js file shown below.

// .eslintrc.js
module.exports = {
    'env': {
        'browser': true,
        'commonjs': true,
        'es6': true,
        'node': true
    },
    'extends': 'eslint:recommended',
    'parserOptions': {
        'ecmaVersion': 2018,
        'sourceType': 'module'
    },
    'rules': {
        'indent': [
            'error',
            4
        ],
        'linebreak-style': [
            'error',
            'unix'
        ],
        'quotes': [
            'error',
            'single'
        ],
        'semi': [
            'error',
            'always'
        ]
    },
    // add this
    plugins: [
        'vue'
    ]
};

And .editorconfig:

# editorconfig.org
root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

That works, at least for vim.