Tools for my web development env

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 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]https://github.com/saadparwaiz1/cmp_luasnip)

• [friendly-snippets (https://github.com/rafamadriz/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