# What I Use

This is my current development setup.

### Tech Stack

- [TypeScript](https://www.typescriptlang.org/) as my main programming language.
- [React.js](https://reactjs.org) for UI creation.
- [Tailwind](https://tailwindcss.com/) for styling.
- [React Query](https://react-query.tanstack.com) for remote data-fetching.
- [Next.js](https://nextjs.org/) as my framework.
- [Jest](https://jestjs.io/) for unit testing.
- [React Testing Library](https://testing-library.com/react) for React testing.
- [Cypress](https://www.cypress.io/) for integration and E2E testing.
- [Vercel](https://vercel.com/) as my deployment platform.
- [GitHub Action](https://github.com/features/actions) for continuous integration, delivery and deployment pipelines.

### Tools

- [Safari](https://www.apple.com/safari/) as my main browser.
- [Sizzy](https://sizzy.co) as my development browser.
- [Hyper](https://hyper.is/) as my terminal, outside VSCode.
- [GitHub](https://github.com) for my code repositories.
- [GitHub Desktop](https://desktop.github.com) to use Git with a GUI instead of via CLI.
- [GitHub Mobile](https://github.com/mobile) to check GitHub on my phone.

### Editor

I use [VSCode](https://code.visualstudio.com) as my only IDE/code editor.

#### Theme

I use [GitHub Theme](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme), I enabled VSCode to switch between light and dark versions of this theme together with the system preferences

#### Plugins

- [Atom Keymap](https://marketplace.visualstudio.com/items?itemName=ms-vscode.atom-keybindings), this change the key bindings (shortcuts) to be the same as the Atom editor, I used this editor in the past which has the same shortcuts as Sublime Text and I prefer their shortcuts.
- [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag), this automatically add the matching close tag of an HTML/XML/JSX tag.
- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag), this let me change the name of an HTML/XML/JSX tag and it will change the closing tag automatically for me.
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker), a basic spellchecker with English and [Spanish](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker-spanish) support.
- [CODEOWNERS](https://marketplace.visualstudio.com/items?itemName=jasonnutter.vscode-codeowners), syntax highlight for [GitHub CODEOWNERS files](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/about-code-owners).
- [CSS-in-JS](https://marketplace.visualstudio.com/items?itemName=paulmolluzzo.convert-css-in-js), autocomplete for CSS in JS code.
- [Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker), autocomplete for `Dockerfile` files and a UI to control my Docker images.
- [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv), syntax highlight for `.env` files.
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint), run ESLint directly in VSCode.
- [Git Blame](https://marketplace.visualstudio.com/items?itemName=waderyan.gitblame), show latest person who touched (blame) the line of code I’m currently selecting.
- [Git Project Manager](https://marketplace.visualstudio.com/items?itemName=felipecaputo.git-project-manager), let me use my Git repos inside the configured folders as projects and switch between them with a simple shortcut.
- [GitHub Actions](https://marketplace.visualstudio.com/items?itemName=formulahendry.github-actions), syntax highlight for GitHub Actions files.
- [gitignore](https://marketplace.visualstudio.com/items?itemName=codezombiech.gitignore), syntax highlight for `gitignore` files and some other functions which I don’t really use.
- [GraphQL for VSCode](https://marketplace.visualstudio.com/items?itemName=kumar-harsh.graphql-for-vscode), syntax highlight for GraphQL code (inside `.gql` or `.graphql` files or tagged with a `gql` string literal tag.
- [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost), shows the size of the imported/required modules.
- [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow), show in different colors the indentation levels before a line of code.
- [Jest Snapshot Language Support](https://marketplace.visualstudio.com/items?itemName=tlent.jest-snapshot-language-support), syntax highlight for Jest Snapshot files.
- [JSDoc Markdown highlighting](https://marketplace.visualstudio.com/items?itemName=bierner.jsdoc-markdown-highlighting), syntax highlight for Markdown inside JSDoc comments.
- [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare), allow others to connect to my VSCode or allow me to connect to other people VSCode, I use it mostly for Pair Programming.
- [MDX](https://marketplace.visualstudio.com/items?itemName=silvenon.mdx), syntax highlight for MDX code.
- [npm](https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script), autocomplete for common `package.json` keys.
- [npm Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense), autocomplete import statements for modules installed with npm/yarn.
- [PostCSS Language Support](https://marketplace.visualstudio.com/items?itemName=csstools.postcss), better CSS syntax highlight with support for custom syntax used with PostCSS.
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode), run Prettier directly in VSCode.
- [Ruby](https://marketplace.visualstudio.com/items?itemName=rebornix.Ruby), syntax highlight for Ruby code and other features.
- [SVG](https://marketplace.visualstudio.com/items?itemName=jock.svg), nice tools to work with SVG code.
- [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss), autocomplete and other features for working with [Tailwind CSS](https://tailwindcss.com).
- [VSCode Ruby](https://marketplace.visualstudio.com/items?itemName=wingrunr21.vscode-ruby), improvement for Ruby language support in VSCode.
- [vscode-styled-components](https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components), syntax highlight and autocomplete for [styled-components](https://github.com/styled-components/styled-components).
- [vscode-styled-jsx](https://marketplace.visualstudio.com/items?itemName=blanu.vscode-styled-jsx), syntax highlight and autocomplete for [styled-jsx](https://github.com/vercel/styled-jsx).

### Prettier

For Prettier I don't like to customize it. The point of Prettier is to stop paying bikeshedding about code style.

### ESLint

I use a few plugins, with their recommended configuration, I don't like to spend too much time thinking about this and I don't like too strict rules, most of the rules I enable are to follow best practices or avoid common mistakes.

- [eslint-plugin-react-hooks](https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks), to enforce the [Rules of Hooks](https://reactjs.org/docs/hooks-rules.html), I use it extending `react-hooks/recommended` to have their recommended config.
- [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier), to let ESLint uses the same code style rules as Prettier, I use it extending `plugin:prettier/recommended` to have their recommended config.
- [eslint-plugin-unicorn](https://github.com/sindresorhus/eslint-plugin-unicorn), lots of rules to help avoid some errors, I use it extending `plugin:unicorn/recommended` to have their recommended config.
- [eslint-plugin-testing-library](https://github.com/testing-library/eslint-plugin-testing-library), some helpful rules to follow best practices of Testing Library, I use it extending ``plugin:testing-library/react` to have their recommended config for React.
- [eslint-plugin-cypress](https://github.com/cypress-io/eslint-plugin-cypress), some helpful ruls to avoid common errors when using Cypress, I use it extending `plugin:cypress/recommended` to have their recommended config.
- [@typescript-eslint/parser](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin), some rules to write better TS code, I use it extending `plugin:@typescript-eslint/recommended ` to have their recommended config.
- [eslint-plugin-import](https://github.com/benmosher/eslint-plugin-import), some rules related to imports, I use rules below:
  - `import/no-unresolved`: avoid importing modules that can't be resolved.
  - `import/no-anonymous-default-export`, avoid using export default with anonymous functions, classes and values.
  - `import/resolver`: configure how to resolve imports (required to support absolute paths)

I also use the next rules from ESLint (no plugins required)

- `yoda`, avoid conditions like `"red" === color` and instead force `color === "red"`.
- `func-style`, force a certain way to define functions (except inline functions), I use with to force `declaration` style, this forbids arrow functions for anything except inline functions.