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.

Does it work if you change a file and then select File > Save All with the mouse (i.e. when not using keyboard shortcuts)? Check Settings | Keymap, Main Menu | File | Save All - what shortcut is assigned to this action? — lena
– lena, Commented Feb 7, 2022 at 11:11
I always use ctrl + S which is the shortcut for File > Save All. It does not work. — Marcel Rösler
– Marcel Rösler, Commented Feb 7, 2022 at 11:29
Once more: does it work if you change a file and then select File > Save All with the mouse (i.e. when not using any keyboard shortcuts)? — lena
– lena, Commented Feb 7, 2022 at 13:11
No is the awnser (because i have to type at least some chars but the word "no" is to short) — Marcel Rösler
– Marcel Rösler, Commented Feb 7, 2022 at 13:55
does the Fix ESLint problems right-click menu action work? — lena
– lena, Commented Feb 7, 2022 at 15:02

Marcel Rösler · Accepted Answer · 2022-02-09 07:11:25Z

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.

answered Feb 9, 2022 at 7:11

Marcel Rösler

1911 gold badge3 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

PhpStorm/WebStorm ESLint autofix TypeScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related