Set up Eslint and Prettier

Given I am in VS Code When there's an obvious code smell Then VS Code picks it up via the ESLint config

**Note: Look into potentially pushing up some VSCode config that would allow everyone on the team to have the same plugins and setup for those plugins (i.e. prettier, copilot, eslint, etc.)

[x] Add eslint extension in vscode
[x] Add prettier extension to vscode
[x] Add folder directory for vscode to root of the project
[x] add configurations for vscode directory for extension recommendation
[x] create prettierrc and eslintrc file is doesn't exits
[x] add if needed required dependencies
[x] add configurations for both prettierrc and eslintrc
[x] push changes up and check locally
[x] add script for prettier and eslint to run it locally
[x] Test locally
[x] Update ReadMe

If we end up wanting more robust prettier checks as single quotes or line break after certain charasteristics we can use something like this in prettierrc file

install plugins-> done:

{
    "semi": true,
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "es5",
    "printWidth": 80
  }

and add into package.json script

{
  "scripts": {
    "lint": "eslint . --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint",
    "lint:fix": "eslint . --fix --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint",
    "format": "prettier --write ."
  }
}

and update .eslintrc.cjs configurations to accommodate plugins we installed foreslint prettier


/** @type {import('eslint').Linter.Config} */
module.exports = {
  root: true,
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
  env: {
    browser: true,
    commonjs: true,
    es6: true,
    es2021: true,
  },
  ignorePatterns: ["!**/.server", "!**/.client"],

  // Base config
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended" // Add this line
  ],

  plugins: ["react", "jsx-a11y", "@typescript-eslint", "prettier"],

  rules: {
    "prettier/prettier": "error" // Ensure prettier errors are shown
  },

  overrides: [
    // React
    {
      files: ["**/*.{js,jsx,ts,tsx}"],
      plugins: ["react", "jsx-a11y"],
      extends: [
        "plugin:react/recommended",
        "plugin:react/jsx-runtime",
        "plugin:react-hooks/recommended",
        "plugin:jsx-a11y/recommended",
        "plugin:prettier/recommended" // Add this line
      ],
      settings: {
        react: {
          version: "detect",
        },
      },
    },

    // Typescript
    {
      files: ["**/*.{ts,tsx}"],
      plugins: ["@typescript-eslint", "import"],
      parser: "@typescript-eslint/parser",
      settings: {
        "import/internal-regex": "^~/",
        "import/resolver": {
          node: {
            extensions: [".ts", ".tsx"],
          },
          typescript: {
            alwaysTryTypes: true,
          },
        },
      },
      extends: [
        "plugin:@typescript-eslint/recommended",
        "plugin:import/recommended",
        "plugin:import/typescript",
        "plugin:prettier/recommended" // Add this line
      ],
    },

    // Node
    {
      files: [".eslintrc.cjs"],
      env: {
        node: true,
      },
    },
  ],
};

This way we can enforce consistent code style and specify formatting rules.

Impactworkers / iw-complaint-manager

Set up Eslint and Prettier #9