rome · MichaReiser · Nov 23, 2022 · Nov 21, 2022 · Nov 21, 2022 · Nov 23, 2022
diff --git a/website/src/playground/PlaygroundLoader.tsx b/website/src/playground/PlaygroundLoader.tsx
@@ -11,6 +11,7 @@ import {
 	QuoteStyle,
 	TrailingComma,
 	Semicolons,
+	LintRules,
 } from "./types";
 import {
 	createLocalStorage,
@@ -318,9 +319,9 @@ function initState(
 			semicolons:
 				(searchParams.get("semicolons") as Semicolons) ??
 				defaultPlaygroundState.settings.semicolons,
-			enabledNurseryRules:
-				searchParams.get("enabledNurseryRules") === "true" ||
-				defaultPlaygroundState.settings.enabledNurseryRules,
+			lintRules:
+				(searchParams.get("lintRules") as LintRules) ??
+				defaultPlaygroundState.settings.lintRules,
 			enabledLinting:
 				searchParams.get("enabledLinting") === "true" ||
 				defaultPlaygroundState.settings.enabledLinting,

diff --git a/website/src/playground/styles/_diagnostics.scss b/website/src/playground/styles/_diagnostics.scss
@@ -36,6 +36,7 @@ ul.diagnostics-list {
     padding-right: 10px;
     cursor: pointer;
     display: flex;
+    white-space: pre;
 
     img {
       margin: 7px 10px;

diff --git a/website/src/playground/styles/_settings.scss b/website/src/playground/styles/_settings.scss
@@ -70,7 +70,7 @@
   }
 
   select, input[type=number] {
-    width: 100px;
+    width: 110px;
   }
 
   select, input[type=number], .input-container {

diff --git a/website/src/playground/tabs/SettingsTab.tsx b/website/src/playground/tabs/SettingsTab.tsx
@@ -1,5 +1,6 @@
 import {
 	IndentStyle,
+	LintRules,
 	PlaygroundState,
 	QuoteProperties,
 	QuoteStyle,
@@ -41,7 +42,7 @@ export default function SettingsTab({
 			quoteProperties,
 			trailingComma,
 			semicolons,
-			enabledNurseryRules,
+			lintRules,
 			enabledLinting,
 		},
 	},
@@ -74,9 +75,9 @@ export default function SettingsTab({
 		setPlaygroundState,
 		"semicolons",
 	);
-	const setEnabledNurseryRules = createPlaygroundSettingsSetter(
+	const setLintRules = createPlaygroundSettingsSetter(
 		setPlaygroundState,
-		"enabledNurseryRules",
+		"lintRules",
 	);
 	const setEnabledLinting = createPlaygroundSettingsSetter(
 		setPlaygroundState,
@@ -210,8 +211,8 @@ export default function SettingsTab({
 				setSemicolons={setSemicolons}
 			/>
 			<LinterSettings
-				enabledNurseryRules={enabledNurseryRules}
-				setEnabledNurseryRules={setEnabledNurseryRules}
+				lintRules={lintRules}
+				setLintRules={setLintRules}
 				enabledLinting={enabledLinting}
 				setEnabledLinting={setEnabledLinting}
 			/>
@@ -597,13 +598,13 @@ function FormatterSettings({
 }
 
 function LinterSettings({
-	enabledNurseryRules,
-	setEnabledNurseryRules,
+	lintRules,
+	setLintRules,
 	enabledLinting,
 	setEnabledLinting,
 }: {
-	enabledNurseryRules: boolean;
-	setEnabledNurseryRules: (value: boolean) => void;
+	lintRules: LintRules;
+	setLintRules: (value: LintRules) => void;
 	enabledLinting: boolean;
 	setEnabledLinting: (value: boolean) => void;
 }) {
@@ -622,16 +623,18 @@ function LinterSettings({
 					<label htmlFor="linting-enabled">Linter enabled</label>
 				</div>
 				<div className="field-row">
-					<input
-						id="nursery-rules"
-						aria-describedby="nursery-rules-description"
-						name="nursery-rules"
-						type="checkbox"
+					<label htmlFor="trailingComma">Lint Rules</label>
+					<select
+						id="lint-rules"
+						aria-describedby="lint-rules-description"
+						name="lint-rules"
 						disabled={!enabledLinting}
-						checked={enabledNurseryRules}
-						onChange={(e) => setEnabledNurseryRules(e.target.checked)}
-					/>
-					<label htmlFor="nursery-rules">Nursery lint rules</label>
+						value={lintRules ?? LintRules.Recommended}
+						onChange={(e) => setLintRules(e.target.value as LintRules)}
+					>
+						<option value={LintRules.Recommended}>Recommended</option>
+						<option value={LintRules.All}>All</option>
+					</select>
 				</div>
 			</section>
 		</>

diff --git a/website/src/playground/types.ts b/website/src/playground/types.ts
@@ -17,6 +17,11 @@ export enum QuoteStyle {
 	Single = "single",
 }
 
+export enum LintRules {
+	Recommended = "recommended",
+	All = "all",
+}
+
 export enum QuoteProperties {
 	AsNeeded = "as-needed",
 	Preserve = "preserve",
@@ -93,7 +98,7 @@ export interface PlaygroundSettings {
 	quoteProperties: QuoteProperties;
 	trailingComma: TrailingComma;
 	semicolons: Semicolons;
-	enabledNurseryRules: boolean;
+	lintRules: LintRules;
 	enabledLinting: boolean;
 }
 
@@ -132,7 +137,7 @@ export const defaultPlaygroundState: PlaygroundState = {
 		quoteProperties: QuoteProperties.AsNeeded,
 		trailingComma: TrailingComma.All,
 		semicolons: Semicolons.Always,
-		enabledNurseryRules: true,
+		lintRules: LintRules.Recommended,
 		enabledLinting: true,
 	},
 };

diff --git a/website/src/playground/workers/romeWorker.ts b/website/src/playground/workers/romeWorker.ts
@@ -7,6 +7,7 @@ import init, {
 } from "@rometools/wasm-web";
 import {
 	IndentStyle,
+	LintRules,
 	LoadingState,
 	PlaygroundSettings,
 	QuoteProperties,
@@ -65,7 +66,7 @@ self.addEventListener("message", async (e) => {
 				indentWidth,
 				quoteStyle,
 				quoteProperties,
-				enabledNurseryRules,
+				lintRules,
 				enabledLinting,
 				trailingComma,
 				semicolons,
@@ -98,10 +99,19 @@ self.addEventListener("message", async (e) => {
 				},
 			};
 
-			if (enabledNurseryRules) {
+			if (lintRules === LintRules.All) {
 				configuration.linter = {
 					enabled: enabledLinting,
 					rules: {
+						correctness: {
+							noRestrictedGlobals: "error",
+							noUndeclaredVariables: "error",
+							noUnusedVariables: "error",
+							noUselessFragments: "error",
+						},
+						style: {
+							useFragmentSyntax: "error",
+						},
 						nursery: {
 							noConstAssign: "error",
 							useExhaustiveDependencies: "error",