Get rid of the middle grey line in the workspace

Remove the Middle Grey Line in PhpStorm/WebStorm

Learn how to disable the distracting middle grey line (right margin) in your PhpStorm or WebStorm editor, improving code readability and focus.

Many developers using JetBrains IDEs like PhpStorm or WebStorm encounter a persistent, often annoying, grey vertical line in the middle of their editor. This line, typically referred to as the 'right margin' or 'wrap guide', is intended to help maintain code readability by indicating a preferred line length. However, for many, it can be a visual distraction, especially when working with different screen sizes or coding styles. This article will guide you through the simple steps to disable this line, allowing for a cleaner and more focused coding environment.

Understanding the Right Margin

The grey line you see is a visual indicator for the 'Right Margin' setting in your IDE. Its primary purpose is to suggest where lines of code should ideally wrap to prevent them from becoming too long and difficult to read horizontally. While this is a good practice in many coding standards (e.g., PEP 8 for Python suggests 79 characters, Google's Java style guide suggests 100 characters), its fixed position can be problematic. For instance, if you're working on a large monitor and prefer longer lines, or if your code naturally extends beyond this arbitrary limit, the line becomes more of a nuisance than a helper.

flowchart TD
    A[Developer Opens IDE] --> B{Grey Line Visible?}
    B -->|Yes| C[Distraction/Annoyance]
    C --> D[Desire to Remove Line]
    D --> E[Access IDE Settings]
    E --> F[Navigate to Editor > General > Appearance]
    F --> G["Uncheck 'Show right margin'"]
    G --> H[Apply Changes]
    H --> I[Clean, Focused Editor]
    B -->|No| I

Workflow to disable the right margin in JetBrains IDEs.

Disabling the Right Margin

Disabling this line is straightforward and can be done through the IDE's settings. The process is identical for both PhpStorm and WebStorm, as they share the same underlying JetBrains platform. You'll need to navigate through the editor's general appearance settings to find the relevant option.

1. Open IDE Settings

Go to File > Settings (on Windows/Linux) or PhpStorm / WebStorm > Preferences (on macOS).

2. Navigate to Editor Appearance

In the Settings/Preferences dialog, expand Editor in the left-hand menu, then select General, and finally click on Appearance.

3. Uncheck 'Show right margin'

On the right side of the Appearance settings, locate the checkbox labeled Show right margin. Uncheck this box.

4. Apply Changes

Click Apply and then OK to save your changes and close the settings dialog. The grey line should now be gone from your editor.

Alternative: Adjusting the Right Margin Column

Instead of completely removing the line, you might prefer to simply adjust its position to a more suitable column number. This can be useful if you adhere to a specific coding standard that requires a longer line limit (e.g., 120 or 140 characters) than the default 80. This setting is found in a different location within the IDE.

1. Open IDE Settings

Go to File > Settings (on Windows/Linux) or PhpStorm / WebStorm > Preferences (on macOS).

2. Navigate to Code Style

In the Settings/Preferences dialog, expand Editor in the left-hand menu, then select Code Style.

3. Adjust 'Hard wrap at' value

On the right side, you'll find a field labeled Hard wrap at. Change this value to your desired column number (e.g., 120, 140). This will move the grey line to that position.

4. Apply Changes

Click Apply and then OK to save your changes. The grey line will now appear at your specified column.