Prettier settings is not working with VSCode

Question

I installed Eslint and Prettier Eslint plugin. But the file is not formated by my prettier settings on both auto saving and formatting manually( Shift+Alt+F). Using terminal command yarn eslint **/main.ts --fix is OK.

My example code named main.ts:

//Formatted by auto saving or Shift+Alt+F
//Wrong!

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";

function fun() {
    for (let i = 0; i < 10; i++);
}

fun();

createApp(App).mount("#app");

//Formatted by command `yarn eslint **/main.ts --fix`
//Correct!
import { createApp } from 'vue';
import './style.css';
import App from './App.vue';

function fun() {
  for (let i = 0; i < 10; i++);
}

fun();

createApp(App).mount('#app');

My settings:

{
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
    "editor.formatOnPaste": false, // required
    "editor.formatOnType": false, // required
    "editor.formatOnSave": true, // optional
    "editor.formatOnSaveMode": "file", // required to format on save
    "files.autoSave": "onFocusChange"
}

My eslint configuration.

module.exports = {
    env: {
        browser: true,
        es2021: true,
    },
    extends: [
        "eslint:recommended",
        "plugin:vue/vue3-recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:prettier/recommended",
    ],
    overrides: [],
    parser: "vue-eslint-parser",
    parserOptions: {
        ecmaVersion: "latest",
        sourceType: "module",
    },
    plugins: ["vue", "@typescript-eslint"],
    rules: {},
};

My prettier configuration:

{
    "tabWidth": 2,
    "singleQuote": true
}

VSCode version: 1.75.1

Prettier settings is not working with VSCode

0 Answers0