Development tools usage poll

Get Help and Help Others
1

I searched for an existing poll and did not find it. So, I would really appreciate everyone’s development tools selection in the form of a reply to this topic, regardless of whether you work on the RWJS framework or use the RWJS framework to develop applications.

The following list of tools is of interest for many of our future plans (note that the nodejs, npm/yarn are tools that we all use, so these should not be of interest in this poll)

  1. OS (Linux, macOS, Windows)

  2. Code editor (Atom. AWS Cloud9. Brackets. Codeanywhere. Eclipse. IntelliJ IDEA. NetBeans. PhpStorm. SourceLair. Sublime Text, Vim, Visual Studio, Visual Studio Code. WebStorm)

  3. Development tools: (Chrome Developer Tools, React Developer Tools, Firefox Developer Tools, Safari Develop Menu, Firefox Debugger, Node-inspect, VSCode, Postman, SessionsStack, Raygun, LogRocket)

  4. Anything else that may benefit other participants in this poll

Note: not knowing whether polls are enabled in this Discourse forum, I created this “fake” poll in the form of a regular topic

1 Like
2
  1. Windows
  2. VS Code
  3. Chrome Dev Tools, React Dev Tools, VS Code, Postman
  4. (Shell and Terminal): git-bash conemu
  5. (DB etc): PostgreSQL on localhost, Heruko and Supabase. DBeaver to inspect them all
3

@Tobbe - special recognition to you as the first responder - although you should not be awake at this time :wink:

1 Like
4
  1. OS: Windows
  2. Code editor: VS Code
  3. Development tools: Chrome Developer Tools, React Developer Tools
  4. Database: Azure Database for PostgreSQL
  5. Auth: Azure AD
  6. Hosting: Netlify (looking to host on Azure because of project requirement)
1 Like
5
  1. Windows
  2. VS Code
  3. Tools
    • Chrome dev tools
    • React dev tools
    • VS Code (version control, linting, compile-time errors)
    • Postman
  4. Misc
6

Mac

VSCode now, used to use Atom

Chrome developer tools, react dev tools, VSCode tools

Postgres locally using Postico for GUI.

Postgres on Railway using Postico locally for GUI

7

  1. OS
    Linux - Budgie

  2. Code editor
    PHPStorm

  3. Development tools:
    Chrome Developer Tools
    React Developer Tools

  4. Misc

  • Netlify
  • Beaver sometimes or PHPStorm’s db tools
  • heroku and local host
  • zsh
8

Thank you all who responded so far - and a word of encouragement who have not yet: please share your tools list, it will be helpful to everyone

9

  1. OS
    Windows 10, macOS Catalina

  2. Code Editor
    Webstorm

  3. Development Tools
    Chrome Developer Tools
    React DevTools
    Webstorm Debugger

  4. Misc
    Azure Web App Services
    Azure AD
    MySQL

1 Like
10

OS
Arch Linux, KDE 5.19 on xServer, Windows 10 in a virtual container, MacOS Catalina on a MacBook Air

Code editor

VS Code with the following relevant extensions in addition to those in redwood/.vscode/extensions.json and not including deployment extensions like Netlify:

  • auto-close-tag: automatically add HTML/XML close tag

  • auto-rename-tag: automatically rename paired HTML/XML tag

  • better-toml: syntax hightlighting for .toml files

  • code-spell-checker: spell checker that works well with camelCase code

  • color-highlight: styles css / web colors found in a document, showing the color as an outline box around the hex or other color value

  • cypress-snippets: Cypress e2e testing code snippets

  • doxdocgen: Doxygen documentation generation on the fly by starting a Doxygen comment block and pressing enter

  • es7-react-js-snippets: JS and React snippets in ES7+ with Babel plugin features

  • git-graph: Git GUI repo visualization tool

  • gitlens: visualize code authorship at a glance via Git blame annotations and code lens

  • hadolint: Dockerfile linter

  • highlight-matching-tag: highlights matching opening and/or closing tags

  • html5-boilerplate: standard HTML boilerplate code snippets

  • indenticator: highlights indent depths so you can see where a block starts and stops

  • js-codeformer: JS refactoring and code automation extension with tools for TS, HTML, React, JSX/TSX. Has a large number of refactor methods and code snippets available through the lightbulb and context menus on selected functions / variables

  • json-to-ts: convert JSON object to TS interfaces

  • language-gettext: syntax highlighting for po, pot and potx translation files

  • markdown-all-in-one: Markdown keyboard shortcuts, table of contents, auto preview, TOC, math, auto completion, list editing

  • mdx: language support for MDX

  • output-colorizer: add syntax colorization for the output / debug / extensions panel and *.log files

  • path-intellisense: autocompletes filenames for import, require, fs methods

  • ponicode: ML-powered unit test scenario generator, requires user registration

  • prettier-vscode: run Prettier on save from the editor

  • quicktype: paste JSON as code

  • rainbow-brackets: color round, square, and squiggly brackets with different colors based on nesting depth so it’s easy to tell at a glance what matches to what

  • refactorix: TS refactoring tools - split declarations, toggle access modifiers, convert string to a literal with the selected text thrown in ${}, convert properties to private properties with getter / setters

  • regex: shows a selected regular expression’s matches in a side-by-side document

  • remotehub: browse, search, edit, and commit to any remote GitHub repository

  • rewrap: wraps lines over a preset length with smart handling

  • sapling: shows React component hierarchies in the tree view sidebar, and makes navigating React code much easier than the default file tree view

  • sort-lines: sort lines with fine control of sorting algorithm

  • svg: SVG language support with auto completion, document symbol tree, preview, and links to MDN docs for SVG properties

  • test-utils: add and remove .skip and .only modifiers to Jest tests with keyboard shortcuts

  • toggle-case: toggle text between snakecase, camelcase, etc.

  • trailing-spaces: highlight trailing spaces on lines and delete them on save

  • transformer: enhanced editing capabilities like join lines, JSON string as text, trim, unique, and a lot more

  • tsimporter: automatically scan and import TS definition files in workspace and handle .tsconfig "paths" settings that allow relative imports

  • tsserver-live-reload: reload the TS Language Server whenever it changes

  • turbo-console-log: inserts meaningful console.log code snippets from context menus on selected variables for debugging

  • vscode-apollo: rich editor support for GraphQL client

  • vscode-babel-coloring: adds JS Babel es6/es7 syntax coloring

  • vscode-codemetrics: computes complexity in TS / JS files and shows it in a code lens

  • vscode-cy-helper: Cypress e2e testing extension

  • vscode-docker: build, manage, and deploy containerized applications

  • vscode-git-add-and-commit: add and commit files with a keyboard shortcut, with smart auto-prefill

  • vscode-graphql: GraphQL syntax highlighting, autocomplete, validation, snippets, hover support, go-to-definition for fragments and input types from the context menu

  • vscode-gutter-preview: image preview in a modal box on hover, like for a CSS background:url() method

  • vscode-html-css: HTML id and class attribute completion

  • vscode-import-cost: displays the size of an imported package inline

  • vscode-json5: syntax highlighting of JSON5 files

  • vscode-markdownlint: Markdown linting and style checking

  • vscode-npm-script: validation to flag packages defined in package.json but not installed, packages that are installed but not defined in the package.json, and packages that are installed but do not satisfy the version defined in package.json

  • vscode-optimize-images: optimize images using platform-native libraries

  • vscode-react-refactor: JSX code refactor actions for React

  • vscode-svgviewer: view SVG images in the editor

  • vscode-todo-highlight: highlights @TODO: and @FIXME: tags in code comments so they pop out

  • vscode-versionlens: shows current/latest version information when opening package.json files as a code lens

  • vscode-yaml: YAML language support

