eslint/prettier 在 html 標簽中添加不需要的空間

Question

我正在嘗試向我的項目添加配置，以便代碼自動格式化。 我對 VS Code 中的用戶設置進行了一些更新，還安裝了 eslint 和 prettier。

現在，每當我嘗試保存我的代碼時，都會從中獲取更改器

<div className={style.app}>
  <div className={style.mobileHeader}>
    <div className={style.logoBox}>
    </div>
  </div>
</div>

至

<
    div className = {
      style.app
    } >
    <
    div className = {
      style.mobileHeader
    } >
    <
    div className = {
      style.logoBox
    } >

所有這些添加的空格不僅不可讀，我的 IDE 甚至沒有將其注冊為 JavaScript。

我在 my.eslintrc.js 或.eslintrc.json 中嘗試了許多不同的配置（我只有一個，但我嘗試了兩種命名約定）。 目前我已經刪除了my.eslintrc.json中的所有內容，除了空括號{}。 我最近也將我的用戶設置更新為

{
  "files.autoSave": "afterDelay",
  "window.zoomLevel": 0,
  "git.autofetch": true,
  "explorer.confirmDragAndDrop": false,
  "workbench.startupEditor": "welcomePage",
  "dart.flutterSdkPath": "/Users/trevor/Applications/flutter",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "python.pythonPath": "/usr/local/bin/python3",
  "editor.defaultFormatter": "octref.vetur",
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.validation.template": false,
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": true,
  "eslint.validate": [{
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "react",
      "autoFix": true
    },
  ]
}

我在想這里一定是有什么問題導致了這個問題，但我看不出它會是什么。

我注意到唯一被格式化的代碼是我的 React 頁面的 return 語句中的代碼。 其他代碼似乎未受影響。

Answer 1

這是我通常在 VS Code 中所做的，以獲得 Prettier 和 ES Lint 的干凈和工作配置

第 1 步在 VS Code 中安裝 Prettier 和 Eslint 擴展。 （如果尚未安裝）

步驟 2從npm為項目安裝prettier 、 eslint和eslint-config-prettier prettier 作為開發依賴項。 eslint-config-prettier很重要，因為它會關閉所有不必要或可能與 Prettier 沖突的 ESlint 規則。

npm install -D prettier eslint eslint-config-prettier

第 3 步在保存用戶設置上打開格式。

"editor.formatOnSave": true,

第 4 步確保 Prettier 需要一個配置文件。

"prettier.requireConfig": true,

第 5 步創建一個配置文件.prettierrc讓編輯器和其他工具知道您正在使用 Prettier，並將其保留為空以接受來自 prettier 的默認配置。 （它 99% 的時間都對我有用）

echo {} > .prettierrc.json

第 6 步還要確保 ESlint 在您的 vscode 用戶配置中不承擔任何格式化責任

"eslint.format.enable": false,

這是我在開始新項目時使用的非常基本的eslintrc.json配置。

{
  "extends": [
    "eslint:recommended",
    "prettier",
    "prettier/react"
  ],
  "plugins": [],
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": { "jsx": true }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

Prettier 、 ES Lint和eslint-config-prettier 的文檔參考

Answer 2

我剛剛遇到了同樣的問題。 就我而言，這是由於 JS-CSS-HTML Formatter VSCode 擴展。 禁用擴展解決了這個問題。

Answer 3

你可以試試這個

1-將這些安裝在 package.json 的 devDependencies 中

 "devDependencies": {
    "eslint": "^6.6.0",
    "eslint-config-airbnb-base": "^14.1.0",
    "eslint-config-prettier": "^6.10.1",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-prettier": "^3.1.2",
    "prettier": "^2.0.2",
  }

2-將此代碼添加到 eslint.js

module.exports = {
    env: {
      commonjs: true,
      es6: true,
      node: true
    },
    root: true,
    extends: ["airbnb-base", "prettier"],
    globals: {
      Atomics: "readonly",
      SharedArrayBuffer: "readonly"
    },
    parserOptions: {
      ecmaVersion: 2018
    },
    rules: { 
      "linebreak-style": 0,
      "arrow-body-style": ["error", "as-needed"],
      "prettier/prettier": [
        "error",
        {
          trailingComma: "es5",
          singleQuote: true
        }
      ]
    },
    plugins: ["prettier"]
  };

3-在vs代碼中打開設置並搜索json

4-單擊設置中的編輯。json 並更改不重要的命令

Answer 4

在devDependencies的package.json中安裝這些：

"devDependencies": {
  "eslint-config-prettier": "^6.10.1",
  "eslint-plugin-prettier": "^3.1.2",
  "prettier": "^2.0.4"
},

如果您使用的是create-react-app ，請將其添加到package.json ：

"eslintConfig": {
  "extends": [
    "react-app",
    "plugin:prettier/recommended"
  ],
  "ignorePatterns": [
    "node_modules/",
    "build/"
  ]
},

最重要的部分，在您的 VSCode settings.json ，添加這些行：

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"editor.formatOnSave": false,

現在當你保存一個 js、jsx、ts、tsx 文件時， eslint應該會自動修復任何問題，包括prettier的格式問題。

Answer 5

就我而言，最有價值的解決方案是忽略文檔的特定部分，在這些部分中我在添加prettier的空白時遇到了問題。

在這個例子中，prettier 之前將引號分成了自己的一行，因此文本在<q>標記的引號之間有空格。

<!-- prettier-ignore-start -->
<q>Make it work, make it right, make it fast.</q>
<!-- prettier-ignore-end -->