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提供多种设置选项，可以根据需要进行调整。
延伸问答
如何创建一个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扩展，以便正确使用它们。