Development tools

  • I like GUI Git management tools for visualizing branches, use Git CLI for most Git tasks, and use VS Code’s Git Automator extension for commits to a local repo. I use GitKraken as my GUI Git management tool but I might move to VS Code’s Git Graph extension.

  • I love Yakuake. It’s a drop-down terminal application that you can bind to a keypress like F12, and then slides out of the way when you move focus somewhere else on your desktop.

  • I’ve tried every Markdown editor under the sun and never liked any of them. They were all so bad for my purposes that I just ended up hand-writing Markdown in Vi. But Typora got good this year and I love it. I’m writing this in it to copy and paste over to Redwood forums!

Misc

  • I include a cSpell word list in project .vscode directories. Redwood has a lot of words that aren’t in the base cSpell dictionaries.

  • I much prefer NPM to Yarn, and end up stripping it out of projects that use it. I have a lot of personal tooling built around NPM (it’s the default) that I lose with Yarn, and NPM got their stuff together on the NPM CLI client and are close to feature parity with Yarn now.

  • I left out extensions for using VS Code’s Remote features in my list above. I use containers and virtualization for everything on my desktop workstation - it’s actually just a headless server using VFIO and QEMU/KVM, with little else running besides Docker Engine in the host OS’s world. That way I can run servers in containers (like PostgreSQL) with little risk and pass my graphics cards into virtual machines (for desktops), and choose whether I run Windows on some monitors and Linux/KDE on others or the same OS on all of them, and run whatever desktop OS I want (except MacOS - it violates their ToS). You can include a devcontainer.json in a project to run a dev environment in a container or use SSH to a remote server. The win is no more messing with language versions managers, no wasting time making sure the right version of Typescript or Node are installed, etc.

  • I use Firefox and its dev tools instead of Chrome. They’re nearly at feature parity, and I can’t stand how Chrome scrunches all of my open tabs so not even a single letter of the page name is visible on the tab instead of having scrollable tabs. The issue has been raised on Chrome’s issue tracker and the Chrome team has responded that they’re not changing it because they believe it’s a better user experience.

11

I started this thread long time ago, and was absent almost as long. Now, I am really excited to find so many very good articles as responses to my original post. This subject (call it Development Environment) is (or should be) important to all of developers and other types of contributors, because every new Redwood user will find lack of well defined data set (see the article written by @WebstackBuilder, above) a big problem.

As a simple illustration: I am using VSCode and MacOS and tried to run through the Tutorial I after a long time, using my VSCode settings defined at least a year ago. To my surprise there was not a single source file that did not show a bunch of warnings and even errors. Rather than raising a panic that at this point just before release of RWJS version 1.0, we have such situation, I spent some time digging and discovered that this problem is caused by my specific settings - and the solution was to remove (globally) jshint tool.

This indicates that a complete set of recommended settings should include minimum recommended settings (this is nicely done by yarn create redwood-app cli command now) but also list of settings and extension not to use.

12

  • OS
    Windows 11

  • Code Editor
    VSCode

  • Development Tools
    Firefox Developer Tools
    Insomnia
    TablePlus

  • Misc
    WSL 2
    GitHub Actions
    Github Container Registry
    Azure AD
    Postgres
    Kubernetes

Edit
Oops. Realized this thread was old, but also reborn. Also sorry @kpervin for the ping/reply. I was simply quoting you to copy your reply format. :sweat_smile: