feat(eslint-config): wrap long comments (#49)

Prettier explicitly ignores comments. However, scrolling to read
comments is getting old quick, so explicitly wrapping them.

This may interfere with ascii-schema comments, but is pretty easy to
disable for that specific multi-line block.

Signed-off-by: Dirk de Visser <[email protected]>

Author: dirkdev98

apps/backend/plugins/base.ts

@@ -19,8 +19,8 @@ async function base(
 		.setValidatorCompiler(validatorCompiler)
 		.setSerializerCompiler(serializerCompiler);
 
-	// TODO: should only be enabled for specific plugin contexts. So we may want to expose a
-	// function with these defaults at some point?
+	// TODO: should only be enabled for specific plugin contexts. So we may want to expose a function
+	// with these defaults at some point?
 
 	await app.register(fastifyMultipart, {
 		limits: {
@@ -48,8 +48,7 @@ async function base(
 		},
 		attachFieldsToBody: true,
 
-		// TODO: with these limits, we probably want to specify an 'onFile' and save temporary to
-		//  disk.
+		// TODO: with these limits, we probably want to specify an 'onFile' and save temporary to disk.
 
 		...options.multipart,
 	});

package.json

@@ -4,6 +4,7 @@
 	"private": true,
 	"license": "MIT",
 	"scripts": {
+		"postinstall": "patch-package",
 		"lint:ws": "npm run lint --workspaces --if-present --include-workspace-root",
 		"lint:ci:ws": "npm run lint:ci --workspaces --if-present --include-workspace-root",
 		"build:ws": "npm run build && npm run build --workspaces --if-present",
@@ -17,6 +18,7 @@
 	"devDependencies": {
 		"@lightbase/eslint-config": "0.1.0",
 		"@lightbase/tsconfig": "0.1.0",
+		"patch-package": "8.0.0",
 		"typescript": "5.4.5"
 	},
 	"engines": {

packages/eslint-config/package.json

@@ -31,6 +31,7 @@
 		"eslint": "^8.57.0",
 		"eslint-config-flat-gitignore": "^0.1.5",
 		"eslint-import-resolver-typescript": "^3.6.1",
+		"eslint-plugin-comment-length": "1.7.3",
 		"eslint-plugin-file-progress": "^1.3.0",
 		"eslint-plugin-import-x": "^0.5.0",
 		"eslint-plugin-jsdoc": "^48.2.3",

packages/eslint-config/src/globs.ts

@@ -17,8 +17,7 @@ export const GLOBS = {
 };
 
 /**
- * Keep track of all used globs. We need this to use custom globs for running Prettier in
- * ESLint.
+ * Keep track of all used globs. We need this to use custom globs for running Prettier in ESLint.
  */
 export function globUse(globs: Array<string>) {
 	for (const glob of globs) {
@@ -50,9 +49,8 @@ export function globMarkdownSnippetFromGlob(glob: string) {
 }
 
 /**
- * Register all globs in use by custom configs. This is needed since we apply
- * those after the Prettier configuration. The Prettier config then uses a processor
- * to prevent parser conflicts.
+ * Register all globs in use by custom configs. This is needed since we apply those after the
+ * Prettier configuration. The Prettier config then uses a processor to prevent parser conflicts.
  */
 export function globUseFromUserConfig(...userConfigs: Array<FlatConfig.Config>) {
 	for (const conf of userConfigs) {

packages/eslint-config/src/imports.ts

@@ -8,8 +8,8 @@ export function imports(): Array<FlatConfig.Config> {
 	return [
 		{
 			// Setup import plugins. Includes unused-imports, to automatically remove them.
-			// This might not be the best experience if imports are added manually, but most people
-			// use auto-imports anyway (?!).
+			// This might not be the best experience if imports are added manually,
+			// but most people use auto-imports anyway (?!).
 			files: globUse([GLOBS.javascript, GLOBS.typescript]),
 			plugins: {
 				"import-x": pluginImport.default,
@@ -82,8 +82,8 @@ export function imports(): Array<FlatConfig.Config> {
 				"import-x/no-named-as-default": "off",
 				"import-x/no-named-as-default-member": "off",
 
-				// Re-enable once <https://github.com/import-js/eslint-plugin-import/issues/1479> is
-				// fixed. There is currently no related issue in eslint-plugin-import-x repo yet.
+				// Re-enable once <https://github.com/import-js/eslint-plugin-import/issues/1479> is fixed.
+				// There is currently no related issue in eslint-plugin-import-x repo yet.
 				"import-x/no-duplicates": "off",
 			},
 		},

packages/eslint-config/src/javascript.ts

@@ -1,15 +1,27 @@
 import eslintConfigs from "@eslint/js";
 import typescriptEslintParser from "@typescript-eslint/parser";
 import type { FlatConfig } from "@typescript-eslint/utils/ts-eslint";
+// @ts-expect-error no type defs
+import eslintPluginCommentLength from "eslint-plugin-comment-length";
 import pluginJsDoc from "eslint-plugin-jsdoc";
 import { GLOBS, globUse } from "./globs.js";
 import { lightbaseInternalPlugin } from "./plugin/index.js";
 
 export function javascript(): Array<FlatConfig.Config> {
+	const commentLengthOptions = {
+		mode: "overflow-only",
+		maxLength: 100,
+		logicalWrap: false,
+		tabSize: 2,
+		ignoreUrls: true,
+		ignoreCommentsWithCode: false,
+		tags: [],
+	};
+
 	return [
 		{
-			// Use the Typescript parser even if we don't Typescript. This allows us to use 'modern'
-			// JS features even if the built-in espree parser doesn't support it.
+			// Use the Typescript parser even if we don't Typescript. This allows us to use 'modern' JS
+			// features even if the built-in espree parser doesn't support it.
 			files: globUse([GLOBS.javascript]),
 			languageOptions: {
 				parser: typescriptEslintParser,
@@ -125,5 +137,17 @@ export function javascript(): Array<FlatConfig.Config> {
 				"jsdoc/valid-types": "off",
 			},
 		},
+
+		{
+			// Apply formatting on comments.
+			files: globUse([GLOBS.javascript, GLOBS.typescript]),
+			plugins: {
+				"comment-length": eslintPluginCommentLength as unknown as FlatConfig.Plugin,
+			},
+			rules: {
+				"comment-length/limit-single-line-comments": ["error", commentLengthOptions],
+				"comment-length/limit-multi-line-comments": ["error", commentLengthOptions],
+			},
+		},
 	] satisfies Array<FlatConfig.Config>;
 }

packages/eslint-config/src/plugin/node-builtin-module-url-import.ts

@@ -25,7 +25,8 @@ export const nodeBuiltinModuleUrlImport: AnyRuleModule = {
 	create(context) {
 		return {
 			ImportDeclaration(node) {
-				// Note that builtinModules doesn't include the `node:` specifier, so we automatically skip these once fixed.
+				// Note that builtinModules doesn't include the `node:` specifier, so we automatically skip
+				// these once fixed.
 				if (!builtinModules.includes(node.source.value)) {
 					return;
 				}

packages/eslint-config/src/prettier.ts

@@ -37,6 +37,7 @@ export function prettierConfig(config?: PrettierConfig) {
 
 	const defaultConfig = {
 		printWidth: 90,
+		tabWidth: 2,
 		useTabs: true,
 		semi: true,
 		singleQuote: false,
@@ -52,8 +53,8 @@ export function prettierConfig(config?: PrettierConfig) {
 	};
 	config.languageOverrides ??= {};
 
-	// Dynamically add processors. We need just the original source to pass to Prettier. So if
-	// the file is already parsed by another ESLint parser, we need to create a virtual file.
+	// Dynamically add processors. We need just the original source to pass to Prettier. So if the
+	// file is already parsed by another ESLint parser, we need to create a virtual file.
 	const processors: Array<FlatConfig.Config> = [];
 	const selectGlob = (a: string, processor: FlatConfig.Processor) => {
 		if (globIsUsed(a)) {
@@ -172,11 +173,11 @@ export function prettierConfig(config?: PrettierConfig) {
 }
 
 /**
- * Make files available under a `.format` extension. This is necessary for all filetypes
- * that have a custom parser configured.
+ * Make files available under a `.format` extension. This is necessary for all filetypes that have
+ * a custom parser configured.
  *
- * ESLint only supports a single parser per file-type. Through config merging, the 'plain'
- * parser we use above would always overwrite specific parsers.
+ * ESLint only supports a single parser per file-type. Through config merging, the 'plain' parser
+ * we use above would always overwrite specific parsers.
  *
  * This is kinda hacky and not exactly sure what the consequences are yet...
  */
@@ -187,8 +188,8 @@ function formatProcessor(): FlatConfig.Processor {
 			version: "-",
 		},
 		preprocess(text: string, filename: string): Array<string | Linter.ProcessorFile> {
-			// Passes through the original file, and includes one with the `.format` prefix. This
-			// is also called a 'virtual' file.
+			// Passes through the original file, and includes one with the `.format` prefix. This is also
+			// called a 'virtual' file.
 			return [
 				text,
 				{

packages/eslint-config/src/react.ts

@@ -14,8 +14,8 @@ export type ReactConfig = {
 };
 
 export async function react(config: ReactConfig): Promise<Array<FlatConfig.Config>> {
-	// Only expect the Next.js plugin if explicitly enabled.
-	// At some point we might infer this based on existence of the `next.config.js` file?
+	// Only expect the Next.js plugin if explicitly enabled. At some point we might infer this based
+	// on the existence of the `next.config.js` file?
 	const pluginNext =
 		config.withNextJs ?
 			(

packages/eslint-config/src/typescript.ts

@@ -16,8 +16,8 @@ export type TypescriptConfig =
  * explicitly passed.
  *
  * Prefers `tsconfig.eslint.json` over `tsconfig.json`. This distinction might be necessary,
- * since typescript-eslint expects all files to be part of the compile unit, but that might
- * not be needed for normal builds.
+ * since typescript-eslint expects all files to be part of the compile unit, but that might not be
+ * needed for normal builds.
  */
 export function typescriptResolveConfig(config?: TypescriptConfig): TypescriptConfig {
 	if (config === false) {
@@ -43,9 +43,9 @@ export function typescriptResolveConfig(config?: TypescriptConfig): TypescriptCo
 			config = false;
 		}
 	} else if (config.project === undefined) {
-		// An empty options object is passed, or an options object without project. Resolve
-		// project as if nothing was passed. This means that we might disable Typescript support
-		// even if the user explicitly passed `typescript: {}`.
+		// An empty options object is passed, or an options object without project. Resolve project as
+		// if nothing was passed. This means that we might disable Typescript support even if the user
+		// explicitly passed `typescript: {}`.
 		const emptyConfigResolved = typescriptResolveConfig(undefined);
 
 		if (