tgui: ESLint and VSCode settings improvements (#4354)

Co-authored-by: Aleksej Komarov <stylemistake@gmail.com>

.gitattributes

@@ -2,18 +2,18 @@
 
 ## Enforce text mode and LF line breaks
 *.bat text eol=lf
-*.css text eol=lf
+*.cjs text eol=lf
 *.css text eol=lf
 *.dm text eol=lf
 *.dme text eol=lf
 *.dmf text eol=lf
 *.htm text eol=lf
 *.html text eol=lf
-*.html text eol=lf
 *.js text eol=lf
 *.json text eol=lf
 *.jsx text eol=lf
 *.md text eol=lf
+*.ps1 text eol=lf
 *.py text eol=lf
 *.scss text eol=lf
 *.sh text eol=lf
@@ -39,7 +39,7 @@
 *.dmm text eol=lf merge=dmm
 *.dmi binary merge=dmi
 
-##Force tab indents on dm files
+## Force tab indents on dm files
 *.dm whitespace=indent-with-non-tab
 
 ## Force changelog merging to use union

.vscode/settings.json

@@ -20,5 +20,14 @@
 	],
 	"files.eol": "\n",
 	"gitlens.advanced.blame.customArguments": ["-w"],
-	"tgstationTestExplorer.project.resultsType": "json"
+	"tgstationTestExplorer.project.resultsType": "json",
+	"[javascript]": {
+		"editor.rulers": [80]
+	},
+	"[typescript]": {
+		"editor.rulers": [80]
+	},
+	"[scss]": {
+		"editor.rulers": [80]
+	}
 }

tgui/.eslintrc-harder.yml

@@ -1,15 +1,43 @@
 rules:
   ## Enforce a maximum cyclomatic complexity allowed in a program
-  complexity: [error, { max: 25 }]
+  # complexity: [warn, { max: 25 }]
   ## Enforce consistent brace style for blocks
-  brace-style: [error, stroustrup, { allowSingleLine: false }]
+  # brace-style: [warn, stroustrup, { allowSingleLine: false }]
   ## Enforce the consistent use of either backticks, double, or single quotes
-  quotes: [error, single, {
-    avoidEscape: true,
-    allowTemplateLiterals: true,
-  }]
-  react/jsx-closing-bracket-location: [error, {
-    selfClosing: after-props,
-    nonEmpty: after-props,
-  }]
-  react/display-name: error
+  # quotes: [warn, single, {
+  #   avoidEscape: true,
+  #   allowTemplateLiterals: true,
+  # }]
+  # react/jsx-closing-bracket-location: [warn, {
+  #   selfClosing: after-props,
+  #   nonEmpty: after-props,
+  # }]
+  # react/display-name: warn
+
+  ## Radar
+  ## ------------------------------------------------------
+  # radar/cognitive-complexity: warn
+  radar/max-switch-cases: warn
+  radar/no-all-duplicated-branches: warn
+  radar/no-collapsible-if: warn
+  radar/no-collection-size-mischeck: warn
+  radar/no-duplicate-string: warn
+  radar/no-duplicated-branches: warn
+  radar/no-element-overwrite: warn
+  radar/no-extra-arguments: warn
+  radar/no-identical-conditions: warn
+  radar/no-identical-expressions: warn
+  radar/no-identical-functions: warn
+  radar/no-inverted-boolean-check: warn
+  radar/no-one-iteration-loop: warn
+  radar/no-redundant-boolean: warn
+  radar/no-redundant-jump: warn
+  radar/no-same-line-conditional: warn
+  radar/no-small-switch: warn
+  radar/no-unused-collection: warn
+  radar/no-use-of-empty-return-value: warn
+  radar/no-useless-catch: warn
+  radar/prefer-immediate-return: warn
+  radar/prefer-object-literal: warn
+  radar/prefer-single-boolean-return: warn
+  radar/prefer-while: warn

tgui/.eslintrc.yml

@@ -9,9 +9,8 @@ env:
   es6: true
   browser: true
   node: true
-globals:
-  Byond: readonly
 plugins:
+  - radar
   - react
 settings:
   react:
@@ -20,7 +19,6 @@ rules:
 
   ## Possible Errors
   ## ----------------------------------------
-
   ## Enforce “for” loop update clause moving the counter in the right
   ## direction.
   # for-direction: error
@@ -509,7 +507,7 @@ rules:
   ## Require braces around arrow function bodies
   # arrow-body-style: error
   ## Require parentheses around arrow function arguments
-  arrow-parens: [error, as-needed]
+  # arrow-parens: [error, as-needed]
   ## Enforce consistent spacing before and after the arrow in arrow functions
   arrow-spacing: [error, { before: true, after: true }]
   ## Require super() calls in constructors

tgui/.prettierrc.yml

