Code Editors¶

Table of Contents¶

Overview
VS Code (Visual Studio Code)
NeoVim
See Also

Overview¶

At Lemone, we primarily use Visual Studio Code for development, as it provides excellent support for our tech stack and integrates well with our tooling. However, team members are free to use NeoVim or other editors if they prefer.

Both editors integrate with our linting and formatting setup. See the Linting Setup guide for configuration details.

VS Code (Visual Studio Code)¶

Recommended Extensions¶

Install these essential extensions for WordPress and Lemone development:

PHP Intelephense - PHP language support and IntelliSense
ESLint - JavaScript/TypeScript linting
Stylelint - CSS/SCSS linting
Prettier - Code formatting
EditorConfig - Maintain consistent coding styles
GitLens - Enhanced Git capabilities
Auto Rename Tag - Automatically rename paired HTML/XML tags
Path Intellisense - Autocomplete filenames
WordPress Snippets - WordPress code snippets

GitHub Copilot Configuration¶

We use GitHub Copilot for AI-assisted coding. To configure it properly:

Install the GitHub Copilot extension
Sign in with your GitHub account
Configure Copilot settings in .vscode/settings.json:

{
  "github.copilot.enable": {
    "*": true,
    "yaml": false,
    "plaintext": false,
    "markdown": false
  },
  "github.copilot.advanced": {
    "debug.overrideEngine": "gpt-4",
    "inlineSuggestCount": 3
  }
}

Workspace Settings¶

Create a .vscode/settings.json file in your project root with these recommended settings:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "files.associations": {
    "*.php": "php",
    "*.blade.php": "blade"
  },
  "emmet.includeLanguages": {
    "blade": "html"
  },
  "[php]": {
    "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

VS Code Tips¶

Multi-cursor editing: - Cmd/Ctrl + D - Select next occurrence - Cmd/Ctrl + Shift + L - Select all occurrences - Alt + Click - Add cursor at click position

Quick navigation: - Cmd/Ctrl + P - Quick file open - Cmd/Ctrl + Shift + F - Search in files - Cmd/Ctrl + T - Go to symbol

Integrated terminal: - Ctrl + `` - Toggle terminal - Cmd/Ctrl + Shift + `` - Create new terminal

NeoVim¶

For developers who prefer a terminal-based editor, NeoVim provides powerful editing capabilities with keyboard-driven workflows.

Motion commands: - h, j, k, l - Left, down, up, right - w - Jump to start of next word - e - Jump to end of word - b - Jump to start of previous word - 0 - Jump to start of line - $ - Jump to end of line - gg - Jump to start of file - G - Jump to end of file - { / } - Jump between paragraphs

Advanced navigation: - f{char} - Jump to next occurrence of character - t{char} - Jump to before next occurrence of character - * - Search for word under cursor - % - Jump to matching bracket

Editing Commands¶

Basic editing: - i - Insert mode before cursor - a - Insert mode after cursor - o - New line below and insert - O - New line above and insert - x - Delete character - dd - Delete line - yy - Copy (yank) line - p - Paste after cursor - P - Paste before cursor - u - Undo - Ctrl + r - Redo

Text objects: - ciw - Change inner word - ci" - Change inside quotes - cit - Change inside HTML tag - di{ - Delete inside braces - va( - Select around parentheses

Visual Mode¶

v - Character-wise visual mode
V - Line-wise visual mode
Ctrl + v - Block-wise visual mode

In visual mode: - d - Delete selection - y - Yank (copy) selection - c - Change selection - > / < - Indent/outdent

Search and Replace¶

Search: - /pattern - Search forward - ?pattern - Search backward - n - Next match - N - Previous match

Replace: - :s/old/new/ - Replace first occurrence in line - :s/old/new/g - Replace all occurrences in line - :%s/old/new/g - Replace all occurrences in file - :%s/old/new/gc - Replace with confirmation

Registers¶

NeoVim has multiple clipboard registers for copying and pasting:

"ayy - Yank line to register 'a'
"ap - Paste from register 'a'
"+y - Yank to system clipboard
"+p - Paste from system clipboard
:reg - Show all registers

Common register uses:

" Copy to system clipboard
vnoremap <C-c> "+y

" Paste from system clipboard
nnoremap <C-v> "+p

Macros¶

Record and replay sequences of commands:

q{register} - Start recording macro to register (e.g., qa)
Perform your actions
q - Stop recording
@{register} - Play macro (e.g., @a)
@@ - Repeat last macro

Example use case:

qa           " Start recording to register 'a'
I// <Esc>    " Add comment at start of line
j            " Move down
q            " Stop recording
10@a         " Comment next 10 lines

Multi-cursor Alternative¶

While NeoVim doesn't have built-in multi-cursor support like VS Code, you can achieve similar results:

Using substitution:

:%s/oldtext/newtext/g

Using visual block mode: 1. Ctrl + v - Enter visual block mode 2. Select multiple lines vertically 3. I - Insert at start of selection 4. Type your text 5. Esc - Apply to all lines

Using macros: Record a macro with your changes and replay it multiple times (see Macros section above).

Configuration¶

Create a basic ~/.config/nvim/init.vim or ~/.config/nvim/init.lua:

" Basic settings
set number              " Show line numbers
set relativenumber      " Relative line numbers
set expandtab           " Use spaces instead of tabs
set tabstop=2           " Tab width
set shiftwidth=2        " Indent width
set smartindent         " Smart indentation
set wrap                " Wrap long lines
set ignorecase          " Case-insensitive search
set smartcase           " Case-sensitive if uppercase present
set hlsearch            " Highlight search results
set incsearch           " Incremental search

" Set leader key
let mapleader = " "

" Key mappings
nnoremap <leader>w :w<CR>
nnoremap <leader>q :q<CR>
nnoremap <leader>e :Ex<CR>

Useful Plugins¶

Consider using a plugin manager like vim-plug or packer.nvim to install:

nvim-lspconfig - Language Server Protocol support
nvim-treesitter - Better syntax highlighting
telescope.nvim - Fuzzy finder
nvim-tree.lua - File explorer
lualine.nvim - Status line
gitsigns.nvim - Git integration