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.