如何在 "codesandbox.io" 上配置 ESLint / Prettier 格式化规则
How to configure ESLint / Prettier formatting rules on "codesandbox.io"
关于“codesandbox.io”,我如何配置“Prettier”不再更改我的换行符(或者可能完全停用“Priettier”)?
另外,我怎样才能在那里停用 ESLint 中的某个规则(在我的例子中,我想关闭 react-hooks/rules-of-hooks
)——我的 ES201x 项目中似乎忽略了新创建的 ``eslintrc` 文件?谢谢
我找不到防止 prettier 删除换行符的方法,所以我只关闭了保存时设置。它对我来说并不经常出现,所以在编辑器中美化代码很容易。
我也在寻找一种方法来覆盖 eslint 规则
您可以通过以下方式添加 prettier
配置文件来轻松配置 Sandbox 的格式化行为:
- 在沙盒的根文件夹中创建文件
.prettierrc
。
- 使用 JSON 语法将你想要的 formatting rules 添加到文件中。
例如,要更改我认为大多数人都讨厌的换行,请设置 printWidth
值:
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": false,
"singleQuote": true,
"printWidth": 25
}
保存文件并重新加载 Sandobox 页面。
下次保存任何文件时,代码将按照您在其中设置的规则进行格式化 .prettierrc
.
其他:
似乎需要重新加载沙盒页面才能进行设置。在 re-opening 之后,文件 .prettierrc
将显示为 UI 而不是文件。
要添加新的格式规则,请打开显示为 UI 的文件 .prettierrc
,然后单击 Open file in editor
并添加您需要的规则。
这里是the list of Prettier config options可以设置在.prettierrc
.
要enable/disable 更漂亮的格式,请执行以下操作:
Cmd + Shift + P
--> Select Preferences: Open Settings (UI)
--> 搜索 Editor: Format on Save
--> Disable/Enable 选项 .
尽情享受吧!
关于“codesandbox.io”,我如何配置“Prettier”不再更改我的换行符(或者可能完全停用“Priettier”)?
另外,我怎样才能在那里停用 ESLint 中的某个规则(在我的例子中,我想关闭 react-hooks/rules-of-hooks
)——我的 ES201x 项目中似乎忽略了新创建的 ``eslintrc` 文件?谢谢
我找不到防止 prettier 删除换行符的方法,所以我只关闭了保存时设置。它对我来说并不经常出现,所以在编辑器中美化代码很容易。
我也在寻找一种方法来覆盖 eslint 规则
您可以通过以下方式添加 prettier
配置文件来轻松配置 Sandbox 的格式化行为:
- 在沙盒的根文件夹中创建文件
.prettierrc
。 - 使用 JSON 语法将你想要的 formatting rules 添加到文件中。
例如,要更改我认为大多数人都讨厌的换行,请设置 printWidth
值:
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": false,
"singleQuote": true,
"printWidth": 25
}
保存文件并重新加载 Sandobox 页面。
下次保存任何文件时,代码将按照您在其中设置的规则进行格式化
.prettierrc
.
其他:
似乎需要重新加载沙盒页面才能进行设置。在 re-opening 之后,文件
.prettierrc
将显示为 UI 而不是文件。要添加新的格式规则,请打开显示为 UI 的文件
.prettierrc
,然后单击Open file in editor
并添加您需要的规则。这里是the list of Prettier config options可以设置在
.prettierrc
.要enable/disable 更漂亮的格式,请执行以下操作:
Cmd + Shift + P
--> SelectPreferences: Open Settings (UI)
--> 搜索Editor: Format on Save
--> Disable/Enable 选项 .
尽情享受吧!