Implement Custom Linting Rules

[rcmtcristian]

Description

Add custom ESLint configuration to enforce consistent code quality standards across Amplify. Currently we have a basic lint.yml workflow but need proper rule definitions.

Goal: Standardize code formatting and catch common issues before they reach production.

Use Case: Enforce consistent coding standards for JavaScript (TypeScript), and Vue components with automated PR checks.

Step 1: Create the Directory Structure

Directory: .github/linters/ - Create this directory here and add .eslintrc.json This is where ESLint will look for our custom configuration

Implementation Instructions (for Copilot)

Ask Copilot to generate a comprehensive ESLint configuration for an Amplify focusing on Vue 3 and JavaScript (TypeScript):

Step 2: Generate the ESLint Configuration

Create an ESLint configuration file at `.github/linters/.eslintrc.json` that:
1. Supports JavaScript, TypeScript, and Vue 3 files
2. Uses "vue-eslint-parser" as main parser with "@typescript-eslint/parser" in parserOptions.parser
3. Sets environment: browser: true, node: true, es2022: true
4. Includes rules for: semi-colons, single quotes, 2-space indentation, no console warnings
5. Extends: eslint:recommended, @typescript-eslint/recommended, plugin:vue/vue3-recommended
6. Handles .vue files with TypeScript script setup syntax
7. Disables conflicting rules: turn off "no-unused-vars" and use "@typescript-eslint/no-unused-vars" instead
8. Allows single-word Vue component names: "vue/multi-word-component-names": "off"

Step 3: Update the existing .github/workflows/lint.yml here to use this custom config:

Find the existing ESLint command in lint.yml (probably "npx eslint ." or similar)
Replace with: npx eslint . --ext .js,.ts,.vue --config .github/linters/.eslintrc.json

Step 4: Testing

Ask how Copilot how to test it.

How do I test this config and workflow?

---

Required Dependencies:

npm install --save-dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-vue vue-eslint-parser

Notes

• Start with lenient rules and gradually make them stricter

• Use "warn" instead of "error" initially to avoid blocking PRs

• Add .eslintignore file to exclude dist/, node_modules/, etc.

• Make sure you have the dependencies installed or if you need to install them

• This uses: actions/checkout@2541b1294d2704b0964813337f33b291d3f8596b is an official GitHub Action located at: Repository: actions/checkout

Acceptance Criteria

• .github/linters/.eslintrc.json created with Vue + JavaScript (TypeScript) support
• Existing lint.yml workflow updated to use custom config
• Test PR shows linting rules working correctly
• Rules catch common issues (missing semicolons, unused vars, etc.)

[Dunridge]

Branch: issue-1028

[Dunridge]

Branch: issue-1028

[Dunridge]

Branch: issue-1028