JetBrains WebStorm #

Settings prefixed with ! are only applied to the current project. They have to be set again for other projects.

Appearance & Behavior #

Left SectionRight SectionValue
AppearanceTree Views
↪ Show indent guides		☑
System SettingsConfirm before exiting the IDE☐
System SettingsWhen closing a tool window with a running process:Terminate process
System SettingsProject
↪ Reopen projects on startup		☐
System SettingsProject
↪ Open project in		New window

Keymap #

Visual Studio
NameShortcut Custom
Create Rectangular Selection on Mouse DragAlt + Click
Move Line DownAlt + Down☑, Remove "Previous Method"
Show Context ActionsAlt + Enter, Ctrl + .
Surround With...Alt + T☑
Move Line UpAlt + Up☑, Remove "Next Method"
Add or Remove CaretCtrl + Alt + Click
Clone Caret BelowCtrl + Alt + Down☑
SettingsCtrl + Alt + S
Clone Caret AboveCtrl + Alt + Up☑
Go to Declaration or UsagesCtrl + Click
Duplicate Line or SelectionCtrl + D
FindCtrl + F
RunCtrl + F5
ReplaceCtrl + H
Comment with Line CommentCtrl + K ➜ C
Reformat CodeCtrl + K ➜ D
RenameCtrl + R ➜ R
Find in FilesCtrl + Shift + F
Replace in FilesCtrl + Shift + H
Parameter InfoCtrl + Shift + Space
Code Completion
↪ Basic		Ctrl + Space
Close TabCtrl + W☑
Toggle Line BreakpointF9
Step OverF10
Step IntoF11
Search EverywhereShift + Shift, Ctrl + T

Editor #

Left SectionRight SectionValue
GeneralSoft Wraps
↪ Soft-wrap these files: *.md; *.txt; *.rst; *.adoc		☑
General
↪ Appearance		Show method separators☑
General
↪ Appearance		Show CSS color preview as background☑
General
↪ Code Completion		Match case:☐
General
↪ Editor Tabs		Appearance
↪ Tab placement:		Left
General
↪ Editor Tabs		Appearance
↪ Mark modified		☑
Code Style
↪ HTML		Arrangement− Remove rule(s)
Live TemplatesJavaScript ➜ + ➜ 1 Live Template
Abbreviation:edf
Description:export default function
Template text:
export default function $NAME$() {
  $END$
}
Edit Variables...
↪ Expression		complete()
Define
Everywhere
↪ JavaScript
↪ Top level statement, Everywhere
↪ TypeScript
↪ Top level statement		☑
Options
↪ Reformat according to style		☑
Live TemplatesReact ➜ + ➜ 1 Live Template
Abbreviation:uc
Description:"use client";
Template text:
"use client";
$END$
Define
Everywhere
↪ JavaScript
↪ Top level statement, Everywhere
↪ TypeScript
↪ Top level statement		☑
Options
↪ Reformat according to style		☑
Inlay HintsParameter Names☐
Inlay HintsTypes☐
Emmet
↪ HTML		Enable abbreviation preview☑

Plugins #

  • Marketplace ➜ Rainbow Brackets
  • ➜ Update Plugins Automatically

Languages & Frameworks #

Left SectionRight SectionValue
! JavaScript
↪ Code Quality Tools
↪ ESLint		Automatic ESLint configuration☑
! JavaScript
↪ Prettier		Automatic Prettier configuration☑
! JavaScript
↪ Prettier		Run for files:**/*.{html,css,scss,js,ts,cjs,cts,mjs,mts,jsx,tsx,vue,astro,json,md}
! JavaScript
↪ Prettier		Run on save☑
! JavaScript
↪ Prettier		Run on paste☑
! JavaScript
↪ Prettier		Prefer Prettier configuration to IDE code style☑
! JavaScript RuntimeNode.js
↪ Coding assistance for Node.js		☑
! Style Sheets
↪ Stylelint		Enable☑
! Style Sheets
↪ Stylelint		Run for files:**/*.{css,scss}
! Style Sheets
↪ Stylelint		Run stylelint --fix on save☑

Tools #

Left SectionRight SectionValue
! Actions on SaveReformat code☑
! Actions on SaveRearrange code☑
! Actions on SaveRun stylelint --fix☑
! Actions on SaveRun Prettier☑
! TerminalCommand Completion
↪ Insert suggestion with:		Tab
! TerminalFont Settings
↪ Font:		MesloLGM Nerd Font

Backup and Sync #

Left SectionRight SectionValue
Enable backup and sync:☑

Advanced Settings #

Left SectionRight SectionValue
Run/Debug
↪ Confirm rerun with process termination		☐

Rainbow Brackets #

Left SectionRight SectionValue
ColorColor
↪ Cycle count on all brackets		☑
Language SpecificLanguage Specific
↪ Rainbowify tag name in XML/HTML/template files		☑