@@ -0,0 +1,12 @@
+arrowParens: always
+bracketSpacing: true
+endOfLine: lf
+jsxBracketSameLine: true
+jsxSingleQuote: false
+printWidth: 80
+proseWrap: preserve
+quoteProps: preserve
+semi: true
+singleQuote: true
+tabWidth: 2
+trailingComma: es5

tgui/bin/tgui

@@ -67,7 +67,7 @@ task-lint() {
   cd "${base_dir}"
   yarn run tsc
   echo "tgui: type check passed"
-  yarn run eslint packages --ext .js,.jsx,.ts,.tsx,.cjs,.mjs "${@}"
+  yarn run eslint packages --ext .js,.cjs,.ts,.tsx "${@}"
   echo "tgui: eslint check passed"
 }
 

tgui/bin/tgui_.ps1

@@ -54,7 +54,7 @@ function task-dev-server {
 function task-lint {
   yarn run tsc
   Write-Output "tgui: type check passed"
-  yarn run eslint packages --ext ".js,.jsx,.ts,.tsx,.cjs,.mjs" @Args
+  yarn run eslint packages --ext ".js,.cjs,.ts,.tsx" @Args
   Write-Output "tgui: eslint check passed"
 }
 

tgui/jest.config.js

@@ -1,14 +1,14 @@
 module.exports = {
   roots: ['<rootDir>/packages'],
   testMatch: [
-    '<rootDir>/packages/**/__tests__/*.{js,jsx,ts,tsx}',
-    '<rootDir>/packages/**/*.{spec,test}.{js,jsx,ts,tsx}',
+    '<rootDir>/packages/**/__tests__/*.{js,ts,tsx}',
+    '<rootDir>/packages/**/*.{spec,test}.{js,ts,tsx}',
   ],
   testEnvironment: 'jsdom',
   testRunner: require.resolve('jest-circus/runner'),
   transform: {
-    '^.+\\.(js|jsx|ts|tsx|cjs|mjs)$': require.resolve('babel-jest'),
+    '^.+\\.(js|cjs|ts|tsx)$': require.resolve('babel-jest'),
   },
-  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json'],
+  moduleFileExtensions: ['js', 'cjs', 'ts', 'tsx', 'json'],
   resetMocks: true,
 };

tgui/package.json

@@ -23,6 +23,7 @@
     "common": "workspace:*",
     "css-loader": "^5.1.1",
     "eslint": "^7.21.0",
+    "eslint-plugin-radar": "^0.2.1",
     "eslint-plugin-react": "^7.22.0",
     "file-loader": "^6.2.0",
     "inferno": "^7.4.8",

tgui/webpack.config.js

@@ -49,13 +49,13 @@ module.exports = (env = {}, argv) => {
       chunkLoadTimeout: 15000,
     },
     resolve: {
-      extensions: ['.tsx', '.ts', '.jsx', '.js'],
+      extensions: ['.tsx', '.ts', '.js'],
       alias: {},
     },
     module: {
       rules: [
         {
-          test: /\.(js|jsx|cjs|mjs|ts|tsx)$/,
+          test: /\.(js|cjs|ts|tsx)$/,
           use: [
             {
               loader: require.resolve('babel-loader'),

tgui/yarn.lock

@@ -3411,6 +3411,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-radar@npm:^0.2.1":
+  version: 0.2.1
+  resolution: "eslint-plugin-radar@npm:0.2.1"
+  peerDependencies:
+    eslint: ">= 3.0.0 <= 7.x.x"
+  checksum: 120e130e22376a43708611b43da2955142c55cd7ad0a770225364df3164fb1d084f7284d1763261573ab5efe6e635345ea44badb3f8cdc71ed763becd26b8da3
+  languageName: node
+  linkType: hard
+
 "eslint-plugin-react@npm:^7.22.0":
   version: 7.22.0
   resolution: "eslint-plugin-react@npm:7.22.0"
@@ -7677,6 +7686,7 @@ __metadata:
     common: "workspace:*"
     css-loader: ^5.1.1
     eslint: ^7.21.0
+    eslint-plugin-radar: ^0.2.1
     eslint-plugin-react: ^7.22.0
     file-loader: ^6.2.0
     inferno: ^7.4.8

tools/build/build.js

@@ -35,7 +35,11 @@ const taskTgui = new Task('tgui')
   .depends('tgui/yarn.lock')
   .depends('tgui/webpack.config.js')
   .depends('tgui/**/package.json')
+<<<<<<< HEAD
   .depends('tgui/packages/**/*.+(js|jsx|ts|tsx|cjs|mjs|scss)')
+=======
+  .depends('tgui/packages/**/*.+(js|cjs|ts|tsx|scss)')
+>>>>>>> 8080a5132ca (tgui: ESLint and VSCode settings improvements (#57905))
   .provides('tgui/public/tgui.bundle.css')
   .provides('tgui/public/tgui.bundle.js')
   .provides('tgui/public/tgui-common.bundle.js')