DEV Community
·
设置 Next.js | EsLint + Prettier - 快速方法 🚀
内容提要
创建Next.js应用，安装eslint-config-prettier以避免eslint与prettier冲突。配置eslint和prettier，创建.prettierrc文件设置格式化选项。在VsCode中安装相关扩展并配置自动格式化。
关键要点
-
创建Next.js应用，使用命令npx create-next-app@latest。
-
安装eslint-config-prettier以避免eslint与prettier之间的冲突。
-
在eslint.config.mjs文件中添加'prettier'到eslintConfig的extends中。
-
可以添加特定的eslint规则，例如关闭'react/react-in-jsx-scope'规则。
-
在项目根目录创建.prettierrc文件，设置格式化选项。
-
确保在VsCode中安装ESlint和Prettier扩展。
-
在项目根目录创建.vscode文件夹，并在其中创建settings.json文件以配置自动格式化。
-
VsCode提供多种设置选项，可以根据需要进行调整。
延伸解读
配置注意事项
在配置 ESLint 和 Prettier 时，确保在 eslint.config.mjs 文件中正确添加 'prettier'。这可以有效避免两者之间的冲突，确保代码格式化和 linting 的一致性。
个性化格式化选项
创建 .prettierrc 文件时，可以根据个人喜好设置格式化选项，如使用单引号或设置缩进宽度。建议参考 Prettier 文档，以便根据项目需求进行调整。
VSCode 自动格式化
在 VSCode 中配置自动格式化功能，可以提高开发效率。通过设置 editor.formatOnSave 和相关的代码操作，可以确保每次保存时自动应用格式化和修复规则。
延伸问答
如何创建一个Next.js应用？
使用命令npx create-next-app@latest来创建Next.js应用。
如何避免ESLint与Prettier之间的冲突？
安装eslint-config-prettier包以避免ESLint与Prettier之间的冲突。
如何配置ESLint以使用Prettier？
在eslint.config.mjs文件中，将'prettier'添加到eslintConfig的extends中。
如何设置Prettier的格式化选项？
在项目根目录创建.prettierrc文件，并添加所需的格式化选项，例如semi、singleQuote等。
在VSCode中如何自动格式化代码？
在项目根目录创建.vscode文件夹，并在其中创建settings.json文件，配置editor.formatOnSave为true。
VSCode中有哪些与ESLint和Prettier相关的扩展？
确保在VSCode中安装ESLint和Prettier扩展，以便正确使用它们。
