What Does Your Code Editor Look Like?

The enormous amount of choice in code editors, IDEs, themes, plugins, programming languages, etc... means that every software developer has a unique environment that they write their code in. So we thought we'd share a few of those environments with you. Here's what the code editors and IDEs of  these 7 X-Teamers look like.

Andrew Mackarous

I use Xcode on a daily basis, mostly because it’s the de-facto IDE for iOS. I use no plugins other than the one I built myself, mainly because Apple is overly locked down. It allows me to select a code block and open a carbon website with the selected code. I found a dark mode style that I liked – based on Atom Dark – instead of the default dark mode.

Arthur Andrade

I try to use my real estate as best I can. I like using VSCode for bigger tasks and VIM for smaller tasks. I always have two tabs open: the main file is on the left and the reference file on the right. My terminal is also almost always divided into two sections: one for git management, the other for changing folders/running tests/scripts.

Piotr Pasich

I use PhpStorm because I used to work with it when I was developing PHP projects and because it supports Node.js and TypeScript. You won't find any fancy plugins or themes here. My setup has the default dark scheme with only one or two plugins for unsupported file types. I even keep my terminal in a separate window because I usually need four or five of them. I like to keep it simple.

Bernardo Dias

My setup is very simple. I use VSCode with a light theme called Light+ (default light) because it tires my eyes less. I know that dark themes are trendy nowadays. But physiologically, dark text on a light background is better. It's how our neurological system works (I can’t explain it in detail but an optician told me). As for the extensions, I use ESLint, EditorConfig and GitLens. For markdown editing, I use Markdown All In One and Markdown Preview Enhanced.

Phanor Coll

My Editor is Neovim, for the start screen I use a plugin called Startify which helps me track the current repository I'm in, the last 9 files I've opened, and a bookmark section where I can set files for easy access. For the X-Team art, Startify comes with a header section where I can add ASCII art and make it my own. For the color scheme, I use the onedark theme.

Hyun Kim

I use Import Cost to see the size of the imported package and Colorize to show me the exact colors when I'm writing CSS. In addition, I use GitLens to see the author of the code when collaborating. It also gives me the ability go back in history and see how the code has changed with commit messages. Finally, I use Turbo Console Log, which helps me debug so much faster. Themes are Ariake Dark and Material Icon.

Viny Machado

I've been using VSCode for quite some time now. I have a bunch of plugins that make my life easier (see list below). My favorite by far is Settings Sync, because it allows me to save my VSCode preferences and configurations into my GitHub account. This means I can quickly set up my dev environment on any machine, without having to memorize everything.

• Auto import: Enables auto import for js and ts files.
• Auto Rename Tag: Automatically renames the closing/opening tag.
• Bracket Pair Colorizer: Highlights opening/closing tags.
• Code Runner: Run a code snippet or code file for multiple languages.
• Docker: Build, manage, and deploy containerized applications from Visual Studio Code. Also provides one-click debugging of Node.js, Python, and .NET Core inside a container.
• DotENV: VSCode .env syntax highlighting.
• Dracula Official: a pretty cool VSCode theme 🙂
• EditorConfig: Overrides user/workspace settings with settings found in .editorconfig files. Allows you to define specific configs for a particular project.
• ES7 React/Redux/GraphQL/React-Native snippets: A bunch of snippets to make myself more productive.
• ESLint: Integrates ESLint into VS Code.
• GitLens: Supercharges the Git capabilities built into Visual Studio Code.
• htmltagwrap: Wraps your selection in HTML tags.
• Live Server: Launch a dev local Server with a live reload feature.
• Material Icon Theme: Material Design icons for VS Code.
• Move TS: Moves typescript files and updates relative imports in the workspace.
• Node.js Modules Intellisense: Autocompletes Node.js modules in import statements
• Prettier - Code formatter: An opinionated code formatter.
• React Pure To Class: Replaces pure functional react components with class components. Works for both JavaScript and TypeScript.
• Settings Sync: Explained above.
• TypeScript Hero: Sorts and organizes your imports.
• Vetur: Vue framework support.
• YAML: Comprehensive YAML Language support.

What does your code editor / IDE look like? Show us a screenshot in a reply to this tweet 👇