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

6jjcrrmo  于 2023-01-12  发布在  React
关注(0)|答案(2)|浏览(162)

我已经在VSCode上安装了Eslint-prettier扩展。我已经有了一个. eslintrc.js,我的默认格式化程序(Eslint-prettier)不根据我的eslint规则格式化。
例如:当我输入npm运行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说没有尾随昏迷,在我右键单击其中之一,并修复所有自动修复的问题,问题消失了,但在我保存文件漂亮的扩展名把他们再次。

hof1towb

hof1towb1#

1.安装eslint:

npm i --save-dev eslint
  • 初始化eslint:
npx eslint --init

对于某些选项,您需要选择下一步:

      • 您希望如何使用ESLint?**
  • 检查语法并查找问题
      • 您希望配置文件采用什么格式?**
  • JavaScript语言
  • 安装更美观:
npm i --save-dev eslint-config-prettier eslint-plugin-prettier prettier
  • 创建.prettierrc配置文件:
{
     "printWidth": 80,
     "singleQuote": true,
     "trailingComma": "es5"
 }

现在你可以用eslint检查样式,用命令行中的pretier修改样式。
要将VSCode与eslint和prettier集成,您需要安装以下软件之一:

  1. esbenp.prettier-vscode.
  2. dbaeumer.vscode-eslint;
    之后,您需要将此扩展设置为默认格式化程序:
    1.打开指令托盘ctrl+shift+p;
    1.选择Format Document With...;
    1.选择Configure Document With...;
    1.根据您的喜好选择Prettier - Code FormatterESLint
    现在,eslint将像格式化程序一样更简洁、更漂亮:
    VSCode问题选项卡:

eslint输出

如果我保存文件,所有漂亮的问题将得到解决(保存时自动套用格式应该打开)
Eslint插件不会自动应用位于.prettierrc中的设置更改。请参阅github上的issue。要解决此问题,您可以:

  • 移动. eslint中的.prettierrc内容(不推荐,因为漂亮的插件有时不读取此文件);
  • 编辑. prettierrc文件后,从VSCode ESLint: Restart ESLint server中的命令调色板运行。
ryevplcw

ryevplcw2#

在eslint配置中,更改

extends: ["prettier"],

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

相关问题