fix: switch to @stylistic/exp-list-style to resolve array edge-cases

Signed-off-by: Ferdinand Thiessen <[email protected]>

Author: susnux

lib/configs/codeStyle.ts

@@ -93,25 +93,15 @@ export function codeStyle(options: ConfigOptions): Linter.Config[] {
 					{ avoidQuotes: true },
 				],
 
-				// Enforce consistent new lines after [ and before ]
-				'@stylistic/array-bracket-newline': [
-					'error',
-					'consistent',
-				],
-				// Enforce new lines between array elements (better git diff) but allow to have single line arrays
-				'@stylistic/array-element-newline': ['error', 'consistent'],
-				// Same for objects as for arrays
-				'@stylistic/object-curly-newline': [
-					'error',
-					{
-						consistent: true,
-						multiline: true,
-					},
-				],
-				'@stylistic/object-property-newline': [
-					'error',
-					{ allowAllPropertiesOnSameLine: true },
-				],
+				// Enforce consistent new lines after brackets
+				'@stylistic/array-bracket-newline': 'off',
+				'@stylistic/array-bracket-spacing': 'off',
+				'@stylistic/array-element-newline': 'off',
+				'@stylistic/jsx-function-call-newline': 'off',
+				'@stylistic/object-curly-newline': 'off',
+				'@stylistic/object-curly-spacing': 'off',
+				'@stylistic/object-property-newline': 'off',
+				'@stylistic/exp-list-style': 'error',
 
 				// No space between function name and parenthesis. Enforce fn() instead of fn ()
 				'@stylistic/function-call-spacing': [

lib/configs/vue.ts

@@ -143,7 +143,8 @@ export function vue(options: ConfigOptions): Linter.Config[] {
 				'vue/prefer-separate-static-class': 'error',
 				// For consistent layout of components
 				'vue/define-macros-order': [
-					'error', {
+					'error',
+					{
 						order: [
 							'defineOptions',
 							'defineModel',

tests/fixtures/codestyle/input/array.js

@@ -1,16 +1,52 @@
-// This can be a single line
-const arr = ['first', 'second']
+/* eslint-disable no-unused-vars */
 
-// This is not a single line already and should be one element per line
-const arr2 = [
-	'first', 'second',
-	'third', 'and',
-	'so', 'on'
-]
-
-// This has a missing trailing comma causing too much git diff
-const arr3 = [
+// ❌ Trailing comma is required to make multi-line array diff-safe on changing the last element
+// Here the trailing comma is missing on a multi-line array and extra comma is present on a single-line array
+const items = [
 	'first',
 	'second',
 	'third'
 ]
+const LATIN_VOWELS = ['a', 'e', 'i', 'o', 'u',]
+
+// ❌ Multi-line array should have a single element per line to make it diff-safe and readable
+// Here the last two elements are on the same line
+const VARIANTS = [
+	'primary',
+	'secondary',
+	'tertiary', 'tertiary-no-background',
+]
+
+// ✅ In general it is recommended to prefer a multi-line array to make it diff-safe on adding/removing elements
+// It is especially important for dynamic array which entries may change
+const sampleUsers = [
+	'admin',
+	'alice',
+	'bob',
+]
+// Even if there is only one element at the moment (more elements may be added later)
+const MUTE_NOTIFICATIONS_USER_STATUSES = [
+	'dnd',
+]
+
+// ✅ Single-line arrays are also fine for short and stable arrays which are not expected to change
+// This is a developer's choice
+const selectedItems = ['default_item']
+const HTML_FORM_ACTIONS = ['POST', 'GET']
+
+// ❌ Single-line array should have brackets on the same line while multi-line array should have brackets on the next line
+const USER_STATUSES = [
+	'online',
+	'away',
+	'dnd',
+	'invisible',
+	'offline']
+// 🚧 Currently this is an edge case and isn't fixed properly...
+const WEEKDAYS = ['Monday',
+	'Tuesday',
+	'Wednesday',
+	'Thursday',
+	'Friday',
+	'Saturday',
+	'Sunday',
+]

tests/fixtures/codestyle/output/array.js

@@ -1,19 +1,47 @@
-// This can be a single line
-const arr = ['first', 'second']
+/* eslint-disable no-unused-vars */
 
-// This is not a single line already and should be one element per line
-const arr2 = [
+// ❌ Trailing comma is required to make multi-line array diff-safe on changing the last element
+// Here the trailing comma is missing on a multi-line array and extra comma is present on a single-line array
+const items = [
 	'first',
 	'second',
 	'third',
-	'and',
-	'so',
-	'on',
 ]
+const LATIN_VOWELS = ['a', 'e', 'i', 'o', 'u']
 
-// This has a missing trailing comma causing too much git diff
-const arr3 = [
-	'first',
-	'second',
-	'third',
+// ❌ Multi-line array should have a single element per line to make it diff-safe and readable
+// Here the last two elements are on the same line
+const VARIANTS = [
+	'primary',
+	'secondary',
+	'tertiary',
+	'tertiary-no-background',
+]
+
+// ✅ In general it is recommended to prefer a multi-line array to make it diff-safe on adding/removing elements
+// It is especially important for dynamic array which entries may change
+const sampleUsers = [
+	'admin',
+	'alice',
+	'bob',
+]
+// Even if there is only one element at the moment (more elements may be added later)
+const MUTE_NOTIFICATIONS_USER_STATUSES = [
+	'dnd',
+]
+
+// ✅ Single-line arrays are also fine for short and stable arrays which are not expected to change
+// This is a developer's choice
+const selectedItems = ['default_item']
+const HTML_FORM_ACTIONS = ['POST', 'GET']
+
+// ❌ Single-line array should have brackets on the same line while multi-line array should have brackets on the next line
+const USER_STATUSES = [
+	'online',
+	'away',
+	'dnd',
+	'invisible',
+	'offline',
 ]
+// 🚧 Currently this is an edge case and isn't fixed properly...
+const WEEKDAYS = ['Monday',	'Tuesday',	'Wednesday',	'Thursday',	'Friday',	'Saturday',	'Sunday']

tests/fixtures/codestyle/output/function.ts

@@ -48,7 +48,10 @@ export function doSomething(
  * @param num
  * @param enable
  */
-export function doSomethingDifferent(num: number, enable: boolean) {
+export function doSomethingDifferent(
+	num: number,
+	enable: boolean,
+) {
 	// ...
 }