PhpStorm/WebStorm ESLint autofix TypeScript

Question

I´m working on a Vue3 TypeScript application.

I have activated the checkbox in PhpStorm's ESLint settings to "Run 'eslint --fix' on save" but it does not work.

After a long search for that I only found a https://github.com/microsoft/vscode-eslint/issues/609#issuecomment-460554105 for Visual Studio Code

.eslintrc.js

module.exports = {
    root: true,
    parser: "vue-eslint-parser",
    parserOptions: {
        ecmaVersion: 2021,
        parser: "@typescript-eslint/parser",
        sourceType: "module"
    },
    plugins: [
        '@typescript-eslint',
    ],
    env: {
        node: true,
        es6: true,
    },
    extends: [
        "eslint:recommended",
        "plugin:vue/vue3-recommended",
        'plugin:@typescript-eslint/recommended',
        "prettier"
    ],
    rules: {
        // override/add rules settings here, such as:
        // 'vue/no-unused-vars': 'error'
    },
};

Hope someone can help me to get it working in PhpStorm.

Answer 1

Ok, I found a Solution for this, the Problem was that the official by prettier provided eslint extension didn´t work, after isntalling eslint-plugin-prettier and changing my.eslintrc.js file to

module.exports = {
    root: true,
    parser: "vue-eslint-parser",
    parserOptions: {
        ecmaVersion: 2021,
        parser: "@typescript-eslint/parser",
        sourceType: "module",
    },
    plugins: ["@typescript-eslint", "prettier"],
    env: {
        node: true,
        es6: true,
    },
    extends: [
        "eslint:recommended",
        "plugin:vue/vue3-recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:prettier/recommended",
    ],
    rules: {
        // override/add rules settings here, such as:
        // 'vue/no-unused-vars': 'error'
    },
};

atleast it works now.