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 :

Note

• The emoji 🛠️ marks the tools for back-end developers.
• The emoji 🎨 marks the tools for front-end developers.
• The emoji ✅ marks the mandatory extensions.
• The emoji 💰 marks the paid tools (you must ask for a licence to CEO or CTO).

• 1Password ✅ 💰
• Brew ✅
• Docker Desktop ✅
• GitKraken ✅ 💰
• Hyper ✅
• OhMyZsh ✅
• OpenVPN ✅
• Postman or Insomnia ✅
• Ray ✅ 🛠️ 💰
• RayCast ✅
• Slack ✅
• TablePlus ✅ 💰
• TinkerWell ✅ 🛠️ 💰
• Volta ✅

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

• React developer tools
  • Chromium
  • Firefox

IDE’s

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

• JetBrains Mono
• Fira Code

PHPStorm

Extensions

Note

• If you work on back-end, this is the IDE recommended for you.
• The emoji ✅ marks the mandatory extensions.

• Atom Material Icons
• GitHub Copilot 💰
• GitHub Theme
• Laravel Idea 💰✅
• Pest
• PHP Annotations ✅
• PHP Toolbox ✅
• Symfony Support ✅

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

Note

• If you work only on the front-end, this is the IDE recommended for you.
• The emoji ✅ marks the mandatory extensions.

• DotEnv ✅
• EditorConfig for VSCode ✅
• Error Lens ✅
• ESLint ✅
• GitHub Copilot 💰
• GitHub Theme
• GitLens
• Import Cost ✅
• Lint Lens ✅
• Markdown All in One
• Material Icon Theme
• NPM Intellisense
• Prettier ✅
• TODO Highlight ✅

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