chore: setup linter

.github/workflows/azure-static-web-app.yml

@@ -35,16 +35,14 @@ jobs:
         with:
           azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_WITTY_GROUND_00482BD00 }}
           repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
-          action: "upload"
-          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
+          action: upload
           # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
-          app_location: "packages/northstar" # App source code path
-          output_location: "dist" # Built app content directory - optional
+          app_location: packages/northstar # App source code path
+          output_location: dist # Built app content directory - optional
           skip_api_build: true
         env:
           PRE_BUILD_COMMAND: echo "do nothing"
           CUSTOM_BUILD_COMMAND: echo "do nothing"
-          ###### End of Repository/Build Configurations ######
 
   close_pull_request_job:
     if: github.event_name == 'pull_request' && github.event.action == 'closed'
@@ -56,4 +54,4 @@ jobs:
         uses: Azure/static-web-apps-deploy@v1
         with:
           azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_WITTY_GROUND_00482BD00 }}
-          action: "close"
+          action: close

.vscode/settings.json

@@ -17,5 +17,47 @@
   "[*.r.js][*.r.ts]": {
     "editor.guides.bracketPairs": "active"
   },
-  "editor.guides.bracketPairs": "active"
+  "editor.guides.bracketPairs": "active",
+
+  // Enable the ESlint flat config support
+  "eslint.experimental.useFlatConfig": true,
+
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off" },
+    { "rule": "format/*", "severity": "off" },
+    { "rule": "*-indent", "severity": "off" },
+    { "rule": "*-spacing", "severity": "off" },
+    { "rule": "*-spaces", "severity": "off" },
+    { "rule": "*-order", "severity": "off" },
+    { "rule": "*-dangle", "severity": "off" },
+    { "rule": "*-newline", "severity": "off" },
+    { "rule": "*quotes", "severity": "off" },
+    { "rule": "*semi", "severity": "off" }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml",
+    "toml"
+  ]
 }

eslint.config.js

@@ -0,0 +1,14 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu(
+  {
+    typescript: true,
+    ignores: ['packages/browser-tailwind/src/polyfill/*'],
+  },
+  {
+    rules: {
+      'ts/no-this-alias': ['off'],
+      'style/arrow-parens': ['error', 'as-needed'],
+    },
+  },
+)

package.json

@@ -1,22 +1,28 @@
 {
   "name": "@quasi-dev/monorepo",
-  "version": "0.0.0",
   "type": "module",
+  "version": "0.0.0",
   "private": true,
   "scripts": {
     "build": "pnpm -r run build",
     "dev": "pnpm dev:northstar",
     "dev:northstar": "pnpm -r --parallel --filter \"@quasi-dev/northstar...\" run dev",
     "check": "pnpm -r --parallel run check",
-    "prettier": "prettier --write .",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
   },
   "devDependencies": {
+    "@antfu/eslint-config": "^2.8.1",
+    "eslint": "^8.57.0",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",
-    "prettier": "3.0.0"
+    "simple-git-hooks": "^2.10.0"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "pnpm lint-staged"
   },
   "lint-staged": {
-    "**/*": "prettier --write --ignore-unknown"
+    "*": "eslint --fix"
   }
 }

packages/browser-tailwind/package.json

@@ -1,30 +1,30 @@
 {
   "name": "@quasi-dev/browser-tailwind",
-  "version": "0.0.0",
-  "description": "Compile Tailwind CSS in the browser",
   "type": "module",
+  "version": "0.0.0",
   "private": true,
-  "scripts": {
-    "check": "tsc --noEmit",
-    "build": "vite build"
-  },
-  "main": "./dist/browser-tailwind.js",
-  "types": "./src/index.ts",
+  "description": "Compile Tailwind CSS in the browser",
   "exports": {
     ".": {
-      "default": "./dist/browser-tailwind.js",
+      "types": "./src/index.ts",
       "import": "./dist/browser-tailwind.js",
-      "types": "./src/index.ts"
+      "default": "./dist/browser-tailwind.js"
     }
   },
+  "main": "./dist/browser-tailwind.js",
+  "types": "./src/index.ts",
+  "scripts": {
+    "check": "tsc --noEmit",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.5"
+  },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "typescript": "^5.4.2",
     "vite": "^4.4.8"
-  },
-  "dependencies": {
-    "postcss": "^8.4.31",
-    "tailwindcss": "^3.3.5"
   }
 }

