a) Next.js 在其主文件名称中使用下划线,例如_app.js, _document.js => 使用 snake_case.
的参数b) 在 GitLab 存储库中,Next.js 使用 kebap-case 作为文件夹名称
https://github.com/vercel/next.js/tree/canary/examples
和 PascalCase 用于文件名。
https://github.com/vercel/next.js/tree/canary/examples/amp-first/components/amp
c) Next.js 支持EsLint。以下 eslint 插件:
https://www.npmjs.com/package/eslint-plugin-folders-rules
https://www.npmjs.com/package/eslint-plugin-filenames
使用 camelCase 作为文件夹和文件名的默认名称(但也支持不同的约定)。
d)对于 Node.js 应用程序 kebap-case 似乎是一种标准:
=> 是否可以告诉 next.js 对 _app.js、_document.js 使用不同的名称? => 如果没有,我该如何定义 eslint 的异常?
=> 或者我应该坚持使用 Snake_case (这在其他 JavaScript 框架中并不常见)?
这是我当前的 .eslintrc.json:
{
"extends": "next/core-web-vitals",
"plugins": [
"folders",
"filenames"
],
"rules": {
"filenames/match-regex": [2, "^[a-z-]+$", true],
"filenames/match-exported": [ 2, "kebab" ],
"folders/match-regex": [2, "^[a-z-]+$", "/front_end/"]
}
}
和依赖项:
"eslint": "8.27.0",
"eslint-config-next": "^12.3.1",
"eslint-plugin-filenames": "1.3.2",
"eslint-plugin-folders": "1.0.3",
"eslint-plugin-jest": "27.1.1",
"eslint-plugin-jsx-a11y": "6.6.1",
"eslint-plugin-node": "11.1.0",
"eslint-plugin-react-hooks": "4.6.0",
(如果我将 _app.js 重命名为 my-app.js,next.js 就找不到它了)
我在 kebap-case 和 next.js 细节之间使用以下折衷方案:
a) kebap-case,文件名带有可选的 _ 前缀和
b) 文件夹名称的 kebap-case 周围可选的方括号
{
"extends": "next/core-web-vitals",
"plugins": [
"folders",
"filenames"
],
"rules": {
"filenames/match-regex": [2, "^(_)?[a-z-]+$"], // kebap-case with optional _ prefix for next.js main files like _app.js
"folders/match-regex": [2, "^(\\u005B)?[a-z-]+(\\u005D)?$", "/front_end/"], // kebap-case with optional [ ] brackets
}
}
这允许
_app.js
和 [my-variable]
我没有看到让派生名称规则发挥作用的机会。
如果有更好的选择,请告诉我,例如将 _app.js 添加到某种忽略列表中。
对于 Next.js,文件夹和文件名约定已更改为更低的
kebab-case
。组件名称仍然使用 PascalCase
。
super-amazing-app
- blog
- navigation-bar.tsx
export const NavigationBar = () => { ... }
原因:
kebab-case
与 URL 命名方案和实践更加一致。这样就更容易解析和理解。例如:
localhost:3000/blog/super-amazing-articles/1
对
localhost:3000/Blog/SuperAmazingArticles/1
围绕文件夹和文件命名大小写的操作系统 (OS) 问题并不那么成问题,因为例如在 macOS 上,Git 有时无法检测到区分大小写的更改。