Prettier is Indenting by 2 spaces instead of 4 on "Shift + Alt + F"

Question

I am using Vue 3 and VS Code with Prettier as my code formatter, and I want the indentation to be 4 spaces instead of 2, and I've configured 4 spaces on the bottom right side of my VS Code. But still whenever I format my code it indents everything to 2 spaces. I've tried reinstalling Prettier and VS Code, but it's still the same!

Answer 1

You have 3 concurrent configuration to do in order to reduce conflict between IDE and prettier and eslint: in a nutshell prettier should be used to format (write the file correctly and nicely), eslint should tell you syntax errors and format best practices miss and VSCODE should display it all correctly.

1. Project-wise (prettier):

   • open the command palette an type >Prettier: Create Configuration File if you dont have this command then you are missing the prettier extention

   • select your project root where your "nodes_modules" folder is stored

   • open the generated file (.prettierrc) and edit the two line as follow (set the value to your liking, i like those):

    {
      "tabWidth": 4,
      "useTabs": true
    }

• Power Up this file: check prettier doc for some sweet config like trailingComma, semi, singleQuote, singleAttributePerLine, printWidth, vhtmlWhitespaceSensitivity ...

2. Project-wise (eslint):
   • create a .eslintrc file and maintain it: Some rules will overlap with Typescript so you will have to tune the syntax checker according to your code quality requirement. (when i say code quality it includes you personnal preferences as long as it is not in confrontation with best practices).
   • Example of my .eslintrc.cjs in project root folder:

module.exports = {
    root: true,
    env: {
        browser: true,
        es2021: true,
    },
    extends: [
        'eslint:recommended',
        'plugin:vue/vue3-essential',
        'plugin:vue/vue3-strongly-recommended',
        'plugin:vue/vue3-recommended',
        'plugin:@typescript-eslint/recommended',
    ],
    parser: 'vue-eslint-parser',
    parserOptions: {
        parser: '@typescript-eslint/parser',
        ecmaVersion: 'latest',
        sourceType: 'module',
    },
    plugins: ['vue', '@typescript-eslint'],
    rules: {
        'vue/attribute-hyphenation': ['warn', 'never'], // i want order not tyrany
        indent: 'off', // prettier does it
        'no-tabs': ['off', { allowIndentationTabs: true }], // i want tabs
        // TODO : Remove Multiword-line ESlint-config
        'vue/multi-word-component-names': 'off', // im fighting with my co devs
        '@typescript-eslint/no-unused-vars': 'off', // already detected by vscode and conflicts in some vue3 script setup composition api declaration cases, this rule is overriden for ts files
        '@typescript-eslint/no-empty-interface': 'off', // already detected by vscode
        'vue/no-v-html': 'error', // big NO : sensible to XSS
        'vue/no-setup-props-destructure': 'off', // allowed in vue3 script setup composition api ...
        'no-undef': 'off',
        'vue/html-indent': 0,
        'vue/singleline-html-element-content-newline': 0,
        'vue/html-self-closing': 'off',
        'vue/max-attributes-per-line': 'off',
    },
    overrides: [
        {
            files: ['*.ts'],
            rules: {
                '@typescript-eslint/no-unused-vars': 'error',
            },
        },
    ],
}

3. IDE-wise (vscode):
   • this should be in your vscode user setting file or in your project workspace (./.vscode/settings.json)

{
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.indentSize": "tabSize",
    "editor.tabSize": 4,
    "editor.detectIndentation": false
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.indentSize": "tabSize",
    "editor.tabSize": 4,
    "editor.detectIndentation": false
  }
}
 // yes it's the same content in both languages

Of course dont take this conf at face value and keep improving it for perf and correctness.

PS: some devDependencies you might need ( I use nuxt ) you'll have to sort your version on your own ;)

    "devDependencies": {
        "@nuxtjs/eslint-module": "^4.1.0",
        "@typescript-eslint/eslint-plugin": "6.13.0",
        "@typescript-eslint/parser": "6.13.0",
        "@vue/eslint-config-prettier": "8.0.0",
        "@vue/eslint-config-standard": "^8.0.1",
        "@vue/eslint-config-typescript": "12.0.0",
        "eslint-config-typescript": "^3.0.0",
        "eslint-plugin-markdown": "^3.0.0",
        "eslint-plugin-nuxt": "^4.0.0",
        "eslint-plugin-prettier": "5.0.1",
        "eslint-plugin-vue": "^9.14.0",
        "prettier": "^3.1.0",
        "typescript": "5.4.4",
}