Articles by Sergio Xalambrí

What I Use

This is my current development setup.

Tech Stack

Tools

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.