next.js 应用程序的推荐文件夹和文件命名约定(eslint 设置)是什么?

问题描述 投票:0回答:2

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 似乎是一种标准:

Node.js 项目文件和文件夹命名约定

=> 是否可以告诉 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 就找不到它了)

next.js eslint naming-conventions
2个回答
4
投票

我在 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 添加到某种忽略列表中。


0
投票

对于 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 有时无法检测到区分大小写的更改。

    例如:如何在 macOS 上的 git 中进行区分大小写的文件重命名

参考: Next JS 中的命名约定:提高 SEO 和代码可维护性。

© www.soinside.com 2019 - 2024. All rights reserved.