Tools for my web development env

I enjoy working using my terminal on Mac, so I would like to write down and share some tools I use daily.

I don't pretend to explain how to install and/or configure them since there are lots of steps that I would need to share, so the easiest way for me to share it is via the GitHub repo.

---

Basic configuration with default configuration for React support:

https://github.com/TheEnmanuel23/development-config/tree/master

Extra configuration with Svelte support:

https://github.com/TheEnmanuel23/development-config/pull/1

---

Iterm2 along with Tmux

To manage terminal sessions, tabs, panels, etc. I use it with tmux-theme pack plugin to add some plugins and configure them, for example, I use the theme powerline/default/cyan via jimeh/tmux-themepack.

Read more: https://github.com/jimeh/tmux-themepack

NVIM

Here some basic plugins help us to pave the way for the rest of the plugins that I am going to mention below.

• Lua

• Packer

• LSP

• Mason

1. Basic NVIM plugins

   • Packer: Packer manager written in Lua

   • Neosolarized: Optional nvim theme, I sometimes change it to use nightfly theme, I am not using it for now, since I use nightfly .

   • Vim-tmux-navigator: Consistent way to navigate between tmux and vim panels.

   • Maximize: Toggle maximizing the current neovim window without any of the ugly borders that other.

   • Surround: To surround selection by using some extremely useful keys.

   • Comment: To comment snippets.

   • Plenary: Common utilities, some plugins require it.

   • Hop: To jump anywhere in the current buffer by highlighting words, lines, etc.

   • Web-devicons: Help to add icons to various plugins, like nvim tree, telescope, file browsers, etc.

   • Lualine: Statusline for nvim written in Lua.

   • Telescope: It is an awesome finder over lists.

   • Telescope file browser: It is telescope extension that acts as a file browser, it allows us shortcuts to create, delete, rename and move files or folders. It could be used as a nvim-tree alternative.

   • nvim-colorizer: To highlight colors of css files for example.

   • gitsigns: Git decorations on the vertical bar of the left section of a nvim panel that shows indicators based on the git status.

   • Toggleterm: To show floating terminals or multiple orientations during an editing session.

   • vim-nightfly-colors: Dark nvim theme, as an alternative for neosolarized theme. I am using it right now.

   • startup: A customizable startup window.

2. Autocompletion nvim plugins:

   • cmp-buffer

   • cmp-path

   • nvim-cmp

3. Snippets nvim plugins:

   • LuaSnip

   • cmp_luasnip

   • friendly-snippets

4. Auto closing nvim plugins:

   • nvim-autopairs

   • nvim-ts-autotag

5. Lsp servers to support typescript, react, tailwindcss and svelte:

   • neovim/nvim-lspconfig

   • hrsh7th/cmp-nvim-lsp: nvim-cmp source for neovim's built-in LSP

   • glepnir/lspsaga.nvim: With an enhanced UI, this helps us to configure shortcuts and popups to navigate our code by jumping to functions or variable definitions, renaming variables, fixing imports, among other benefits.

   • onsails/lspkind-nvim: Used to show icons to autocompletion windows or popups.

   • jose-elias-alvarez/typescript.nvim: Add further functionalities for typescript server like renaming a file or updating imports, etc.

   • nvim-treesitter/nvim-treesitter: It provides us a better interface for neovim with some basic functionalities such as highlighting.

6. To install LSP plugins using Mason: It helps to map, and install lsp-servers, linters and formatters, besides it helps us to register setup hooks with lspconfig, it is a complement for LSP, it acts as a bridge, closing some gaps between mason and lspconfig.

   • williamboman/mason.nvim

   • williamboman/mason-lspconfig.nvim

7. Formatting and linting:

   • jose-elias-alvarez/null-ls.nvim: To have code diagnostics, code actions, etc.

   • jay-babu/mason-null-ls.nvim: A better way to interact with mason and null-ls.

Other tools

Yabai: Yabai is a window management utility for mac.

Min: As my default browser for things that have nothing to do with development, to develop I use Chrome for its dev-tools.

I have it configured to use vim shortcuts to facilitate the navigation as the same way I would do with a vim buffer or file.

https://github.com/PalmerAL/min-vim-mode

Ratcast: My default spotlight option, it is an awesome tools, since you can configure basically whatever you want, e.g.

• I configured it to check my JIRA's ticket's status without opening a new chrome tab.

• To pick a color from anywhere in the screen

• With google translate, I am not a native english speaker, so sometimes I need to figure out the meaning of the word, so with tool I don't need to open chrome or anther browser to open google translate.

• To create floating notes

• To check my github repositories

• To check my agenda based on my default calendar.

• To install packages with brew

• To interact with spotify

• etc, etc, etc

Those are some tools I use for my development environment and that I use daily.

I would like to thank Josean Martinez, I learned a lot watching his videos, and I strongly recommend following him, he has an awesome youtube channel. https://www.youtube.com/@joseanmartinez