What I Use

This is my current development setup.

Tech Stack

• TypeScript as my main programming language.
• React.js for UI creation.
• Tailwind for styling.
• React Query for remote data-fetching.
• Next.js as my framework.
• Jest for unit testing.
• React Testing Library for React testing.
• Cypress for integration and E2E testing.
• Vercel as my deployment platform.
• GitHub Action for continuous integration, delivery and deployment pipelines.

Tools

• Safari as my main browser.
• Sizzy as my development browser.
• Hyper as my terminal, outside VSCode.
• GitHub for my code repositories.
• GitHub Desktop to use Git with a GUI instead of via CLI.
• GitHub Mobile to check GitHub on my phone.

Editor

I use VSCode as my only IDE/code editor.

Theme

I use GitHub Theme, I enabled VSCode to switch between light and dark versions of this theme together with the system preferences

Plugins

• Atom Keymap, 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, this automatically add the matching close tag of an HTML/XML/JSX tag.
• 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, a basic spellchecker with English and Spanish support.
• CODEOWNERS, syntax highlight for GitHub CODEOWNERS files.
• CSS-in-JS, autocomplete for CSS in JS code.
• Docker, autocomplete for Dockerfile files and a UI to control my Docker images.
• DotENV, syntax highlight for .env files.
• ESLint, run ESLint directly in VSCode.
• Git Blame, show latest person who touched (blame) the line of code I’m currently selecting.
• 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, syntax highlight for GitHub Actions files.
• gitignore, syntax highlight for gitignore files and some other functions which I don’t really use.
• GraphQL for VSCode, syntax highlight for GraphQL code (inside .gql or .graphql files or tagged with a gql string literal tag.
• Import Cost, shows the size of the imported/required modules.
• indent-rainbow, show in different colors the indentation levels before a line of code.
• Jest Snapshot Language Support, syntax highlight for Jest Snapshot files.
• JSDoc Markdown highlighting, syntax highlight for Markdown inside JSDoc comments.
• Live Share, allow others to connect to my VSCode or allow me to connect to other people VSCode, I use it mostly for Pair Programming.
• MDX, syntax highlight for MDX code.
• npm, autocomplete for common package.json keys.
• npm Intellisense, autocomplete import statements for modules installed with npm/yarn.
• PostCSS Language Support, better CSS syntax highlight with support for custom syntax used with PostCSS.
• Prettier - Code formatter, run Prettier directly in VSCode.
• Ruby, syntax highlight for Ruby code and other features.
• SVG, nice tools to work with SVG code.
• Tailwind CSS IntelliSense, autocomplete and other features for working with Tailwind CSS.
• VSCode Ruby, improvement for Ruby language support in VSCode.
• vscode-styled-components, syntax highlight and autocomplete for styled-components.
• vscode-styled-jsx, syntax highlight and autocomplete for 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, to enforce the Rules of Hooks, I use it extending react-hooks/recommended to have their recommended config.
• 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, lots of rules to help avoid some errors, I use it extending plugin:unicorn/recommended to have their recommended config.
• 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, 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, some rules to write better TS code, I use it extending plugin:@typescript-eslint/recommended to have their recommended config.
• 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.