This is my current development setup.
- 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.
- 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.
I use VSCode as my only IDE/code editor.
I use GitHub Theme, I enabled VSCode to switch between light and dark versions of this theme together with the system preferences
- 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
Dockerfilefiles and a UI to control my Docker images.
- DotENV, syntax highlight for
- 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
gitignorefiles and some other functions which I don’t really use.
- GraphQL for VSCode, syntax highlight for GraphQL code (inside
.graphqlfiles or tagged with a
gqlstring 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
- 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.
For Prettier I don't like to customize it. The point of Prettier is to stop paying bikeshedding about code style.
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/recommendedto have their recommended config.
- eslint-plugin-prettier, to let ESLint uses the same code style rules as Prettier, I use it extending
plugin:prettier/recommendedto have their recommended config.
- eslint-plugin-unicorn, lots of rules to help avoid some errors, I use it extending
plugin:unicorn/recommendedto 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/reactto 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/recommendedto have their recommended config.
- @typescript-eslint/parser, some rules to write better TS code, I use it extending
plugin:@typescript-eslint/recommendedto 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" === colorand instead force
color === "red".
func-style, force a certain way to define functions (except inline functions), I use with to force
declarationstyle, this forbids arrow functions for anything except inline functions.