VSCode configuration for Rails - SublimeText like

vscode-config.md

VSCode config for Rails & shortcuts

🪄 Theme and config

• Theme : Monokai Night + Bearded Icons (I find it useful to view the folders)
• In Preferences > Settings ⌘ + , > Commonly used : set number of spaces a tab is equal to 2.
• Enable Emmet's actions on tab : Preferences > search for 'Emmet' > Tick Trigger expansion on tab
• On the left pannel, hide Activity Bar, Source control, etc.
• After installing the theme and icons, check your User Settings Ctrl + P + Shift: JSON Settings
• Configure trailing whitespaces and new lines (already in the settings above) :

  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,
  "files.trimTrailingWhitespace": true,

• Make sure ERB, IntelliSense, Prettier and Emmet work together (already in the settings above) :

  "tailwindCSS.includeLanguages": {
    "javascript": "javascript",
    "html": "html",
    "erb": "html"
  },
  "tailwindCSS.emmetCompletions": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "tailwindCSS.experimental.classRegex": [
    "\\bclass:\\s*'([^']*)'",
    "\\bclass:\\s*\"([^\"]*)\""
  ],

💎 Ruby related extensions

• Ruby LSP (check out the docs)
• Ruby Solargraph (needed for ERB Formatter/Beautify - see below)
• ruby-rubocop-revived ⭐️⭐️
• Auto Add Brackets in String Interpolation ⭐️⭐️
• Endwise ⭐️⭐️
• Rails Fast Nav (switch between models and controllers) ⭐️
• rails-latest-migration ⭐️⭐️⭐️
• erb
• ERB Formatter/Beautify ⭐️⭐️⭐
• ERB Helper Tags ⭐️
• Rails I18n
• Rails Partial
• Rails ViewComponent
• Ruby Around the Block ⭐️⭐️
• Ruby Language Colorization
• Stimulus LSP ⭐️⭐️⭐️

🌈 Other extensions

• Auto Rename Tag ⭐️⭐️
• Auto Close Tag ⭐️⭐️
• Color Highlight ⭐️⭐️
• Color Info
• DotENV
• Prettier (only for pure JS and HTML)
• ESLint
• Highlight matching tag ⭐️⭐️
• htmltagwrap
• Headwind (Tailwind)
• Import Cost
• Markdown All in One (THE ONLY Mardkown Editor you need) ⭐️⭐️⭐️
• PostCSS Language Support
• Tailwind CSS IntelliSense ⭐️⭐️⭐️
• Relative Path ⭐️⭐️⭐️
• YAML
• YAML Sort ⭐️

👖 VSCode useful shortcuts

For some of the following shortcuts, you will need to add these key bindings manually :

• Collapse folders in sidebar : CMD + @
• Open any file in the present directory : CMD + P and CDM + SHIFT + Pfor Vscode internal files
• Hide / show sidebar : CMD + B
• Switch tabs : Control + TAB
• Move by words instead of end or beginning of line : Control + ← or →
• Duplicate line : CMD + Shift + D
• Insert a line : click anywheare on a line and then CMD + Enter
• Format code : Shift + Option + F
• Focus on sidebar and navigate file tree : CMD + SHIFT + E and then navigate with arrows. If you press ENTER it will rename the highlighted file and if you press CMD + ⬇ it will open it.

At the end, VSCode should look clean like this :

⚡️ Additional user snippets for smooth Rails dev : erb.json

"rp": {
		"prefix": "rp",
		"body": "<%= render 'partial/path', var: @var %>",
		"description": "render partial"
	},
	"ep": {
		"prefix": "ep",
		"body": "<%=  %>",
		"description": "embed print"
	},
	"turbo_stream": {
		"prefix": "ts",
		"body": "<%= turbo_stream %>",
		"description": "turbo stream",
	},
	"turbo_stream_do": {
		"prefix": "tsd",
		"body": "<%= turbo_stream do %>\n<% end %>",
		"description": "turbo stream do",
	},
	"turbo_frame_tag": {
		"prefix": "tft",
		"body": "<%= turbo_frame_tag dom_id() do %>",
		"description": "turbo frame tag",
	},
	"turbo_stream_from": {
		"prefix": "tsf",
		"body": "<%= turbo_stream_from() %>",
		"description": "turbo stream from"
	},
	"form_with": {
		"prefix": "fw",
		"body": "<%= form_with model: @model do |form| %>\n<%= form.label :attribute %>\n<%= form.text_field :attribute %>\n<%= form.submit %>\n<% end %>"
		,
		"description": "Form with"
	},
	"button_to": {
		"prefix": "bt",
		"body": "<%= button_to %>"
		,
		"description": "Button to"
	},
	"number_to_currency": {
		"prefix": "ntc",
		"body": "number_to_currency()"
		,
		"description": "Number to currency"
	}