[vscode拡張機能]vueでの自動整形が適用されない

前提・実現したいこと

eslintとprettierを使って自動整形を行いたいのですが、https://qiita.com/I_s/items/92f44b3cb803fe165a4eを参考に設定してみても適用されません。
何が問題なのでしょうか。

該当のソースコード

eslintrc
1module.exports = {
2    root: true,
3    env: {
4        node: true
5    },
6    extends: [
7        'plugin:vue/essential',
8        'eslint:recommended',
9        'plugin:prettier/recommended' // EsLintとprettierを両方使用する場合に必要な設定
10    ],
11    plugins: ['vue'],
12    rules: {
13        // コーディングのルールを設定できる。設定項目に則った内容でエラーが出力されるようになる
14        'prettier/prettier': [
15        'error',
16        {
17            semi: true, // 文末にセミコロンを使用するか
18            singleQuote: true, // 文字列にシングルコーテーションを使用すか
19            trailingComma: 'es5' // es5の記法に従う
20        }
21        ],
22        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
23        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
24        'vue/html-closing-bracket-newline': [2, {'multiline': 'never'}],
25    },
26    parserOptions: {
27        parser: 'babel-eslint'
28    }
29};

setting
1{
2    "window.zoomLevel": -1,
3    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
4    "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
5    "editor.tabSize": 2,
6    "editor.formatOnSave": false,
7    "eslint.enable": true,
8    "files.associations": {
9      "*.vue": "vue"
10    },
11    "eslint.validate": [
12      "javascript",
13      "javascriptreact",
14      "vue"
15    ],
16    "editor.codeActionsOnSave": {
17      "source.fixAll.eslint": true
18    }
19}