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 usenightfly
.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:
3 Snippets nvim plugins:
[cmp_luasnip]https://github.com/saadparwaiz1/cmp_luasnip)
[friendly-snippets (https://github.com/rafamadriz/friendly-snippets)
4 Auto closing nvim plugins:
5 Lsp servers to support typescript, react, tailwindcss and svelte:
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.
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
andnull-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
Top comments (0)