From 65b365f7559bf9f12392b023780fae4b0370d7b7 Mon Sep 17 00:00:00 2001 From: yuxing Date: Tue, 21 May 2024 14:50:52 +0800 Subject: [PATCH 1/4] support filename check --- .eslintrc.cjs | 10 ++++++++++ docs/project-structure.md | 17 +++++++++++++++++ package.json | 1 + yarn.lock | 8 ++++++++ 4 files changed, 36 insertions(+) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index ae91b587..028f7ea9 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -11,6 +11,7 @@ module.exports = { 'generators/*', ], extends: ['eslint:recommended'], + plugins: ['check-file'], overrides: [ { files: ['**/*.ts', '**/*.tsx'], @@ -125,6 +126,15 @@ module.exports = { '@typescript-eslint/no-empty-function': ['off'], '@typescript-eslint/no-explicit-any': ['off'], 'prettier/prettier': ['error', {}, { usePrettierrc: true }], + 'check-file/filename-naming-convention': [ + 'error', + { + '**/*.{ts,tsx}': 'KEBAB_CASE', + }, + { + ignoreMiddleExtensions: true, + }, + ], }, }, ], diff --git a/docs/project-structure.md b/docs/project-structure.md index 95a7ae45..aa1a0800 100644 --- a/docs/project-structure.md +++ b/docs/project-structure.md @@ -138,5 +138,22 @@ To enforce this, you can use ESLint: ], ``` +We can also enforce the file naming conventions. For example, you can enforce that all files should be named in `kebab-case`. This can help you to keep your codebase consistent and easier to navigate. + +To enforce this, you can use ESLint: + +```js +'check-file/filename-naming-convention': [ + 'error', + { + '**/*.{ts,tsx}': 'KEBAB_CASE', + }, + { + // ignore the middle extensions of the filename to support filename like bable.config.js or smoke.spec.ts + ignoreMiddleExtensions: true, + }, +], +``` + By following these practices, you can ensure that your codebase is well-organized, scalable, and maintainable. This will help you and your team to work more efficiently and effectively on the project. This approach can also make it easier to apply similar architecture to apps built with Next.js, Remix or React Native. diff --git a/package.json b/package.json index 999053f8..daed3a57 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "clsx": "^2.1.1", "dayjs": "^1.11.11", "dompurify": "^3.1.1", + "eslint-plugin-check-file": "^2.8.0", "lucide-react": "^0.378.0", "marked": "^12.0.2", "nanoid": "^5.0.7", diff --git a/yarn.lock b/yarn.lock index 158fcaeb..0754ce4a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4886,6 +4886,14 @@ eslint-module-utils@^2.7.4, eslint-module-utils@^2.8.0: dependencies: debug "^3.2.7" +eslint-plugin-check-file@^2.8.0: + version "2.8.0" + resolved "https://registry.npmmirror.com/eslint-plugin-check-file/-/eslint-plugin-check-file-2.8.0.tgz#6f93f28b25376ca9a7b0d741ca56a726d59f8db7" + integrity sha512-FvvafMTam2WJYH9uj+FuMxQ1y+7jY3Z6P9T4j2214cH0FBxNzTcmeCiGTj1Lxp3mI6kbbgsXvmgewvf+llKYyw== + dependencies: + is-glob "^4.0.3" + micromatch "^4.0.5" + eslint-plugin-import@^2.29.1: version "2.29.1" resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz#d45b37b5ef5901d639c15270d74d46d161150643" From 580640e40394763e84363cf96f13a96241412b14 Mon Sep 17 00:00:00 2001 From: yuxing Date: Tue, 21 May 2024 15:29:39 +0800 Subject: [PATCH 2/4] fix filename --- src/components/ui/form/__tests__/{Form.test.tsx => form.test.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/components/ui/form/__tests__/{Form.test.tsx => form.test.tsx} (100%) diff --git a/src/components/ui/form/__tests__/Form.test.tsx b/src/components/ui/form/__tests__/form.test.tsx similarity index 100% rename from src/components/ui/form/__tests__/Form.test.tsx rename to src/components/ui/form/__tests__/form.test.tsx From c4933b9262df2dc714bda7f71ae02ed2c5c50628 Mon Sep 17 00:00:00 2001 From: yuxing Date: Wed, 22 May 2024 16:01:27 +0800 Subject: [PATCH 3/4] add folder name convention --- .eslintrc.cjs | 6 ++++++ docs/project-standards.md | 26 ++++++++++++++++++++++++++ docs/project-structure.md | 17 ----------------- 3 files changed, 32 insertions(+), 17 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 028f7ea9..6d897d8e 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -135,6 +135,12 @@ module.exports = { ignoreMiddleExtensions: true, }, ], + 'check-file/folder-naming-convention': [ + 'error', + { + 'src/**/!(__tests__)': 'KEBAB_CASE', + }, + ], }, }, ], diff --git a/docs/project-standards.md b/docs/project-standards.md index 876a721a..ed019e26 100644 --- a/docs/project-standards.md +++ b/docs/project-standards.md @@ -49,3 +49,29 @@ For TypeScript (`tsconfig.json`) projects: ``` It is also possible to define multiple paths for various folders(such as `@components`, `@hooks`, etc.), but using `@/*` works very well because it is short enough so there is no need to configure multiple paths and it differs from other dependency modules so there is no confusion in what comes from `node_modules` and what is our source folder. That means that anything in the `src` folder can be accessed via `@`, e.g some file that lives in `src/components/my-component` can be accessed using `@/components/my-component` instead of `../../../components/my-component`. + +#### File naming conventions + +We can also enforce the file naming conventions and folder naming conventions in the project. For example, you can enforce that all files should be named in `kebab-case`. This can help you to keep your codebase consistent and easier to navigate. + +To enforce this, you can use ESLint: + +```js +'check-file/filename-naming-convention': [ + 'error', + { + '**/*.{ts,tsx}': 'KEBAB_CASE', + }, + { + // ignore the middle extensions of the filename to support filename like bable.config.js or smoke.spec.ts + ignoreMiddleExtensions: true, + }, +], +'check-file/folder-naming-convention': [ + 'error', + { + // all folders within src (except __tests__)should be named in kebab-case + 'src/**/!(__tests__)': 'KEBAB_CASE', + }, +], +``` diff --git a/docs/project-structure.md b/docs/project-structure.md index aa1a0800..95a7ae45 100644 --- a/docs/project-structure.md +++ b/docs/project-structure.md @@ -138,22 +138,5 @@ To enforce this, you can use ESLint: ], ``` -We can also enforce the file naming conventions. For example, you can enforce that all files should be named in `kebab-case`. This can help you to keep your codebase consistent and easier to navigate. - -To enforce this, you can use ESLint: - -```js -'check-file/filename-naming-convention': [ - 'error', - { - '**/*.{ts,tsx}': 'KEBAB_CASE', - }, - { - // ignore the middle extensions of the filename to support filename like bable.config.js or smoke.spec.ts - ignoreMiddleExtensions: true, - }, -], -``` - By following these practices, you can ensure that your codebase is well-organized, scalable, and maintainable. This will help you and your team to work more efficiently and effectively on the project. This approach can also make it easier to apply similar architecture to apps built with Next.js, Remix or React Native. From 0ec42519e8dd66d065ec9deec9bd0ac53793a634 Mon Sep 17 00:00:00 2001 From: Alan Alickovic Date: Thu, 23 May 2024 19:35:18 +0200 Subject: [PATCH 4/4] fix folder naming convention --- .eslintrc.cjs | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 6d897d8e..d14efd6a 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -135,10 +135,16 @@ module.exports = { ignoreMiddleExtensions: true, }, ], + }, + }, + { + plugins: ['check-file'], + files: ['src/**/!(__tests__)/*'], + rules: { 'check-file/folder-naming-convention': [ 'error', { - 'src/**/!(__tests__)': 'KEBAB_CASE', + '**/*': 'KEBAB_CASE', }, ], },