Prettier 不根据我的 eslint 配置进行格式化

Question

我已经在 VSCode 上安装了 Eslint-Prettier 扩展。我已经有一个 .eslintrc.js 并且我的默认格式化程序 (Eslint-prettier) 没有根据我的 eslint 规则进行格式化。

例如：当我输入 npm run eslint 时。--fix 它删除所有分号，但在我按 CTRL + V 后，prettier 再次添加分号..

在我格式化计算机之前，它运行得很好。谁能帮我？

我的 .eslintrc.js 文件内容是

module.exports = {
  env: {
    node: true,
    es6: true,
    browser: true
  },
  parserOptions: {
    ecmaVersion: 6,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
      modules: true,
      experimentalObjectRestSpread: true
    }
  },
  rules: {
    "no-console": "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",

    // Best Practices
    eqeqeq: "error",
    "no-invalid-this": "error",
    "no-return-assign": "error",
    "no-unused-expressions": ["error", { allowTernary: true }],
    "no-useless-concat": "error",
    "no-useless-return": "error",

    // Variable
    // 'init-declarations': 'error',
    "no-use-before-define": "error",

    // Stylistic Issues
    "array-bracket-newline": ["error", { multiline: true, minItems: null }],
    "array-bracket-spacing": "error",
    "brace-style": ["error", "1tbs", { allowSingleLine: true }],
    "block-spacing": "error",
    "comma-dangle": "error",
    "comma-spacing": "error",
    "comma-style": "error",
    "computed-property-spacing": "error",
    "func-call-spacing": "error",
    "implicit-arrow-linebreak": ["error", "beside"],
    // indent: ['error', 4],
    "keyword-spacing": "error",
    "multiline-ternary": ["error", "never"],
    // 'no-lonely-if': 'error',
    "no-mixed-operators": "error",
    "no-multiple-empty-lines": ["error", { max: 2, maxEOF: 1 }],
    "no-tabs": "error",
    "no-unneeded-ternary": "error",
    "no-whitespace-before-property": "error",
    "nonblock-statement-body-position": "error",
    "object-property-newline": [
      "error",
      { allowAllPropertiesOnSameLine: true }
    ],
    "quote-props": ["error", "as-needed"],
    // quotes: ['error', 'prefer-single'],
    semi: ["error", "never"],
    "semi-spacing": "error",
    "space-before-blocks": "error",
    // 'space-before-function-paren': 'error',
    "space-in-parens": "error",
    "space-infix-ops": "error",
    "space-unary-ops": "error",

    // ES6
    "arrow-spacing": "error",
    "no-confusing-arrow": "error",
    "no-duplicate-imports": "error",
    "no-var": "error",
    "object-shorthand": "error",
    "prefer-const": "error",
    "prefer-template": "error"
  }
}

---

您可以看到 eslint 说没有尾随逗号，在我右键单击其中一个并修复所有可自动修复的问题后，问题就消失了，但在我保存文件更漂亮的扩展名后，它们再次出现。

Answer 1

1. 安装 eslint：

   npm i --save-dev eslint
   

2. 初始化 eslint：

   npx eslint --init
   

   对于某些选项，您需要选择下一步：
   • 您想如何使用 ESLint？
   • 检查语法并发现问题
   • 您希望配置文件采用什么格式？
   • JavaScript
3. 安装更漂亮：

   npm i --save-dev eslint-config-prettier eslint-plugin-prettier prettier 
   

4. 创建.prettierrc配置文件：

    {
        "printWidth": 80,
        "singleQuote": true,
        "trailingComma": "es5"
    }
   

现在，您可以使用 eslint 检查样式，并使用命令行中的 prettier 修复样式。

对于 VSCode 与 eslint 和 prettier 的集成，您需要安装以下之一：

1. esbenp.prettier-vscode。
2. dbaeumer.vscode-eslint；

之后，您需要将此扩展设置为默认格式化程序：

1. 打开命令面板ctrl+shift+p；
2. 选择Format Document With...;
3. 选择Configure Document With...;
4. 选择Prettier - Code Formatter或ESLint根据您的喜好。

现在，eslint 将像 linter 一样工作，并且像格式化程序一样漂亮：

VSCode 问题选项卡：

eslint 输出

如果我保存文件，所有更漂亮的问题都将得到解决（保存时自动格式化应该打开）

Eslint 插件不会自动应用位于.prettierrc. 请参阅github 上的问题。要解决此问题，您可以：

• 移动.prettierrc.eslint 中的内容（不推荐，因为更漂亮的插件有时不读取此文件）；
• 编辑后从 VSCode 中的命令面板运行ESLint: Restart ESLint server。prettierrc文件。

Answer 2

在 eslint 配置中，更改

  extends: ["prettier"],

到

  extends: ['plugin:prettier/recommended'],