eslint/prettier 在 html 标签中添加不需要的空间
Posted
技术标签:
【中文标题】eslint/prettier 在 html 标签中添加不需要的空间【英文标题】:eslint/prettier adding unwanted space into html tags 【发布时间】:2020-11-19 04:01:13 【问题描述】:我正在尝试向我的项目添加配置,以便代码自动格式化。我对 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。
我在 .eslintrc.js 或 .eslintrc.json 中尝试了许多不同的配置(我只有一个,但我尝试了两种命名约定)。目前我已经删除了 .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 语句中的代码。其他代码似乎没有受到影响。
【问题讨论】:
您能否验证文件->首选项->设置,并搜索“格式化程序”,是否实际选择了“esbenp.prettier-vscode”作为默认格式化程序? minimal-reproducible-example,请 @MudkIPHacker 是的,prettier 是默认格式化程序 【参考方案1】:你可以试试这个
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- 点击 settings.json 中的编辑并更改不重要的命令
【讨论】:
这似乎不起作用。真正奇怪的是,偶尔在进入我的 package.json(没有改变任何东西)然后进入我可以保存的一个 .js 文件之后,自动格式化程序会适当地格式化【参考方案2】:这是我通常在 VS Code 中所做的,以获得 Prettier 和 ES Lint 的干净和工作配置
第 1 步 在 VS Code 中安装 Prettier 和 Eslint 扩展。 (如果尚未安装)
第 2 步 将项目的 npm
中的 prettier
、eslint
和 eslint-config-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 的文档参考
【讨论】:
【参考方案3】:在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
格式问题。
【讨论】:
【参考方案4】:我刚刚遇到了同样的问题。就我而言,这是由于 JS-CSS-HTML Formatter VSCode 扩展。禁用扩展解决了这个问题。
【讨论】:
【参考方案5】:在我的例子中,最有价值的解决方案是忽略文档的特定部分,我在 prettier
添加空格时遇到问题。
在此示例中,prettier 之前将引号分成了自己的行,因此文本在 <q>
标记的引号之间有空格。
<!-- prettier-ignore-start -->
<q>Make it work, make it right, make it fast.</q>
<!-- prettier-ignore-end -->
【讨论】:
以上是关于eslint/prettier 在 html 标签中添加不需要的空间的主要内容,如果未能解决你的问题,请参考以下文章
使用eslint+prettier+husky+lint-staged+commitlint+stylelint规范项目格式
删除 `(` eslint (prettier/prettier)
15分钟快速配置eslint,prettier,lint-staged,husky,commitizen实现前端项目代码规范化