Feat/create config for eslint, commitlint, prettier and husky (#181)

.eslintignore

@@ -0,0 +1,2 @@
+dist
+node_modules

.eslintrc

@@ -8,7 +8,10 @@
     "eslint:recommended",
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:prettier/recommended"
+    "plugin:react-hooks/recommended",
+    "plugin:import/recommended",
+    "plugin:jsx-a11y/recommended",
+    "prettier"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -18,14 +21,15 @@
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
-  "plugins": ["react", "@typescript-eslint"],
+  "plugins": ["react", "@typescript-eslint", "react-hooks", "import", "jsx-a11y", "prettier"],
   "settings": {
     "react": {
       "version": "detect"
     }
   },
   "rules": {
-    "react/react-in-jsx-scope": "off"
+    "react/react-in-jsx-scope": "off",
+    "import/no-unresolved": "off"
   },
   "globals": {
     "chrome": "readonly"

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run commitlint ${1}

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

.prettierignore

@@ -0,0 +1,12 @@
+dist
+node_modules
+.gitignore
+.github
+.eslintignore
+.husky
+.nvmrc
+.prettierignore
+LICENSE
+*.md
+package-lock.json
+yarn.lock

.prettierrc

@@ -1,5 +1,9 @@
 {
-  "singleQuote": false,
-  "trailingComma": "es5",
-  "arrowParens": "always"
+  "trailingComma": "all",
+  "semi": true,
+  "singleQuote": true,
+  "arrowParens": "avoid",
+  "printWidth": 120,
+  "bracketSameLine": true,
+  "htmlWhitespaceSensitivity": "strict"
 }

README.md

@@ -42,8 +42,11 @@ This boilerplate is made for creating chrome extensions using React and Typescri
 - [Vite](https://vitejs.dev/)
 - [SASS](https://sass-lang.com/)
 - [Twind](https://twind.dev/)
-- [ESLint](https://eslint.org/)
 - [Prettier](https://prettier.io/)
+- [ESLint](https://eslint.org/)
+- [Husky](https://typicode.github.io/husky/getting-started.html#automatic-recommended)
+- [Commitlint](https://commitlint.js.org/#/guides-local-setup?id=install-commitlint)
+- [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary)
 - [Chrome Extension Manifest Version 3](https://developer.chrome.com/docs/extensions/mv3/intro/)
 - HRR(Hot Rebuild & Refresh/Reload)
 

commitlint.config.js

@@ -0,0 +1 @@
+export default { extends: ['@commitlint/config-conventional'] };

jest.config.js

@@ -23,15 +23,15 @@ export default {
   // collectCoverageFrom: undefined,
 
   // The directory where Jest should output its coverage files
-  coverageDirectory: "coverage",
+  coverageDirectory: 'coverage',
 
   // An array of regexp pattern strings used to skip coverage collection
   // coveragePathIgnorePatterns: [
   //   "/node_modules/"
   // ],
 
   // Indicates which provider should be used to instrument code for coverage
-  coverageProvider: "v8",
+  coverageProvider: 'v8',
 
   // A list of reporter names that Jest uses when writing coverage reports
   // coverageReporters: [
@@ -82,9 +82,9 @@ export default {
 
   // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
   moduleNameMapper: {
-    "^@src(.*)$": "<rootDir>/src$1",
-    "^@assets(.*)$": "<rootDir>/src/assets$1",
-    "^@pages(.*)$": "<rootDir>/src/pages$1",
+    '^@src(.*)$': '<rootDir>/src$1',
+    '^@assets(.*)$': '<rootDir>/src/assets$1',
+    '^@pages(.*)$': '<rootDir>/src/pages$1',
   },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
@@ -97,7 +97,7 @@ export default {
   // notifyMode: "failure-change",
 
   // A preset that is used as a base for Jest's configuration
-  preset: "ts-jest",
+  preset: 'ts-jest',
 
   // Run tests from one or more projects
   // projects: undefined,
@@ -129,7 +129,7 @@ export default {
   // runner: "jest-runner",
 
   // The paths to modules that run some code to configure or set up the testing environment before each test
-  setupFiles: ["./test-utils/jest.setup.js"],
+  setupFiles: ['./test-utils/jest.setup.js'],
 
   // A list of paths to modules that run some code to configure or set up the testing framework before each test
   // setupFilesAfterEnv: [],
@@ -141,7 +141,7 @@ export default {
   // snapshotSerializers: [],
 
   // The test environment that will be used for testing
-  testEnvironment: "jsdom",
+  testEnvironment: 'jsdom',
 
   // Options that will be passed to the testEnvironment
   // testEnvironmentOptions: {},
@@ -157,10 +157,10 @@ export default {
 
   // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
   testPathIgnorePatterns: [
-    "<rootDir>/node_modules/",
-    "<rootDir>/test-utils/",
-    "<rootDir>/vite.config.ts",
-    "<rootDir>/jest.config.js",
+    '<rootDir>/node_modules/',
+    '<rootDir>/test-utils/',
+    '<rootDir>/vite.config.ts',
+    '<rootDir>/jest.config.js',
   ],
 
   // The regexp pattern or array of patterns that Jest uses to detect test files

manifest.ts

@@ -1,4 +1,4 @@
-import packageJson from "./package.json";
+import packageJson from './package.json';
 
 /**
  * After changing, please reload the extension at `chrome://extensions`
@@ -8,40 +8,35 @@ const manifest: chrome.runtime.ManifestV3 = {
   name: packageJson.name,
   version: packageJson.version,
   description: packageJson.description,
-  permissions: ["storage"],
-  options_page: "src/pages/options/index.html",
+  permissions: ['storage'],
+  options_page: 'src/pages/options/index.html',
   background: {
-    service_worker: "src/pages/background/index.js",
-    type: "module",
+    service_worker: 'src/pages/background/index.js',
+    type: 'module',
   },
   action: {
-    default_popup: "src/pages/popup/index.html",
-    default_icon: "icon-34.png",
+    default_popup: 'src/pages/popup/index.html',
+    default_icon: 'icon-34.png',
   },
   chrome_url_overrides: {
-    newtab: "src/pages/newtab/index.html",
+    newtab: 'src/pages/newtab/index.html',
   },
   icons: {
-    "128": "icon-128.png",
+    '128': 'icon-128.png',
   },
   content_scripts: [
     {
-      matches: ["http://*/*", "https://*/*", "<all_urls>"],
-      js: ["src/pages/content/index.js"],
+      matches: ['http://*/*', 'https://*/*', '<all_urls>'],
+      js: ['src/pages/content/index.js'],
       // KEY for cache invalidation
-      css: ["assets/css/contentStyle<KEY>.chunk.css"],
+      css: ['assets/css/contentStyle<KEY>.chunk.css'],
     },
   ],
-  devtools_page: "src/pages/devtools/index.html",
+  devtools_page: 'src/pages/devtools/index.html',
   web_accessible_resources: [
     {
-      resources: [
-        "assets/js/*.js",
-        "assets/css/*.css",
-        "icon-128.png",
-        "icon-34.png",
-      ],
-      matches: ["*://*/*"],
+      resources: ['assets/js/*.js', 'assets/css/*.css', 'icon-128.png', 'icon-34.png'],
+      matches: ['*://*/*'],
     },
   ],
 };