Skip to content

Instantly share code, notes, and snippets.

@manufarez
Last active October 24, 2023 00:20
Show Gist options
  • Save manufarez/357c58d303b6594dc2e56a2c808c7cb2 to your computer and use it in GitHub Desktop.
Save manufarez/357c58d303b6594dc2e56a2c808c7cb2 to your computer and use it in GitHub Desktop.
VSCode configuration for Rails - SublimeText like

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 : alt text

  • 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 : alt text

⚡️ 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"
	}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment