eslint setup.md

Sure! Here's a step-by-step guide to setting up ESLint and Prettier to run automatically on save in Visual Studio Code for TypeScript and TSX files:

Create a new TypeScript project or navigate to an existing one in your terminal.

Install the necessary packages as development dependencies:

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser

This installs ESLint, Prettier, the ESLint/Prettier integration packages, and the TypeScript ESLint plugin.

Create a .eslintrc.js (or rename your .eslintrc.json to .js) file in the root directory of your project with the following content:

module.exports = {
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
  plugins: ["@typescript-eslint", "prettier"],
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
  ],
  rules: {},
};

This sets up ESLint to use the TypeScript parser, as well as the recommended rules for TypeScript and the recommended rules for Prettier.

Create a .prettierrc file in the root directory of your project with the following content:

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

This sets up Prettier to use the specified formatting options.

In Visual Studio Code, open the settings editor by going to "Preferences: Open User Settings" (or by pressing Ctrl + , on Windows or Cmd + , on Mac).

Search for "format on save" and enable the "Editor: Format On Save" option.

In the settings editor, click on the "Open Workspace Settings" button (or add the following to your .vscode/settings.json file):

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "eslint.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

This sets up Visual Studio Code to use Prettier as the default formatter, and to run ESLint on TypeScript and TSX files.

In the extensions, CMD+Shift+P, search for Prettier, and make sure you have the one from prettier.io installed, and none of the others.

Restart Visual Studio Code for the changes to take effect.

With these steps, you should now be able to write TypeScript and TSX code in Visual Studio Code and have ESLint and Prettier automatically run on save. If there are any errors or warnings, they will be shown in the editor.