Repository: facebook/react
File: packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js (JavaScript)

Code before:
      </label>

      <label className={styles.OpenInURLSetting}>
        Open in Editor URL:{' '}
        <select
          className={styles.Select}
          value={openInEditorURLPreset}
          onChange={({currentTarget}) => {
            const selectedValue = currentTarget.value;
            setOpenInEditorURLPreset(selectedValue);
            if (selectedValue === 'vscode') {
              setOpenInEditorURL('vscode://file/{path}:{line}');
            } else if (selectedValue === 'custom') {
              setOpenInEditorURL('');
            }
          }}>
          <option value="vscode">VS Code</option>
          <option value="custom">Custom</option>
        </select>
        {openInEditorURLPreset === 'custom' && (
          <input
            className={styles.Input}
            type="text"
            placeholder={
              process.env.EDITOR_URL ? 'vscode://file/{path}:{line}' : ''
            }
            value={openInEditorURL}
            onChange={event => {
              setOpenInEditorURL(event.target.value);
            }}
          />
        )}
      </label>

      <div className={styles.Header}>Hide components where...</div>

      <table className={styles.Table}>
        <tbody>
          {componentFilters.length === 0 && (
            <tr className={styles.TableRow}>
              <td className={styles.NoFiltersCell}>
                No filters have been added.
              </td>
            </tr>
          )}
          {componentFilters.map((componentFilter, index) => (
            <tr className={styles.TableRow} key={index}>
              <td className={styles.TableCell}>
                <Toggle
                  className={
                    componentFilter.isValid !== false

Review comment (suggestion):
```suggestion
            placeholder={getDefaultOpenInEditorURL()}
```

Code after:
        Always parse hook names from source{' '}
        <span className={styles.Warning}>(may be slow)</span>
      </label>

      <label className={styles.OpenInURLSetting}>
        Open in Editor URL:{' '}
        <select
          className={styles.Select}
          value={openInEditorURLPreset}
          onChange={({currentTarget}) => {
            const selectedValue = currentTarget.value;
            setOpenInEditorURLPreset(selectedValue);
            if (selectedValue === 'vscode') {
              setOpenInEditorURL(vscodeFilepath);
            } else if (selectedValue === 'custom') {
              setOpenInEditorURL('');
            }
          }}>
          <option value="vscode">VS Code</option>
          <option value="custom">Custom</option>
        </select>
        {openInEditorURLPreset === 'custom' && (
          <input
            className={styles.Input}
            type="text"
            placeholder={process.env.EDITOR_URL ? process.env.EDITOR_URL : ''}
            value={openInEditorURL}
            onChange={event => {
              setOpenInEditorURL(event.target.value);
            }}
          />
        )}
      </label>

      <div className={styles.Header}>Hide components where...</div>

      <table className={styles.Table}>
        <tbody>
          {componentFilters.length === 0 && (
            <tr className={styles.TableRow}>
              <td className={styles.NoFiltersCell}>
                No filters have been added.
              </td>
            </tr>
          )}
          {componentFilters.map((componentFilter, index) => (
            <tr className={styles.TableRow} key={index}>
              <td className={styles.TableCell}>
                <Toggle
                  className={
                    componentFilter.isValid !== false