Skip to content
Hexium

Development

All tools and rules listed above are mandatory for all of us. We use them to ensure that all environments are similar, making it easier to understand each other’s.

Computer

We all use Apple computers and associated OS. It’s in our opinion the best environment for development.

It’s easy to use and has a lot of tools available. It’s also the most popular computer among developers, which means that most tools are made for Mac.

Softwares

Here a various softwares that you should install on your computer :

  • 1Password ✅ 💰
    • A password manager that is also a vault for your other secrets. You should install the app and the browser extension.
  • Brew ✅
    • A package manager for macOS.
  • Docker Desktop ✅
    • A platform for building, shipping and running applications in containers.
  • GitKraken ✅ 💰
    • A Git client that makes it easy to manage your Git repositories.
  • Hyper ✅
    • A terminal emulator that makes it easy to manage your terminal.
  • OhMyZsh ✅
    • A framework for managing your zsh configuration.
  • OpenVPN ✅
    • A VPN client that makes it easy to manage your VPN connections.
  • Postman or Insomnia ✅
    • A tool to test your APIs.
  • Ray ✅ 🛠️ 💰
    • A debugging tool that makes it easy to debug your code.
  • RayCast ✅
    • A launcher to improve your productivity.
  • Slack ✅
    • A tool to communicate with your team.
  • TablePlus ✅ 💰
    • A GUI to manage your databases.
  • TinkerWell ✅ 🛠️ 💰
    • A tool to test your back-end code.
  • Volta ✅
    • A tool to manage your Node.js versions.
  • Xcode ✅ 💰
    • The official IDE for macOS.

Browsers

You must install the following browsers to be able to test your work on all of them :

  • Chrome or Brave (Chromium)
  • Firefox
  • Safari

As a day-to-day browser, you are free to use the one you like the most. Just make sure to check your work on all browsers.

Browser extensions

IDE’s

You can if you want use one of the following fonts :

PHPStorm

Extensions

Configuration

When opening a new (JavaScript or TypeScript) project with PHPStorm make sure to do the following :

  • ESLint
    • Go to Preferences > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint
    • Check Automatic ESLint configuration
    • Check Run eslint --fix on save
  • Prettier
    • Go to Preferences > Languages & Frameworks > JavaScript > Prettier
    • Check Automatic Prettier configuration
    • Check Run on save

Shortcuts & tips

  • Comment line ⌘ + /
  • Delete entire line ⌘ + ⌫ or ⌘ + X
  • Duplicate line ⌘ + D
  • Move function ⌘ + ⇧ + ↑ or ↓
  • Move line ⌥ + ⇧ + ↑ or ↓
  • Navigate between tabs ⌘ + ⇧ + [ or ]
  • Navigate in tree ⌘ + ⇧

Visual Studio Code

Extensions

Configuration

Here is an example configuration file. Feel free to change what you want if needed.

{
    "breadcrumbs.enabled": false,
    "editor.accessibilitySupport": "off",
    "editor.bracketPairColorization.enabled": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.fontFamily": "'JetBrains Mono', 'Fira Code', Menlo, Monaco, 'Courier New', monospace",
    "editor.fontLigatures": true,
    "editor.fontSize": 13,
    "editor.fontWeight": "500",
    "editor.formatOnSave": true,
    "editor.inlineSuggest.enabled": true,
    "editor.lineHeight": 2.3,
    "editor.minimap.enabled": false,
    "editor.rulers": [
        120
    ],
    "terminal.integrated.env.osx": {
        "FIG_NEW_SESSION": "1"
    },
    "terminal.integrated.fontSize": 13,
    "terminal.integrated.letterSpacing": 1.35,
    "terminal.integrated.lineHeight": 1.5,
    "window.zoomLevel": 0.8,
    "workbench.colorTheme": "GitHub Dark",
    "workbench.editor.highlightModifiedTabs": true,
    "workbench.iconTheme": "material-icon-theme",
    "workbench.settings.editor": "json",
    "workbench.startupEditor": "none"
}

Shortcuts & tips