Tools for my web development env
Tags: nvim, frontend, tmux, react
Published: 2023-06-20 02:34:46

Original Post: https://enmanueljarquin.com/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 **<mark>React</mark>** support:

[https://github.com/TheEnmanuel23/development-config/tree/master](https://github.com/TheEnmanuel23/development-config/tree/master)

Extra configuration with **<mark>Svelte</mark>** support:

[https://github.com/TheEnmanuel23/development-config/pull/1](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](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](https://github.com/wbthomason/packer.nvim): Packer manager written in Lua
        
  * [Neosolarized](https://github.com/svrana/neosolarized.nvim): 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:](https://github.com/christoomey/vim-tmux-navigator) Consistent way to navigate between tmux and vim panels.
        
  * [Maximize](https://github.com/declancm/maximize.nvim): Toggle maximizing the current neovim window without any of the ugly borders that other.
        
  * [Surround](https://github.com/kylechui/nvim-surround): To surround selection by using some extremely useful keys.
        
  * [Comment](https://github.com/numToStr/Comment.nvim): To comment snippets.
        
  * [Plenary](https://github.com/nvim-lua/plenary.nvim): Common utilities, some plugins require it.
        
  * [Hop](https://github.com/phaazon/hop.nvim): To jump anywhere in the current buffer by highlighting words, lines, etc.
        
  * [Web-devicons:](https://github.com/nvim-tree/nvim-web-devicons) Help to add icons to various plugins, like nvim tree, telescope, file browsers, etc.
        
  * [Lualine](https://github.com/nvim-lualine/lualine.nvim): Statusline for nvim written in Lua.
        
  * [Telescope](https://github.com/nvim-telescope/telescope.nvim): It is an awesome finder over lists.
        
  * [Telescope file browser:](https://github.com/nvim-telescope/telescope-file-browser.nvim) 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:](https://github.com/norcalli/nvim-colorizer.lua) To highlight colors of css files for example.
        
  * [gitsigns:](https://github.com/lewis6991/gitsigns.nvim) Git decorations on the vertical bar of the left section of a nvim panel that shows indicators based on the git status.
        
  * [Toggleterm](https://github.com/akinsho/toggleterm.nvim): To show floating terminals or multiple orientations during an editing session.
        
  * [vim-nightfly-colors](https://github.com/bluz71/vim-nightfly-colors): Dark nvim theme, as an alternative for `neosolarized` theme. I am using it right now.
        
  * [startup](https://github.com/startup-nvim/startup.nvim): A customizable startup window.
        
2 **Autocompletion nvim plugins:**
    
  * [cmp-buffer](https://github.com/hrsh7th/cmp-buffer)
        
  * [cmp-path](https://github.com/hrsh7th/cmp-path)
        
  * [nvim-cmp](https://github.com/hrsh7th/nvim-cmp)
        
3 **Snippets nvim plugins:**
    
  * [LuaSnip](https://github.com/L3MON4D3/LuaSnip)
        
  * [cmp\_luasnip]https://github.com/saadparwaiz1/cmp_luasnip)
        
  * [friendly-snippets (https://github.com/rafamadriz/friendly-snippets)
        
4 **Auto closing nvim plugins:**
    
  * [nvim-autopairs](https://github.com/windwp/nvim-autopairs)
        
  * [nvim-ts-autotag](https://github.com/windwp/nvim-ts-autotag)
        
5 **Lsp servers to support typescript, react, tailwindcss and svelte:**
    
  * [neovim/nvim-lspconfig](https://github.com/neovim/nvim-lspconfig)
        
  * [hrsh7th/cmp-nvim-lsp](https://github.com/hrsh7th/nvim-cmp): nvim-cmp source for neovim's built-in LSP
        
  * [glepnir/lspsaga.nvim](https://github.com/nvimdev/lspsaga.nvim#example-configuration): 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](https://github.com/onsails/lspkind.nvim): Used to show icons to autocompletion windows or popups.
        
  * [jose-elias-alvarez/typescript.nvim](https://github.com/jose-elias-alvarez/typescript.nvim): Add further functionalities for typescript server like renaming a file or updating imports, etc.
        
  * [nvim-treesitter/nvim-treesitter](https://github.com/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](https://github.com/williamboman/mason-lspconfig.nvim)
        
  * [williamboman/mason-lspconfig.nvim](https://github.com/williamboman/mason-lspconfig.nvim)
        
7 **Formatting and linting:**
    
  * [jose-elias-alvarez/null-ls.nvim](https://github.com/jose-elias-alvarez/null-ls.nvim): To have code diagnostics, code actions, etc.
        
  * [jay-babu/mason-null-ls.nvim](https://github.com/jay-babu/mason-null-ls.nvim): A better way to interact with `mason` and `null-ls`.
        

### Other tools

[Yabai](https://github.com/koekeishiya/yabai): Yabai is a window management utility for mac.

[**Min**](https://minbrowser.org/): 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](https://github.com/PalmerAL/min-vim-mode)

[**Ratcast**](https://www.raycast.com/): 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](https://www.youtube.com/@joseanmartinez), I learned a lot watching his videos, and I strongly recommend following him, he has an awesome youtube channel. [https://www.youtube.com/@joseanmartinez](https://www.youtube.com/@joseanmartinez)