Setup your IDE

We recommend you using Webstorm (opens in a new tab) or VSCode (opens in a new tab)

Extensions

When you're setting your IDE these are some of the extensions that you may consider installing. This are the ones used and recommended by the Z1 team:

• Px to rem. This extension is essential to the front end workflow at Z1 to translate our designs (made with pixels) to rem. It enables you with a shortcut for easily converting values without any additional calculations.

  • Vscode: https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem (opens in a new tab)

• Prettier. Prettier is a core tool we include in all our projects to agree on code formatting style and not obsessing over it.

  After install it, you will need to set it up so it only works when it detects a prettier configuration file. That way we'll avoid to unintentionally change the format of a codebase. In order to do that, set prettier.requireConfig to true and editor.formatOnSave to true.

  Note that now you'll always need a .prettierrc file with at least an empty object on it (so it will use all default rules) to format your files.

  • Vscode: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode (opens in a new tab)
  • More info: https://btholt.github.io/complete-intro-to-react-v6/prettier (opens in a new tab)

• ESLint. Eslint is the other essential tool in our belt for enforcing code style. The difference with Prettier is that, while Prettier is focused on syntax, ESLint is focused on the behavior of our code. You can add the ESLint extension to highlight errors and provide you with additional information.

  Likewise Prettier, you can add some configurations to your settings to fix problems on save:

  	"eslint.validate": ["javascript", "typescript", "typescriptreact"],
  	"editor.codeActionsOnSave": { "source.fixAll.eslint": true }

• StyleLint. This tool has helped us to apply logical order to our CSS rules while avoiding errors and enforcing style conventions. Our guide explains how to install and configure it (opens in a new tab) in your project.

  • Vscode: https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint (opens in a new tab)

• Auto Close Tag. Automatically add HTML/XML close tag when you're creating a new element. Almost mandatory to improve your workflow.

  • Vscode: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag (opens in a new tab)

• Auto Rename Tag. Automatically rename both HTML/XML open and close tag at once. Almost mandatory to improve your workflow

  • Vscode: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag (opens in a new tab)

• Rainbow Brackets. Add colors for pairs of brackets for identify them easily and don't miss anyone left open.

  • Vscode: https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets (opens in a new tab)
  • Webstorm

• Accessibility Linter. Linting for accessibility error and omissions

  • Vscode: https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter (opens in a new tab)

• Code Spell Checker. Linting for English spelling. Works with camelCase

  • Vscode: https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker (opens in a new tab)

• Git Lens. Support git blame annotations for getting information on who last edited a line and when.

  • Vscode: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens (opens in a new tab)

• Error Lens. Improve highlighting of errors, warnings and other language diagnostics

  • Vscode: https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens (opens in a new tab)

• ES7+ React/Redux/React-Native. See all (snippets)[https://github.com/dsznajder/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md (opens in a new tab)] here

  • Vscode: Name: https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets (opens in a new tab)

• GraphQL. Syntax highlighting and autocompletion for GraphQL

• VScode Styled Components. Syntax highlighting and IntelliSense for styled-components.

  • VScode: https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components (opens in a new tab)

• Styled Components Snippets. Import styled-components by typing imsc, or use prop theme (${({ theme }) => theme.${1}}) with scpt.

  • Vscode: Name: https://marketplace.visualstudio.com/items?itemName=jonkwheeler.styled-components-snippets (opens in a new tab)

• Github Copilot. AI Pair Programmer, like an autocomplete on steroids.

  • https://copilot.github.com/ (opens in a new tab)

• Emmet. Emmet is a special syntax that allows you to write markup blazing fast. For this one you don't need to install anything since it's already integrated on your IDE.

  • Vscode docs: https://code.visualstudio.com/docs/editor/emmet (opens in a new tab)
  • Webstorm: https://www.jetbrains.com/help/webstorm/settings-emmet.html (opens in a new tab)

• Console Ninja. This extension displays console.log output and runtime errors directly in your editor from your running browser or node application. It's like your browser dev tools console tab or terminal output from your node app, but instead of having to context switch, values are connected to your code and displayed ergonomically in your editor.

  • Vscode: https://marketplace.visualstudio.com/items?itemName=WallabyJs.console-ninja (opens in a new tab)