如何将Prettier Config添加到Eslint配置中？

Question

请注意，我不想在我的JS项目中使用的分号。

youtube视频

我尝试将其禁用在.eslintrc中。 CJS文件，但是奇怪的是，semi：0无效地禁用缺少;的警告。但是，semi：false确实禁用了VSCODE中的警告。

但是，我的问题似乎与漂亮的问题有关，因此我将Prettier配置添加到我的eslint文件中，并使用semi：semi：false在其中工作。但是，当我运行npm运行lint时，我会收到以下错误：

我的config

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution")

module.exports = {
  root: true,
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/eslint-config-prettier",
  ],
  rules: {
    semi: 0,
  },
  prettier: {
    rules: {
      semi: false
    },
  },
  overrides: [
    {
      files: ["cypress/e2e/**.{cy,spec}.{js,ts,jsx,tsx}"],
      extends: ["plugin:cypress/recommended"],
    },
  ],
};

如果我删除该漂亮的块注意，我将再次获取警告在我的代码中：

我的package.json文件（VUE创建）

{
  "name": "moonholdings.xyz",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview --port 4173",
    "test:unit": "vitest --environment jsdom",
    "test:e2e": "start-server-and-test preview http://127.0.0.1:4173/ 'cypress open --e2e'",
    "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:4173/ 'cypress run --e2e'",
    "build-only": "vite build",
    "prettier": "prettier --write .",
    "lint": "eslint . && prettier --check ."
  },
  "dependencies": {
    "pinia": "^2.0.14",
    "vue": "^3.2.36",
    "vue-router": "^4.0.15"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.1.0",
    "@vitejs/plugin-vue": "^2.3.3",
    "@vitejs/plugin-vue-jsx": "^1.3.10",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/test-utils": "^2.0.0",
    "cypress": "^10.0.2",
    "eslint": "^8.5.0",
    "eslint-plugin-cypress": "^2.12.1",
    "eslint-plugin-vue": "^9.0.0",
    "jsdom": "^19.0.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.5.1",
    "sass": "^1.53.0",
    "start-server-and-test": "^1.14.0",
    "vite": "^2.9.9",
    "vitest": "^0.13.0",
    "vue-tsc": "^0.35.2"
  }
}

Answer 1

在.eslintrc文件中添加带有更漂亮的设置的“漂亮/漂亮”规则：

"rules": {
        "react/react-in-jsx-scope": "off",
        "prettier/prettier": [
            "error",
            {
              "trailingComma": "all",
              "tabWidth": 12,
              "semi": false,
              "singleQuote": true,
              "bracketSpacing": true,
              "eslintIntegration": true,
              "printWidth": 120
            }
          ]
    }

Answer 2

弄清楚了，需要禁用vscode 中的 eslint扩展名，它覆盖了我的配置文件。此外，不需要此扩展名。