PhpStorm/WebStorm ESLint 自动修复 TypeScript

Question

我正在开发 Vue3 TypeScript 应用程序。

我已将 PhpStorm 的 ESLint 设置中的复选框激活为“保存时运行‘eslint --fix’”，但它不起作用。

经过长时间的搜索，我只找到了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'
    },
};

希望有人可以帮助我让它在 PhpStorm 中工作。

Answer 1

好的，我找到了解决方案，问题是 prettier 官方提供的 eslint 扩展在安装eslint-plugin-prettier prettier 并将 my.eslintrc.js 文件更改为

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'
    },
};

至少它现在有效。