packages/browser-tailwind/src/index.ts

@@ -1,60 +1,63 @@
-//@ts-nocheck
-import postcss, { Plugin } from "postcss";
-import tailwindcss, { Config } from "tailwindcss";
+/* eslint-disable node/prefer-global/process */
+/* eslint-disable no-restricted-globals */
+
+import type { Plugin } from 'postcss'
+import postcss from 'postcss'
+import type { Config } from 'tailwindcss'
+import tailwindcss from 'tailwindcss'
 import {
   VIRTUAL_CONTENT_EXTNAME,
   VIRTUAL_CONTENT_FILENAME,
   VIRTUAL_SOURCE_PATH,
-} from "./polyfill/constants";
+} from './polyfill/constants'
 
-//@ts-ignore
+// @ts-expect-error missing type
 self.process = {
   env: {},
-};
+}
 
 export async function compileTailwindCSS(
   cssInput: string,
   contentInput: string,
   extname: string,
-  config: Config | {} = {},
+  config: Config = {} as any,
   plugins: Plugin[] = [],
 ) {
-  self[VIRTUAL_CONTENT_EXTNAME] = extname;
+  self[VIRTUAL_CONTENT_EXTNAME] = extname
   // Tailwind scans the config.content for files to parse classNames -> set a virtual file here
-  if (!("content" in config)) {
+  if (!('content' in config)) {
     self[VIRTUAL_CONTENT_FILENAME] = contentInput;
-    (config as Config).content = [VIRTUAL_CONTENT_FILENAME];
+    (config as Config).content = [VIRTUAL_CONTENT_FILENAME]
   }
   return await postcss([
     tailwindcss(config as Config),
     formatNodes,
     ...plugins,
   ]).process(cssInput, {
     from: VIRTUAL_SOURCE_PATH,
-  });
+  })
 }
 
 // https://github.com/tailwindlabs/tailwindcss/blob/315e3a2445d682b2da9ca93fda77252fe32879ff/src/cli.js#L26-L42
 function formatNodes(root) {
-  indentRecursive(root);
-  if (root.first) {
-    root.first.raws.before = "";
-  }
+  indentRecursive(root)
+  if (root.first)
+    root.first.raws.before = ''
 }
 
 function indentRecursive(node, indent = 0) {
-  node.each &&
-    node.each((child, i) => {
-      if (
-        !child.raws.before ||
-        !child.raws.before.trim() ||
-        child.raws.before.includes("\n")
-      ) {
-        child.raws.before = `\n${
-          node.type !== "rule" && i > 0 ? "\n" : ""
-        }${"  ".repeat(indent)}`;
-      }
-      child.raws.after = `\n${"  ".repeat(indent)}`;
-      indentRecursive(child, indent + 1);
-    });
+  node.each
+  && node.each((child, i) => {
+    if (
+      !child.raws.before
+      || !child.raws.before.trim()
+      || child.raws.before.includes('\n')
+    ) {
+      child.raws.before = `\n${
+          node.type !== 'rule' && i > 0 ? '\n' : ''
+        }${'  '.repeat(indent)}`
+    }
+    child.raws.after = `\n${'  '.repeat(indent)}`
+    indentRecursive(child, indent + 1)
+  })
 }

packages/browser-tailwind/src/polyfill/colorette.ts

@@ -1,2 +1,2 @@
-//@ts-nocheck
-export const options = { enabled: false };
+// @ts-nocheck
+export const options = { enabled: false }

packages/browser-tailwind/src/polyfill/constants.ts

@@ -1,9 +1,9 @@
-//@ts-nocheck
+// @ts-nocheck
 /**
  * Dummy constant for Node like environment in Browser for lib depending on fs module, like PostCSS
  */
