Add linters, prettier, and scripts to automate codebase cleanliness

.github/pull_request_template.md

@@ -15,9 +15,12 @@ What changed in this PR?
 
 ## Sanity Check
 
+Run `yarn sanity-check` to verify these steps.
+
 - [ ] Have you run linters?
 - [ ] Have you run prettier?
 - [ ] Have you tried building?
+
 - [ ] Do you need to update the package version?
 
 ## Screenshots

.github/workflows/linting.yml

@@ -0,0 +1,30 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, and run linting
+
+name: Linting CI
+
+on:
+  push:
+    branches: ['main']
+  pull_request:
+    branches: ['main']
+
+jobs:
+  build:
+    name: Run linters and check build scripts
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+          cache: 'npm'
+      - name: Install
+        run: yarn install
+      - name: Run ESLint
+        run: yarn lint
+      - name: Run Prettier
+        run: yarn prettier-check
+      - name: Build
+        run: yarn build

.prettierignore

@@ -0,0 +1 @@
+.yarn/*

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "printWidth": 120,
+  "arrowParens": "always"
+}

README.md

@@ -12,15 +12,15 @@ Tailored Select is a Web Component built to be a searchable select box. Inspired
 
 ### Chosen
 
-* [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) As the foundational technology.
-* [Lit](https://lit.dev/) for easily creating Web Components.
-* [Vite](https://vitejs.dev/) for a fast development environment that handles developing, building, and publishing the project.
+- [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) As the foundational technology.
+- [Lit](https://lit.dev/) for easily creating Web Components.
+- [Vite](https://vitejs.dev/) for a fast development environment that handles developing, building, and publishing the project.
 
 ## Technology relationships
 
-* Web Component
-* Simple Form Component (TODO: link to rolemodel rails)
-* Capybara test helper (TODO: link to rolemodel rails)
+- Web Component
+- Simple Form Component (TODO: link to rolemodel rails)
+- Capybara test helper (TODO: link to rolemodel rails)
 
 ## Supported browsers
 
@@ -42,12 +42,7 @@ TODO: Add tests
 
 ## Editor plugins
 
-* TODO: Maybe add prettier?
-
-## Troubleshooting information
-
-* [App Status Page](http://app.<applicationname>.com/_ping) will give you information about what is running.
-* Alternatively, you can ssh in and check that the application server and web server are both running.
+- TODO: Maybe add prettier?
 
 ## Testing Strategy
 

eslint.config.js

@@ -0,0 +1,20 @@
+import prettier from 'eslint-config-prettier'
+
+export default [
+  {
+    files: ['**/*.js'],
+    plugins: {
+      prettier: prettier,
+    },
+    rules: {
+      'no-unused-vars': [
+        'warn',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+        },
+      ],
+    },
+  },
+]

package.json

@@ -40,13 +40,20 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint": "eslint 'src/**/*.js'",
+    "prettier": "prettier -w .",
+    "prettier-check": "prettier -c .",
+    "sanity-check": "yarn lint && yarn prettier && yarn build && rm -rf ./dist"
   },
   "devDependencies": {
     "vite": "^5.4.1"
   },
   "dependencies": {
+    "eslint": "^9.9.0",
+    "eslint-config-prettier": "^9.1.0",
     "lit": "^3.2.0",
+    "prettier": "^3.3.3",
     "sass": "^1.77.8"
   }
 }

tailored-select.code-workspace

@@ -0,0 +1,14 @@
+{
+  "folders": [
+    {
+      "path": ".",
+    },
+  ],
+  "settings": {
+    "prettier.configPath": ".prettierrc.json",
+    "editor.formatOnSave": true,
+  },
+  "extensions": {
+    "recommendations": ["esbenp.prettier-vscode"],
+  },
+}