Add config-eslint, config-prettier, config-lint templates

extension-js · Sep 15, 2024 · 4140d5c · 4140d5c
1 parent c2344e8
commit 4140d5c
Show file tree

Hide file tree

Showing 44 changed files with 779 additions and 17 deletions.
diff --git a/examples/config-babel/manifest.json b/examples/config-babel/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "version": "0.0.1",
-  "name": "Config Babel Template",
+  "name": "Babel Template",
   "description": "An Extension.js example.",
   "icons": {
     "16": "images/extension_16.png",

diff --git a/examples/config-eslint/.gitignore b/examples/config-eslint/.gitignore
@@ -0,0 +1,31 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+dist
+
+# misc
+.DS_Store
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# lock files
+yarn.lock
+package-lock.json
+
+# debug files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# extension.js
+extension-env.d.ts
diff --git a/examples/config-eslint/eslint.config.mjs b/examples/config-eslint/eslint.config.mjs
@@ -0,0 +1,11 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+
+
+export default [
+  {files: ["**/*.{js,mjs,cjs,ts}"]},
+  {languageOptions: { globals: globals.browser }},
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+];
diff --git a/examples/config-eslint/images/extension_128.png b/examples/config-eslint/images/extension_128.png
diff --git a/examples/config-eslint/images/extension_16.png b/examples/config-eslint/images/extension_16.png
diff --git a/examples/config-eslint/images/extension_48.png b/examples/config-eslint/images/extension_48.png
diff --git a/examples/config-eslint/manifest.json b/examples/config-eslint/manifest.json
@@ -0,0 +1,14 @@
+{
+  "manifest_version": 3,
+  "version": "0.0.1",
+  "name": "ESLint Template",
+  "description": "An Extension.js example.",
+  "icons": {
+    "16": "images/extension_16.png",
+    "48": "images/extension_48.png",
+    "128": "images/extension_128.png"
+  },
+  "chrome_url_overrides": {
+    "newtab": "newtab/index.html"
+  }
+}
diff --git a/examples/config-eslint/newtab/index.html b/examples/config-eslint/newtab/index.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>ESLint Extension</title>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/sakura.css/css/sakura.css"
+      media="screen"
+    />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/sakura.css/css/sakura-dark.css"
+      media="screen and (prefers-color-scheme: dark)"
+    />
+    <link rel="stylesheet" href="./styles.css" media="screen" />
+  </head>
+  <body>
+    <header>
+      <h1>
+        <img
+          class="eslint"
+          src="../public/logo.svg"
+          alt="The ESLint logo"
+          width="120px"
+        />
+        <br />
+        Welcome to your ESLint Extension
+      </h1>
+      <p>
+        Learn more about creating cross-browser extensions at
+        <a href="https://extension.js.org" target="_blank"
+          >https://extension.js.org</a
+        >.
+      </p>
+    </header>
+  </body>
+  <script src="./scripts.ts"></script>
+</html>
diff --git a/examples/config-eslint/newtab/scripts.ts b/examples/config-eslint/newtab/scripts.ts
@@ -0,0 +1,11 @@
+function getManifest() {
+  return chrome.runtime.getManifest()
+}
+
+const manifest = getManifest()
+
+console.table({
+  name: manifest.name,
+  version: manifest.version,
+  description: manifest.description
+})
diff --git a/examples/config-eslint/newtab/styles.css b/examples/config-eslint/newtab/styles.css
@@ -0,0 +1,17 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: calc(100vh - 26px);
+}
+
+h1 {
+  font-size: 4.7em;
+}
+
+.eslint:hover {
+  filter: grayscale(1);
+  transition:
+    filter 2s,
+    border-color 2s;
+}
diff --git a/examples/config-eslint/package.json b/examples/config-eslint/package.json
@@ -0,0 +1,21 @@
+{
+  "private": true,
+  "name": "config-eslint",
+  "description": "An Extension.js example.",
+  "version": "0.0.1",
+  "author": {
+    "name": "Cezar Augusto",
+    "email": "boss@cezaraugusto.net",
+    "url": "https://cezaraugusto.com"
+  },
+  "scripts": {
+    "lint": "eslint ."
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.6.0",
+    "eslint": "^9.6.0",
+    "globals": "^15.9.0",
+    "typescript": "5.3.3",
+    "typescript-eslint": "^8.5.0"
+  }
+}
diff --git a/examples/config-eslint/public/logo.svg b/examples/config-eslint/public/logo.svg
diff --git a/examples/config-eslint/tsconfig.json b/examples/config-eslint/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "moduleResolution": "node",
+    "module": "esnext",
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "strict": true,
+    "target": "esnext",
+    "verbatimModuleSyntax": true,
+    "useDefineForClassFields": true,
+    "skipLibCheck": true
+  },
+  "include": ["./"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/examples/config-lint/.gitignore b/examples/config-lint/.gitignore
@@ -0,0 +1,31 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+dist
+
+# misc
+.DS_Store
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# lock files
+yarn.lock
+package-lock.json
+
+# debug files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# extension.js
+extension-env.d.ts
diff --git a/examples/config-lint/.prettierrc b/examples/config-lint/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true,
+  "quoteProps": "as-needed",
+  "trailingComma": "none",
+  "bracketSpacing": false,
+  "arrowParens": "always"
+}
diff --git a/examples/config-lint/.stylelintrc.json b/examples/config-lint/.stylelintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-standard-scss"
+}
diff --git a/examples/config-lint/eslint.config.mjs b/examples/config-lint/eslint.config.mjs
@@ -0,0 +1,15 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import prettier from "eslint-config-prettier";
+
+export default [
+  {files: ["**/*.{js,mjs,ts}"]},
+  {languageOptions: { globals: globals.browser }},
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  prettier,
+  {
+    ignores: ['dist/**'],
+  }
+];
diff --git a/examples/config-lint/images/extension_128.png b/examples/config-lint/images/extension_128.png
diff --git a/examples/config-lint/images/extension_16.png b/examples/config-lint/images/extension_16.png
diff --git a/examples/config-lint/images/extension_48.png b/examples/config-lint/images/extension_48.png
diff --git a/examples/config-lint/manifest.json b/examples/config-lint/manifest.json
@@ -0,0 +1,14 @@
+{
+  "manifest_version": 3,
+  "version": "0.0.1",
+  "name": "Lint Template",
+  "description": "An Extension.js example.",
+  "icons": {
+    "16": "images/extension_16.png",
+    "48": "images/extension_48.png",
+    "128": "images/extension_128.png"
+  },
+  "chrome_url_overrides": {
+    "newtab": "newtab/index.html"
+  }
+}
diff --git a/examples/config-lint/newtab/index.html b/examples/config-lint/newtab/index.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Lint Extension</title>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/sakura.css/css/sakura.css"
+      media="screen"
+    />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/sakura.css/css/sakura-dark.css"
+      media="screen and (prefers-color-scheme: dark)"
+    />
+    <link rel="stylesheet" href="./styles.css" media="screen" />
+  </head>
+  <body>
+    <header>
+      <h1>
+        <img
+          class="logo"
+          src="../public/logo.png"
+          alt="The Extension.js logo"
+          width="120px"
+        />
+        <br />
+        Welcome to your Lint Extension
+      </h1>
+      <p>
+        Learn more about creating cross-browser extensions at
+        <a href="https://extension.js.org" target="_blank"
+          >https://extension.js.org</a
+        >.
+      </p>
+    </header>
+  </body>
+  <script src="./scripts.ts"></script>
+</html>
diff --git a/examples/config-lint/newtab/scripts.ts b/examples/config-lint/newtab/scripts.ts
@@ -0,0 +1,11 @@
+function getManifest() {
+  return chrome.runtime.getManifest()
+}
+
+const manifest = getManifest()
+
+console.table({
+  name: manifest.name,
+  version: manifest.version,
+  description: manifest.description
+})
diff --git a/examples/config-lint/newtab/styles.css b/examples/config-lint/newtab/styles.css
@@ -0,0 +1,17 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: calc(100vh - 26px);
+}
+
+h1 {
+  font-size: 4.7em;
+}
+
+.logo:hover {
+  filter: grayscale(1);
+  transition:
+    filter 2s,
+    border-color 2s;
+}
diff --git a/examples/config-lint/package.json b/examples/config-lint/package.json
@@ -0,0 +1,27 @@
+{
+  "private": true,
+  "name": "config-lint",
+  "description": "An Extension.js example.",
+  "version": "0.0.1",
+  "author": {
+    "name": "Cezar Augusto",
+    "email": "boss@cezaraugusto.net",
+    "url": "https://cezaraugusto.com"
+  },
+  "scripts": {
+    "lint:js": "eslint .",
+    "lint:css": "npx stylelint '**/*.scss'",
+    "lint": "npm run lint:js && npm run lint:css",
+    "format": "prettier --write \"**/*.{ts,tsx,md,js,json,html,css}\""
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.6.0",
+    "eslint": "^9.6.0",
+    "eslint-config-prettier": "^9.1.0",
+    "globals": "^15.9.0",
+    "prettier": "^3.3.2",
+    "stylelint": "^16.7.0",
+    "typescript": "5.3.3",
+    "typescript-eslint": "^8.5.0"
+  }
+}
diff --git a/examples/config-lint/public/logo.png b/examples/config-lint/public/logo.png
diff --git a/examples/config-lint/tsconfig.json b/examples/config-lint/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "moduleResolution": "node",
+    "module": "esnext",
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "strict": true,
+    "target": "esnext",
+    "verbatimModuleSyntax": true,
+    "useDefineForClassFields": true,
+    "skipLibCheck": true
+  },
+  "include": ["./"],
+  "exclude": ["node_modules", "dist"]
+}