-export const VIRTUAL_SOURCE_PATH = "BROWSER_TAILWIND_VIRTUAL_SOURCE_PATH";
-export const VIRTUAL_CONTENT_FILENAME =
-  "BROWSER_TAILWIND_VIRTUAL_CONTENT_FILENAME";
-export const VIRTUAL_CONTENT_EXTNAME =
-  "BROWSER_TAILWIND_VIRTUAL_CONTENT_EXTNAME";
+export const VIRTUAL_SOURCE_PATH = 'BROWSER_TAILWIND_VIRTUAL_SOURCE_PATH'
+export const VIRTUAL_CONTENT_FILENAME
+  = 'BROWSER_TAILWIND_VIRTUAL_CONTENT_FILENAME'
+export const VIRTUAL_CONTENT_EXTNAME
+  = 'BROWSER_TAILWIND_VIRTUAL_CONTENT_EXTNAME'

packages/browser-tailwind/src/polyfill/fast-glob.ts

@@ -1,14 +1,14 @@
-//@ts-nocheck
+// @ts-nocheck
 export default {
-  sync: (patterns) => [].concat(patterns),
-  escapePath: (path) => path,
-  generateTasks: (patterns) => [
+  sync: patterns => [].concat(patterns),
+  escapePath: path => path,
+  generateTasks: patterns => [
     {
       dynamic: false,
-      base: ".",
+      base: '.',
       negative: [],
       positive: [].concat(patterns),
       patterns: [].concat(patterns),
     },
   ],
-};
+}

packages/browser-tailwind/src/polyfill/fs.ts

@@ -1,20 +1,20 @@
-//@ts-nocheck
-import { VIRTUAL_SOURCE_PATH } from "./constants";
+// @ts-nocheck
+import { VIRTUAL_SOURCE_PATH } from './constants'
 
-let i = 0;
-self.BUILD_ID = 0;
+let i = 0
+self.BUILD_ID = 0
 
 export default {
-  statSync: (id) => {
-    if (id === VIRTUAL_SOURCE_PATH) {
-      return { mtimeMs: self.BUILD_ID };
-    }
-    return { mtimeMs: ++i };
+  statSync: id => {
+    if (id === VIRTUAL_SOURCE_PATH)
+      return { mtimeMs: self.BUILD_ID }
+
+    return { mtimeMs: ++i }
   },
-  readFileSync: (id) => self[id] ?? "",
+  readFileSync: id => self[id] ?? '',
   promises: {
     readFile(id) {
-      return self[id] ?? "";
+      return self[id] ?? ''
     },
   },
-};
+}

packages/browser-tailwind/src/polyfill/glob-parent.ts

@@ -1,2 +1,2 @@
-//@ts-nocheck
-export default () => "";
+// @ts-nocheck
+export default () => ''

packages/browser-tailwind/src/polyfill/is-glob.ts

@@ -1,2 +1,2 @@
-//@ts-nocheck
-export default () => false;
+// @ts-nocheck
+export default () => false

packages/browser-tailwind/src/polyfill/path.ts

@@ -1,15 +1,15 @@
-//@ts-nocheck
-import { VIRTUAL_CONTENT_EXTNAME } from "./constants";
+// @ts-nocheck
+import { VIRTUAL_CONTENT_EXTNAME } from './constants'
 
-self.__dirname = "";
+self.__dirname = ''
 export default {
   join: () => {
-    return "";
+    return ''
   },
-  resolve: (id) => id,
-  extname: (id) => self[VIRTUAL_CONTENT_EXTNAME],
-};
+  resolve: id => id,
+  extname: _id => self[VIRTUAL_CONTENT_EXTNAME],
+}
 
-export const join = () => {
-  return "";
-};
+export function join() {
+  return ''
+}

packages/browser-tailwind/src/polyfill/url.ts

@@ -1,6 +1,6 @@
-//@ts-nocheck
+// @ts-nocheck
 export default {
   parse() {
-    return new URL(location.href);
+    return new URL(location.href)
   },
-};
+}

packages/browser-tailwind/tsconfig.json

@@ -1,8 +1,8 @@
 {
-  "include": ["src"],
   "compilerOptions": {
+    "lib": ["ESNext", "DOM"],
     "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "lib": ["ESNext", "DOM"]
-  }
+    "moduleResolution": "Bundler"
+  },
+  "include": ["src"]
 }